JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<main>
  <h1></h1>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi nemo dignissimos doloribus nihil, sit labore repellat laboriosam commodi possimus illo odit vel eaque reiciendis. Sed reprehenderit est eius quam neque.</div>
  <div>A, eius ullam eveniet expedita officiis dolor consequuntur officia libero amet quasi laudantium laboriosam numquam deleniti temporibus ipsa, neque, obcaecati sequi dolorum. Quidem ex, odio ullam natus aliquid sequi quasi.</div>
  <div>Nostrum voluptates ipsam a, mollitia ipsa vero adipisci error debitis cumque rerum culpa dolore facilis sequi incidunt vel molestiae veniam ea totam impedit perferendis earum. Sit nam repellat at inventore.</div>
  <div>Dolor reprehenderit ipsa quisquam nesciunt tempora esse molestias libero ut impedit iure repudiandae error repellat illum laborum eveniet, nisi hic perferendis, tenetur non voluptas alias totam, quia quis harum. Possimus?</div>
  <div>Sint, debitis nobis distinctio reprehenderit necessitatibus dolor. Reprehenderit unde magnam quod! Delectus adipisci deserunt nulla ut ducimus modi, iste asperiores excepturi. Itaque pariatur repudiandae assumenda recusandae, provident corporis ullam, accusamus?</div>
  <div>Quos, doloremque magni sunt atque. Deleniti, laboriosam reprehenderit, praesentium nesciunt delectus facilis cupiditate non, voluptas adipisci fugiat, quae neque. Veritatis officia tempora enim, at voluptatibus a! Assumenda voluptates repellat nihil?</div>
  <div>Quod numquam, quibusdam architecto est minima voluptate labore, illo magnam modi, blanditiis quo incidunt adipisci soluta quasi unde. Distinctio sunt pariatur explicabo aliquid ipsa. Cum facere velit nam, voluptatum alias.</div>
  <div>Ullam quam tempora vitae inventore quod dolore error laboriosam? Praesentium, nihil optio ex tempore temporibus voluptatibus vel commodi doloribus fuga omnis itaque quasi explicabo nobis molestias impedit quis porro esse!</div>
  <div>Illum expedita commodi eligendi...

CSS

main {
  width: 20em;
  height: 10em;
  max-height: 10em;
  margin: 2em auto;
  box-shadow: 0 0 2px 1px black;
  overflow: auto;
  position: relative;
}

.modal {
  padding: 0 0.5em;
  background: #c9c9c9;
  position: absolute;
  top: 6.2em;
  font-size: 1.2em;
  left: 50%;
  width: 14em;
  transform: translateX(-50%);
}