JSFiddle - React, Tailwind, and code Playground

HTML

<ol id='doc'>
            <li>Test1
            <p>
            Test1-Detials
            </p>

                <ol>
                    <li>Test1.1
                        <p>
                        Test1.1-Detials
                        </p>
                    </li>

                    <li>Test1.2 (Displays as 1.1)
                        <p>
                        Test1.2-Detials
                        </p>
                    </li>
                </ol>
            </li>


            <li>Test2
            <p>
            Test2-Detials
            </p>

                    <ol>
                    <li>Test2.1
                        <p>
                        Test2.1-Details
                        </p>
                    </li>

                    <li>Test2.2 (Displays as 2.1)
                        <p>
                        Test2.2-Details
                        </p>
                    </li>
                </ol>
            </li>
        </ol>

CSS

ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item; text-decoration: underline; color: blue; font-size: 20px;}