JSFiddle - React, Tailwind, and code Playground

by naokiota

HTML

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing ante sed purus egestas, vitae sodales velit eleifend. Nunc nec aliquet elit.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <ol>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing ante sed purus egestas, vitae sodales velit eleifend. Nunc nec aliquet elit.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      <ol>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing ante sed purus egestas, vitae sodales velit eleifend. Nunc nec aliquet elit.</li>
        <li>Lorem ipsum dolor sit amet.</li>
      </ol>
      </li>
    </ol> 
    </li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing ante sed purus egestas, vitae sodales velit eleifend..</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing ante sed purus egestas, vitae sodales velit eleifend. Nunc nec aliquet elit.</li>
    <li>Lorem ipsum dolor sit amet.</li>
</ol>

CSS

ol { 
  counter-reset: level-1; 
  list-style: none; 
  padding-left: 0;
} 
ol li{
    display: list-item;
text-align: -webkit-match-parent;
}
ol li:before { 
  counter-increment: level-1; 
  content: counter(level-1) '. ';
} 


ol ol { 
  counter-reset: level-2; 
  padding-left: 15px;
}
ol ol li:before { 
  counter-increment: level-2; 
  content: counter(level-1) '.' counter(level-2) '. ';
}


ol ol ol { 
  counter-reset: level-3; 
  padding-left: 30px;
} 
ol ol ol li:before { 
  counter-increment: level-3; 
  content: counter(level-1) '.' counter(level-2) '.' counter(level-3) '. '; 
} 

ol {
    display: table;
}

ol > li {
    display: table-row;
}

ol > li::before {
    display: table-cell;
}