JSFiddle - React, Tailwind, and code Playground

by okke

HTML

<ul class=reveal>
    <li class=reveal__item><span class=reveal__txt>Condimentum</span></li>
    <li class=reveal__item><span class=reveal__txt>Lorem Sit</span></li>
    <li class=reveal__item><span class=reveal__txt>Egestas Aenean</span></li>
    <li class=reveal__item><span class=reveal__txt>Pellentesque</span></li>
</ul>

CSS

* { /* Never do this IRL */
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 20px;
    font-family: sans-serif;
}
.reveal {
    width: 1em;
    height: 6em;
    overflow: hidden;
    background: #ddd;
    transition: 1s;
}
.reveal:hover {
    width: 20em;
}
.reveal__item {
    width: 20em;
    height: 1.5em;
    margin-left: 1em;
    opacity: 0;
    transition: 0.5s;
}
.reveal:hover .reveal__item {
    transition-delay: 1s;
    opacity: 1;
}