JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div class="twat">poo</div>

CSS

.twat {
  background: linear-gradient(#000 1px, #eee 1px);
  background-repeat: repeat;
  background-size: 1rem 1rem;
  font-size: var(--font-size);
  height: var(--height);
  width: 100%;
}
.twat {
  --font-size: 4rem;
}
@media screen and (min-width: 300px) {
  .twat {
    --font-size: calc(4rem + 4 * ((100vw - 18.75rem) / 500));
  }
}
@media screen and (min-width: 800px) {
  .twat {
    --font-size: 8rem;
  }
}
.twat {
  --height: 4rem;
}
@media screen and (min-width: 300px) {
  .twat {
    --height: calc(4rem + 4 * ((100vw - 18.75rem) / 500));
  }
}
@media screen and (min-width: 800px) {
  .twat {
    --height: 8rem;
  }
}