JSFiddle - React, Tailwind, and code Playground

HTML

<pre><u></u><u></u><u></u><b></b><u></u><u></u><i></i><b></b><br><b></b><i></i><i></i><u></u><i></i><i></i><i></i><b></b><br><u></u><b></b><i></i><i></i><b></b><b></b><b></b><b></b><br><u></u><b></b><b></b><b></b><u></u><u></u><u></u><u></u></pre>

CSS

pre {
    display: table-cell;
    margin: 0;
    line-height: 0;
    background-image: linear-gradient(black 1px, transparent 1px),linear-gradient(90deg, black 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px;
    background-position: 10px 10px, 10px 10px;
}

    pre * {
        width: 17px;
        height: 17px;
        border-radius: 17px;
        margin: 0.5px;
        display: inline-block;
    }

    pre b {
        background: black;
        border: 1px solid black;
    }

    pre i {
        background: white;
        border: 1px solid black;
    }

    pre u {
        background: transparent;
        border: 1px solid transparent;
    }