JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div class="card"></div>

CSS

.card {
    position: relative;
    height: 300px;
    width: 200px;
    background: #eee;
    margin: 100px auto
}

.card:before, .card:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transition: left .5s, right .5s
}

.card:before {
    background: red;
    left: 0
}

.card:after {
    background: blue;
    right: 0
}

.card:hover:before {
    left: 100%
}

.card:hover:after {
    right: 100%
}