JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum vitae, dolores quo at! Asperiores modi, nulla necessitatibus, maiores sed repudiandae earum omnis odit labore voluptatem nihil dolor minima praesentium voluptatibus.</div>
<div>Porro fugiat voluptas necessitatibus temporibus! Nulla incidunt, officia. Est, possimus corporis pariatur, iure, eius at accusantium accusamus illo necessitatibus a, voluptas minus placeat quod saepe. Delectus, at soluta! Accusamus, cum.</div>
<div>Atque libero error eveniet voluptate architecto adipisci, modi esse minus impedit voluptates quisquam. Et, commodi, laborum animi illo esse, molestiae quibusdam voluptatem blanditiis labore perferendis minus! Accusantium eos, eaque vero.</div>
<div>Nemo quaerat a doloremque neque sequi explicabo saepe natus vel voluptatibus suscipit dignissimos, obcaecati ad maiores hic architecto dolor veritatis, ipsa quos mollitia, esse impedit blanditiis. Accusantium similique perspiciatis eos.</div>
<div>Dolor numquam ad possimus, vero amet, corporis aspernatur tempore dolore atque iure autem suscipit quibusdam laborum blanditiis sequi, minus totam! Assumenda dignissimos ea ipsam, quibusdam tempora, qui et officia obcaecati!</div>
<div>Voluptatum ipsum veritatis eveniet dolorem recusandae, adipisci illum asperiores consectetur itaque. Possimus nulla, odio explicabo hic laborum praesentium sed molestiae, beatae similique, soluta dolorum velit saepe blanditiis. Minima, molestias adipisci.</div>
<div>Repellendus neque amet quidem! Deserunt, dolorum necessitatibus atque consequatur neque distinctio porro modi, sint molestias iure architecto sit, impedit tenetur corporis. Officiis maiores, tempore sunt autem natus perspiciatis unde vel.</div>
<div>Quam, quo, eos. Expedita, laudantium. Quos facere dolorem eius ratione harum debitis nulla quod vero, sit dicta aperiam aliquid praesentium sed molestiae eveniet, asperiores temporibus id laborum distinctio illum. Temporibus!</div>
<div>Quaerat...

CSS

html, body {
  margin: 0;
  min-height: 100vh;
  font-size: 24px;
  line-height: 1.5;
  vertical-align: middle;
  
  animation: font-size 4s linear 0.5s 12 alternate;
}

@keyframes  font-size {
  0% {
    font-size: 14px;
  }
  
  100% {
    font-size: 64px;
  }
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to right, gray 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px);
  background-size: 1.5em 1.5em;
}