JSFiddle - React, Tailwind, and code Playground

HTML

Build-in list:
<ul class="listaEspecial">
  <li value="II">Alpha</li>
  <li value="III">Beta</li>
  <li value="☸" >Gamma</li>
  <li value="MXX">Delta</li>
</ul>

<hr/>
Standard list (better spacing and point-align):
<ol type="I" start="2">
  <li>Alpha</li>
  <li>Beta</li>
  <li value="10" >Gamma</li>
  <li>Delta</li>
</ol>

CSS

.listaEspecial {
  list-style: none;
  list-style-position: outside;
}
.listaEspecial li:before {
    content:  attr(value) ". ";
 }