JSFiddle - React, Tailwind, and code Playground

by Annett

HTML

<div class="wrapper">
  <ol>
    <li><a href="#">Aloe</a></li>
    <li><a href="#">Bergamot</a></li>
    <li><a href="#">Calendula</a></li>
    <li><a href="#">Damiana</a></li>
    <li><a href="#">Elderflower</a></li>
    <li><a href="#">Feverfew</a></li>
    <li><a href="#">Ginger</a></li>
    <li><a href="#">Hops</a></li>
    <li><a href="#">Iris</a></li>
    <li><a href="#">Juniper</a></li>
    <li><a href="#">Kava kava</a></li>
    <li><a href="#">Lavender</a></li>
    <li><a href="#">Marjoram</a></li>
    <li><a href="#">Nutmeg</a></li>
    <li><a href="#">Oregano</a></li>
    <li><a href="#">Pennyroyal</a></li>
    <li><a href="#">Aloe</a></li>
    <li><a href="#">Bergamot</a></li>
    <li><a href="#">Calendula</a></li>
    <li><a href="#">Damiana</a></li>
    <li><a href="#">Elderflower</a></li>
    <li><a href="#">Feverfew</a></li>
    <li><a href="#">Ginger</a></li>
    <li><a href="#">Hops</a></li>
    <li><a href="#">Iris</a></li>
    <li><a href="#">Juniper</a></li>
    <li><a href="#">Kava kava</a></li>
    <li><a href="#">Lavender</a></li>
    <li><a href="#">Marjoram</a></li>
    <li><a href="#">Nutmeg</a></li>
    <li><a href="#">Oregano</a></li>
    <li><a href="#">Pennyroyal</a></li>
    </ol>
  <br />
</div><!-- .wrapper -->

CSS

ol
{
  width: 100%;  /* room for 3 columns */
  background:hotpink;  
}
ol li
{
  float: left;
  margin-right:10px;
  background:red;  
  width: 7em;  /* accommodate the widest item */
}
/* stop the floating after the list */
br
{
  clear: left;
}
/* separate the list from what follows it */
div.wrapper
{
  margin-bottom: 1em;
}

/* anchor styling */
ol li a
{
  display: block;
  width: 7em;
  text-decoration: none;
}
ol li a:hover
{
  color: #FFF; /* white */
  background-color: #A52A2A; /* brown */
}