JSFiddle - React, Tailwind, and code Playground

HTML

<i class="icon icon1"></i>
<i class="icon icon2"></i>
<i class="icon icon3"></i>

CSS

.icon {
        display: table-cell;
        position: relative;
        background: yellow;
        margin: 0px;
    }
    
    .icon1:before {
        content: "A";
    }
    
    .icon2:before {
        content: "B";
    }
    
    .icon3:before {
        content: "C";
    }