JSFiddle - React, Tailwind, and code Playground

by calle_bjernekull

HTML

<body>
<div class="container">
<label>
Hover container
</label>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis congue lectus pharetra interdum. Cras sit amet interdum ipsum, vel commodo ante. Maecenas quis libero eu tortor suscipit rutrum. Cras quam eros, malesuada ac semper sed, viverra condimentum nisl. Quisque lobortis porta purus non fringilla. Fusce erat eros, aliquam a diam quis, ullamcorper laoreet odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pharetra scelerisque felis, vitae finibus dui lobortis non. Mauris iaculis rutrum vehicula. Nullam porta arcu et diam porta, in tristique nisl ornare. Mauris id ex maximus, lobortis erat a, laoreet justo.

Nullam tempus neque enim, nec consectetur enim fringilla ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin non rutrum nisl, sed vestibulum augue. Sed ac magna et metus tempus bibendum elementum id libero. Sed semper imperdiet risus et pellentesque. Aliquam commodo magna at rhoncus pellentesque. Vivamus tempus tellus lorem, a volutpat est pharetra nec. Vestibulum velit ligula, aliquet sit amet bibendum eget, viverra scelerisque tellus. Cras aliquam hendrerit bibendum. Etiam non faucibus nisi, sit amet cursus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Maecenas in eros ac elit pretium molestie. Mauris quis dolor erat. Suspendisse scelerisque gravida libero, rutrum consectetur metus ultrices in. Fusce eleifend, orci vitae sodales dictum, lectus nunc volutpat nulla, in efficitur dolor augue sed lorem. Nam ac lectus ultrices, ornare magna non, auctor neque. Mauris eros eros, bibendum commodo dolor non, posuere ultrices leo. Nullam ut laoreet ligula. Nulla posuere risus nec nibh fermentum, pretium consequat tellus eleifend. Vestibulum volutpat nisl quis euismod pulvinar. Donec hendrerit augue...

CSS

.container{
  
  overflow:hidden;
  max-height:20px;
  transition-property: max-height;
  -webkit-transition-property: max-height;
  transition-delay: 1s; /*Set a delay for this css-propery so content also slides up*/
  -webkit-transition-delay: 1s;
}
.container .content{
  z-index:5;
  background-color:LightGray;
  
  margin-top:20px;
  transform:translateY(-100%);
  -webkit-transform:translateY(-100%);
  transition:transform 1s;
  -webkit-transition:transform 1s;
}
.container:hover{
  max-height:9999px; /*apparently "none" doesnt work*/
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}
.container:hover .content{
  
  transform:translateY(0);
  -webkit-transform:translateY(0);
}

/*Less interesting stuff below*/
body{
  background-color:navy;
}
div,label{
  margin:0;
  padding:0;
}
.container label{ /*Just a label to describe what you can do here*/
  height:20px;
  line-height:20px;
  display:block;
  z-index:10;
  position:absolute;
  background-color:maroon;
  width:100%;  
}