JSFiddle - React, Tailwind, and code Playground

by Elena Lembersky

HTML

<main>
<div class='ttt-wrap'>
  <div class="ttt">
    I AM GENIUS
  </div>
</div>
</main>

CSS

main{
  width: 250px;
  border: 1px solid #ccc;
  margin: 10% 10%;
  position: fixed;
  left: 20%;
  bottom: 20px;
}
.ttt-wrap{  
    max-height: 0;
    overflow: hidden;      
-webkit-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
   -webkit-animation-name: pulse;
     animation-name: pulse;
     -webkit-transform-origin: center bottom;
     transform-origin: center bottom; 
     
  border-bottom: 2px solid #cc00cc;
  padding-top: 5px;
  
/*   -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out; */
opacity: 0;
}
.ttt{  
  line-height: 20px;
  padding: 0 10px 10px;
  text-align: center;  
}

@-webkit-keyframes pulse {
  from {
    max-height: 0;
    padding-top: 5px;
    opacity: 0;
  }
  10%{
    opacity: 0;    
  }
  20% {
    max-height: 0;
    padding-top: 5px;
    opacity: 0; 
    
  }
  33% {
    max-height: 60px;
    opacity: 0; 
  }
  40% {
    max-height: 60px;
    padding-top: 5px;
    opacity: 0;
      
  }
  50% {   
    padding-top: 15px;  
    opacity: 1; 
  }
  75%{     
     padding-top: 0px;    
  }  
  to {    
    max-height: 60px;
     padding-top: 5px;
    opacity: 1; 
  }
}