JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="rectangle-list">
    <li>00</li>
    <li>00</li>
    <li>00</li>
    <li>00</li>
</ol>

CSS

ol {
            counter-reset: li;
            list-style: none;
            *list-style: decimal;
            color: black;

        }
        .rectangle-list li{
            position: relative;
            display: block;
            padding: .4em .4em .4em .8em;
            *padding: .4em;
            margin: .5em 0 .5em 2.5em;
            text-decoration: none;
            color: black;
        }

        .rectangle-list li:before{
            content: counter(li);
            counter-increment: li;
            position: absolute;
            left: -2.5em;
            top: 50%;
            margin-top: -1em;
            background: #911f1f;
            color: antiquewhite;
            height: 2em;
            width: 2em;
            line-height: 2em;
            text-align: center;
            font-weight: bold;
        }