JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<div class="result">
    <div id="add">
        
    </div>
    
    
</div>

CSS

.result{            
     width: 200px;
     height: 300px;
    position: relative;
    top: 0;
    background: #ff0000;
}           
.result #add{
    position:absolute;
    top:0;
    opacity: 0;
    width:200px;
    height:300px;
    background:yellow;
    -webkit-transition: 1s ease-out;
     -moz-transition: 1s ease-out;
     transition: 1s ease-out;
}
.result:hover #add{
     opacity: 1;
     top: 40px;
}