JSFiddle - React, Tailwind, and code Playground

by DNNdrago

HTML

<head lang="en">
    <meta charset="UTF-8">
    <title>HTML Lists</title>
</head>
<body>
    <div id="list">
        <p>Preceding text</p>

        <ol class="romeType">
            <li>List item 1
                <ol class="latin">
                    <li>Nested item 1.1</li>
                    <li>Nested item 1.2</li>
                </ol>
            </li>
            <li>List item 2
                <ol>
                    <li>Nested item 2.1</li>
                    <li>Nested item 2.2
                        <ul class="circle">
                            <li>Nested item 2.2.1</li>
                            <li>Nested item 2.2.2
                                <ul class="disc">
                                    <li>Nested item 2.2.2.1</li>
                                    <li>Nested item 2.2.2.2</li>
                                </ul>
                            </li>
                            <li>Nested item 2.2.3</li>
                        </ul>
                    </li>
                    <li>Nested item 2.3</li>
                </ol>
            </li>
            <li>List item 3
                <ul class="disc">
                    <li>Nested item 3.1</li>
                    <li>Nested item 3.2</li>
                    <li>Nested item 3.3</li>
                </ul>
            </li>
        </ol>
    </div>
</body>

CSS

p {
            padding-left: 10px;
        }
        #list {
            border: 1px solid #BBBBBB;
            border-radius: 15px;
            width: 300px;
        }
        .circle {
            list-style-type: circle;
        }
        .disc {
            list-style-type: disc;
        }
        .romeType {
            list-style-type: upper-roman;
        }
        .latin {
            list-style-type: lower-latin;
        }