JSFiddle - React, Tailwind, and code Playground

by Jayx

HTML

<div class="hover_me">hover me</div>
<div class="toggled show_me">show me</div>
<div class="toggled remove_me">make me disappear</div>

CSS

.hover_me {
    cursor:pointer;
    -webkit-transition: .4s;
    transition: .4s;
    display:block;
    height:30px;
    background:red;
    width:70px;
    line-height:30px;
    text-align:center;
}
.show_me {
    opacity: 0;
}
.hover_me:hover ~ .remove_me {
    opacity: 0;
}
.hover_me:hover ~ .show_me {
    opacity: 1;
}
.remove_me {
    opacity: 1;
}
.toggled{
    position: absolute;
    transition: opacity 300ms;
}