JSFiddle - React, Tailwind, and code Playground

by maganthro

HTML

<h2>
  Pancake Recipe
</h2>
<h3>
  Ingredients
</h3>
<ul style="list-style-position: inside;">
  <li style="border: solid blue 3px;">100g flour</li>
  <li>2 eggs</li>
  <li>300ml milk</li>
</ul>

<h3>
  Method
</h3>
<ol>
  <li>Mix ingredients</li>
  <li style="border: solid red 1px;">Heat pan</li>
  <li>Pour mix into pan</li>
  <li>Cook 1 minute on each side</li>
  <li>Serve</li>
</ol>

CSS

li {
  border: solid red 1px;
}

ul {
  list-style-type: square;
}

ol {
  list-style-type: upper-roman;
}