JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="class-1">
  <p>lorem ipsum</p>
</div>
<div class="class-2">
  <p>lorem ipsum</p>
</div>

<div class="class-3">
  <span>First span text
    <span>Second span text
      <span>Third span text</span>
    </span>
  </span>
</div>

CSS

html {
  font-size: 30px;
}

.class-1 {
  font-size: 20px;
}

.class-1 p {
  font-size: 0.75rem;
}


.class-2 {
  font-size: 30px;
}

.class-2 p {
  font-size: 0.75rem;
}

.class-3 {
  font-size: 30px;
}

span {
  display: block;
  font-size: 0.66em;
}