JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://fonts.googleapis.com/css2?family=Lato&family=Pacifico&display=swap" rel="stylesheet">

<h1>
  Cake baking instructions
</h1>

<ol>
  <li>I think you do something with dry ingredients</li>
  <li>The mixers play a role here</li>
  <li>Combine everything while crossing fingers</li>
  <li>Transfer to oven</li>
  <li>Poke with toothpick for fun, and then serve</li>
</ol>

CSS

ol {
  /* Give our counter a name, any name will do */  
  counter-reset: ordered-list;
}

ol li {
  /* Indicate that we should increment the count
     for every list item */
  counter-increment: counts;
  list-style: none;
}

ol li:before {
  /* Use the count in the :before pseudoelement */
  content: counter(counts) '. ';
  display: inline-block;
  color: deeppink;
  font-family: 'Pacifico', cursive;
  width: 32px;
}


/* Unrelated styles */
body {
  padding: 40px;
  font-family: lato, sans-serif;
}

ol {
  padding-left: 12px;
  font-size: 22px;
}

h1 {
  font-size: 36px;
}