JSFiddle - React, Tailwind, and code Playground

by alexcuria

HTML

<ol>
    <li>Gather ingredients</li>
    <li>Mix ingredients together</li>
    <li>Place ingredients in a baking dish</li>
</ol>

<ol>
    <li>Bake in oven for an hour</li>
    <li>Remove from oven</li>
    <li>Allow to stand for ten minutes</li>
    <li>Serve</li>
</ol>

CSS

ol { counter-reset: list-order; }

        ol:nth-of-type(2) { counter-reset: list-order 3; }
        
        ol li { 
            counter-increment: list-order;
            list-style-type: none;
        }

        ol li:before { content: counter(list-order) ". "; }
		

		body { 
		    font-size: 12px; 
		    margin: 4em; 	
		    max-width: 45em; 
		    line-height: 1.3em;
		}
		
	    h1 {
			font-size: 1.333em;
			line-height: 1.125em;
			margin: 0 0 1.125em 0;		
		}