JSFiddle - React, Tailwind, and code Playground

by Ksenia Polyakova

HTML

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, ipsum obcaecati, minus id facere sed nesciunt harum! Dolorum nobis autem, quam pariatur expedita itaque commodi voluptate amet, ab rerum harum.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia veniam ut inventore, rerum, natus quasi. Officia recusandae facilis provident alias corporis error harum voluptate cum! Saepe sunt deleniti temporibus magnam!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum provident debitis deleniti minus illo sed in, eum aut enim, cum perspiciatis corporis eveniet accusantium necessitatibus qui mollitia totam ipsum ullam.</li>
</ol>

CSS

ol {
  counter-reset: section;
  list-style-type: none;
}

li {
  width: 300px;
  /* isplay: flex;
  flex-direction: column; */
  text-align: center;
  margin: 20px 0;
  padding: 10px;
}

li::before {
  counter-increment: section;
  content: counter(section);
  display: block;
  font-weight: bold;
  font-size: 32px;
}