JSFiddle - React, Tailwind, and code Playground

by CBroe

HTML

<div id="container">
<span class="word">
    <span>A</span><span>A</span><span>A</span>
</span>
<span class="word">
    <span>B</span><span>B</span><span>B</span><span>B</span><span>B</span>
</span>
<span class="word">
    <span>C</span><span>C</span><span>C</span><span>C</span><span>C</span><span>C</span><span>C</span>
</span>
<span class="word">
    <span>D</span><span>D</span><span>D</span><span>D</span><span>D</span><span>D</span>
</span>
</div>

CSS

#container {
    text-align:center;
    word-spacing:10px;
}
span.word {
    font-size:36px; display:inline-block;
}
span.word span {
    display:inline-block;
    width:50px;
    height:50px;
    margin:5px;
    border:1px solid blue;
}