<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu&display=swap" rel="stylesheet">

<div class="container">
  <div class='content'>
    <p><span>Congratulations, you just learned about CSS logical properties!</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 013 3h-15a3 3 0 013-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 01-.982-3.172M9.497 14.25a7.454 7.454 0 00.981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 007.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 002.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 012.916.52 6.003 6.003 0 01-5.395 4.972m0 0a6.726 6.726 0 01-2.749 1.35m0 0a6.772 6.772 0 01-3.044 0" />
      </svg></p>
  </div>
</div>
:root {
  --fs: 1.25rem;
  --ff-default: system-ui, sans-serif;
  --clr-primary: hotpink;
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-size: 1rem;
  font-family: var(--ff-default);
  background-color: black;
  color: white;
}

@media (min-width: 640px) {
  body {
    font-size: var(--fs);
  }
}

.container {
  width: max-content;
}

.content {
  --ox: 0px;
  --oy: 0px;
  --br: 12px;
  --sr: -4px;
  --bs-clr: var(--clr-primary);

  margin: 1em;
  border: 1px solid var(--bs-clr);
  padding: 0.5em;
  border-radius: 0.25em;
  box-shadow: var(--ox) var(--oy) var(--br) var(--sr) var(--bs-clr);
}

.content p {
  display: inline-flex;
}

.content svg {
  flex: none;
  width: 2rem;
  stroke: var(--clr-primary);
  margin-left: 0.5em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.