JSFiddle - React, Tailwind, and code Playground

by sum1

HTML

<div id="cont">
    
    <div id="cont1">
    </div>
    
    <p id="ct1" >This is the mixture of position,z-index</p>
</div>

CSS

#cont{ background-color:yellow; width:900px; height:300px; margin:auto; padding:40px; position:relative; }
  
  #cont1{ background-color:black; box-shadow:5px 5px 5px white; width:30%; padding:10px; z-index:4; position:absolute; top:300; opacity:0.3; height:40px; border-radius:15px 0px 15px 0px; -webkit-animation:myframe1 1s ease-out 1s; -webkit-animation-fill-mode: forwards;  }
  
  #ct1{  z-index:5; color:white; position:absolute; font-family:cursive; top:300; left:60; -webkit-animation:myframe2 1s ease-in 1s; -webkit-animation-fill-mode: forwards;  }
  
  /* for chrome,opera,safari */
 @-webkit-keyframes myframe1{
   0%{ left:35;} 
   20%{ left:200; transform: rotate(0deg)  }
   100% { left:200; transform: rotate(0deg) }

 }
  @-webkit-keyframes myframe2{
    0%{ left:35;} 
    50%{ left:200; transform:scale(1.3,1.3); }
	100%{ left:200; }
 }