JSFiddle - React, Tailwind, and code Playground

by dotnil

HTML

<div class="element element1"></div>
<div class="element element2"></div>
<div class="element element3"></div>

CSS

.element {
    width: 100px;
    background: #aaa;
    height: 100px;
    float: left;
    margin: 0 10px 10px 0;
}

.element1 {
    transition: height 0.4s ease;
}
.element1:hover {
    height: 200px;
}

.element2 {
    opacity: 0.0;
    -webkit-transform: scale(0.95) translate3d(0,100%,0);
    transition: -webkit-transform 400ms ease, opacity 400ms ease;
}
.element2-hover,
.element2:hover {
    opacity: 1.0;
    -webkit-transform: scale(1.0) translate3d(0,0,0);
}

.element3 {
    background-color: #000;
    background-image: linear-gradient(rgba(255, 255, 0, 0.4), #FAFAFA);
    transition: background-color 400ms ease;
}
.element3:hover {
    background-color: #ddd;
}

JavaScript

var ele2 = document.querySelector('.element2')

setTimeout(function() {
    ele2.classList.add('element2-hover')
}, 2000)

setTimeout(function() {
    ele2.classList.remove('element2-hover')
}, 5000)