JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <p>disc</p>
    <ol class="disc">
        <li> list 1</li>
        <li> list 2</li>
        <li> list 3</li>
        <li> list 4</li>
        <li> list 5</li>
    </ol>
</div>    

<div>
    <p>circle</p>
    <ol class="circle">
        <li> list 1</li>
        <li> list 2</li>
        <li> list 3</li>
        <li> list 4</li>
        <li> list 5</li>
    </ol>
</div>    

<div>
    <p>square</p>
    <ol class="square">
        <li> list 1</li>
        <li> list 2</li>
        <li> list 3</li>
        <li> list 4</li>
        <li> list 5</li>
    </ol>
</div>    

<div>
    <p>decimal</p>
    <ol class="decimal">
        <li> list 1</li>
        <li> list 2</li>
        <li> list 3</li>
        <li> list 4</li>
        <li> list 5</li>
    </ol>
</div>    

<div>
    <p>decimal-leading-zero</p>
    <ol class="decimal-leading-zero">
        <li> list 1</li>
        <li> list 2</li>
        <li> list 3</li>
        <li> list 4</li>
        <li> list 5</li>
    </ol>
</div>    

<div>
    <p>lower-roman</p>
    <ol class="lower-roman">
        <li> list 1</li>
        <li> list 2</li>
        <li> list 3</li>
        <li> list 4</li>
        <li> list 5</li>
    </ol>
</div>    

<div>
    <p>upper-roman</p>
    <ol class="upper-roman">
        <li> list 1</li>
        <li> list 2</li>
        <li> list 3</li>
        <li> list 4</li>
        <li> list 5</li>
    </ol>
</div>    

<div>
    <p>lower-greek</p>
    <ol class="lower-greek">
        <li> list 1</li>
        <li> list 2</li>
        <li> list 3</li>
        <li> list 4</li>
        <li> list 5</li>
    </ol>
</div>    

<div>
    <p>lower-alpha</p>
    <ol class="lower-alpha">
        <li> list 1</li>
        <li> list 2</li>
        <li> list 3</li>
        <li> list 4</li>
        <li> list 5</li>
    </ol>
</div>    

<div>
    <p>lower-latin</p>
    <ol class="lower-latin">
        <li> list 1</li>
        <li> list 2</li>
        <li> list 3</li>
        <li> list 4</li>
        <li> list...

CSS

div {
    font-size: 0.75em;
    width: 150px;
    height: 150px;
    float:left;
}
.disc {
    list-style-type: disc;
}
.circle {
    list-style-type: circle;
}
.square {
    list-style-type: square;
}
.decimal {
    list-style-type: decimal;
}
.decimal-leading-zero {
    list-style-type: decimal-leading-zero;
}
.lower-roman {
    list-style-type: lower-roman;
}
.upper-roman {
    list-style-type: upper-roman;
}
.lower-greek {
    list-style-type: lower-greek;
}
.lower-alpha {
    list-style-type: lower-alpha;
}
.lower-latin {
    list-style-type: lower-latin;
}
.upper-alpha {
    list-style-type: upper-alpha;
}
.upper-latin {
    list-style-type: upper-latin;
}
.hebrew {
    list-style-type: hebrew;
}
.armenian {
    list-style-type: armenian;
}
.georgian {
    list-style-type: georgian;
}
.cjk-ideographic {
    list-style-type: cjk-ideographic;
}
.hiragana {
    list-style-type: hiragana;
}
.katakana {
    list-style-type: katakana;
}
.hiragana-iroha {
    list-style-type: hiragana-iroha;
}
.katakana-iroha {
    list-style-type: katakana-iroha;
}
.none {
    list-style-type: none;
}