JSFiddle - React, Tailwind, and code Playground

by Pratik Galoria

HTML

<div class="container">
  <div class="item">
    <div class="header">
    Header
    </div>
    <div class="content">
    content
    </div>
  </div>
</div>

CSS

body {
  padding: 30px;
}

.container {
  display: grid;
}

.item {
  border: 1px solid black;
}

.content {
  visibility: hidden;
  transition: all .2s ease-in;
}

.item:hover .content {
  visibility: visible;
  height: 300px;
}