JSFiddle - React, Tailwind, and code Playground

by metulev

HTML

<div class="root">

<div class="parent flyout">
  <div class="random">
  
  </div>
  <div class="animatable">
  
  
  <div>
  
  
  <div class="child flyout">
    <div class="animatable">
    
    
    </div>
  </div>
  </div>
  </div>
</div>
</div>

CSS

.flyout {
  display: inline-block;
  position: fixed;
  
  
}

.animatable {
  height: 100%;
  width: 100%;
  transition-property: opacity;
    transition-duration: 0.1s;
    animation-name: fadeIn;
      animation-duration: 0.3s;
      animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
      animation-fill-mode: both;
}

.parent{
  
  height: 100px;
  width: 100px;
  background: red;
  top: 50px;
  left: 250px;
  
}

.child {
  
   height: 150px;
  width: 150px;
  background: green;
  top: 0;
  left: 0;
}

.random{
   height: 10px;
  width: 10px;
  background: purple;
}

.root {
  margin: 200px;
  background: gray;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}