JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="ib-featured-snippet ">
<li>Text text</li>
<li>Text text</li>
<li>Text text</li>
<li>Text text</li>
<li>Text text</li>
</ol>

CSS

.ib-featured-snippet ol {
counter-reset: item;
}

.ib-featured-snippet {
background-color: #f5f8fa;
width: 100%;
max-width: 600px;
padding: 2.75rem;
position: relative;
right: 0rem;

}

.ib-featured-snippet h2 {
border-radius: .1875rem;
text-align: left;
position: relative;
color: #000;
padding: 1rem 1rem 0rem 0rem
}

.ib-featured-snippet ol>li::before {
content: counter(item) ".";
display: inline-block;
color: #2d3e50;
font-weight: 700;
text-align: right;
width: 1.5em;
padding-right: 0.5em;

}

.ib-featured-snippet ul, .ib-featured-snippet ol {
margin: 1.5em 0 1.25em 2.5rem;
padding: 0;
counter-increment: item;
text-indent: -2em;
list-style-type: none;
font-size: 20px;
}