JSFiddle - React, Tailwind, and code Playground

by george_black

HTML

<div class="full">
            <p>test</p>
            <p class="hide">TextTextTextTextTextText</p>
         </div>
        
        <div class="full">
            hello
         </div>
        
        <div class="full">
            text
         </div>

SCSS

html,body { height: 100%; margin: 0px; padding: 0px; }



.full { background: #ff0000;
    height: 20%;
    top:40%;
    position:relative;
 width: 33.33%;float:left;
    -webkit-transition-property:all;
-webkit-transition-duration:0.4s;
-webkit-transition-timing-function:ease;
transition-property: all;
transition-duration: 0.4s;
transition-timing-function: ease;
}

.hide{
    opacity:0;
}
.full:hover{
    background: #0f0; top:0; height:100%;
    .hide{
        opacity:1;
    }
    
}