JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
        <div class="big" tabindex="1"></div>
        <div class="small"></div>    
    </div>

CSS

.wrap{
    width: 960px;
    margin: 0 auto;
    border: 1px solid #000;
}

.big{
    width: 200px;
    height: 100px;
    background: #222;
}

.small{
    float: left;
    width: 300px;
    height: 300px;
    background: #000;
    /* opacity: 0; */
    z-index: -1;
    -webkit-transition-property : opacity;
    -moz-transition-property : opacity;
    -o-transition-property : opacity;
    -ms-transition-property : opacity;
    transition-property : opacity;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;
}

.big:focus ~ .small{
    float: none;
    opacity: 1;
    z-index: 1;
}