JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<div class="box">
hover me
  <div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores aliquam magnam enim ullam nihil, rem eius consequatur laboriosam dolore maxime incidunt sunt in! Voluptatem architecto tenetur rerum. Commodi, voluptates, ratione.</div>
    <div>Dolorum accusamus ipsum eos quibusdam. Alias nesciunt animi, quas cum. Qui asperiores temporibus voluptates quae. Aspernatur molestiae voluptatum ut eos ratione, fugiat eligendi. Quam modi, est quae ipsam similique voluptatum!</div>
    <div>Laudantium architecto ratione voluptate accusantium dolorem nihil ullam officiis repellendus ipsam illum excepturi possimus voluptas eaque quam iste nam commodi deserunt repellat nemo soluta, cumque quisquam magnam! Nesciunt, magnam, explicabo!</div>
  </div>
</div>

CSS

.box {
  width: 400px;
  min-height: 200px;
}

.content {
  display: flex;
  justify-content: center;
  opacity: 0;
  transition: opacity 2s;
  padding: 10px;
   background: #ECEFF1;
}

.box:hover .content {
  transition-delay: 1s;
  opacity: 1;
}