JSFiddle - React, Tailwind, and code Playground

by eklingen

HTML

<div class="brand">
    <div class="left"><div class="content">Jordan</div></div>
    <div class="middle">/</div>
    <div class="right"><div class="content">Nelson</div></div>
</div>

CSS

.brand {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:  translate( -50%, -50% );
    font-size: 40px;
}

.brand * {
    transition: 1s all;
}

.brand > div {
    position: absolute;
    overflow: hidden;
}

.brand .middle {
    background-color: pink;
}

.brand .left {
    right: 50%;
    margin-right: 0.5em;
    background-color: green;
}

.brand .right {
    left: 50%;
    margin-left: 0.5em;
    background-color: blue;
}

.brand .left .content {
    position: relative;
    left: 100%;
}

.brand .right .content {
    position: relative;
    right: 100%;
}

.brand:hover .left .content {
    left: 0%;
}

.brand:hover .right .content {
    right: 0%;
}