JSFiddle - React, Tailwind, and code Playground

by kidino

HTML

<p>credit to http://jsbin.com/ovuru3 -- just needed it in jsfiddle</p>
<h1>Outline</h1>
<ol>
  <li>Item</li>
  <li>Item
    <ol>
      <li>Item</li>
      <li>Item
        <ol>
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et diam sem. Pellentesque vitae dolor id eros commodo dapibus tristique sit amet eros. Pellentesque turpis turpis</li>
          <li>Item</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nunc et diam sem.   Pellentesque vitae dolor id eros commodo 
    dapibus tristique sit amet eros. Pellentesque turpis turpis.</li>
</ol>

CSS

ol {
    width: 90%;
counter-reset: item;
list-style-position: outside;
}
li {
    position: relative;
    left: 2em;
display: block;
list-style-position: outside;
    margin-top: 0.5em;
}
li:before {
content: counters(item, ".") ".";
counter-increment: item;
    position: absolute;
    left: -2.5em;
    display: block;
    width: 2em;
    text-align: right;
}
  
  li li:before {
    left: -2.5em;
  }
  
  li li li:before {
    left: -3em;
  }