JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="numbered-list">
    <li class="numbered">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur molestie sapien. Pellentesque malesuada dapibus sapien, ac elementum nisi mattis at. Praesent vel libero blandit, tempus quam sit amet, adipiscing eros. Praesent sit amet velit eu nulla dictum blandit vitae vitae augue.</li>
    <li class="numbered">Morbi diam erat, egestas vitae turpis ut, tristique tincidunt turpis. In tristique sapien at mollis convallis. Curabitur in fringilla ipsum. Donec at ante semper, mollis augue sed.</li>
    <p class="numbered">Nullam quis rhoncus odio. Nam faucibus eu tortor ut commodo. Nulla interdum, odio hendrerit volutpat venenatis.</p>
    <div class="numbered">Fusce ac sapien libero. Nunc et quam faucibus, faucibus orci sit amet, dapibus velit. Vestibulum lorem tortor, ornare eget ante vel, malesuada pharetra dui. In vel posuere urna, quis condimentum libero. Aenean in velit sed tellus eleifend feugiat eu sit amet odio. Sed non hendrerit nisi, et lacinia odio.</div>
</ol>

CSS

ol, ul {
    list-style:none;
}
.numbered-list {
    counter-reset: list;
}
.numbered-list .numbered {
    padding-left: 40px;
    position: relative;
    min-height: 40px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #f2f2f2;
}
.numbered-list .numbered:before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 18px;
    width: 18px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    content: counter(list);
    counter-increment: list;
    padding: 6px;
    border-radius: 50%;
    background-color: #8793ad;
    text-align: center;
}
.numbered-list .numbered:hover:before {
    background-color: #52618a;
}
.numbered-list .numbered:last-child {
    border-bottom: none;
}