JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<label for="show-menu" class="show-menu">Show Menu</label>
        <input type="checkbox" id="show-menu" role="button">
        <ul id="menu">
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
        </ul>
    <hr />

CSS

header ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: static;
    margin-bottom:2px;
}

header li {
    display:inline-block;
    float: left;
    margin-right: 1px;
}

ul li
{
  display:inline-block;
  padding-right:10%;
  background-color:gray;
  padding:10px;
}
ul li:hover
{
  background-color:blue;
  color:white;
}

ul li
{display:inline-block;}a
{
  text-decoration:none;
}