JSFiddle - React, Tailwind, and code Playground

by CBroe

HTML

<nav>
    <ul>
        <li data-keyword="Ipsum"><span>Lorem</span>  <strong>Ipsum</strong>  <span>dolor</span>  <span>sit</span>  <span>amet.</span>
        </li>
        <li data-keyword="Eirmod"><span>Sed</span>  <span>diam</span>  <span>nonumy</span>  <strong>Eirmod</strong>  <span>tempor</span>  <span>invidunt.</span>
        </li>
        <li data-keyword="Kasd"><span>Stet</span>  <span>clita</span>  <strong>Kasd</strong>  <span>gubergren.</span>
        </li>
    </ul>
</nav>

CSS

*, :after, :before {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
ul { margin:1em; }
li {
    display:inline-block;
    position:relative;
    vertical-align:top;
    padding:1em;
    cursor:pointer;
}
li:before {
    content:attr(data-keyword);
    padding-right:.667em;
    font-size:3em;
    font-weight:bold;
    border-right:1px solid #ccc;
}
li:hover { color:#333; }
span, strong { display:block; height:0em; line-height:0em; overflow:hidden; transition:all .25s; xoutline:1px solid red; }
li:hover span, li:hover strong { height:1em; line-height:1em; transition:all .5s; }