JSFiddle - React, Tailwind, and code Playground

by Aakash Khapare M

HTML

<div id="header">
  /*some coding*/
</div>

<div id="menu">
  <ul>
    <li>
      <!--some coding -->
    </li>
  </ul>
</div>

CSS

body{
    margin: 0;
}
#header {
  list-style-type: none;
  float: left;
  width: 100%;
  background-color: #FF0000;
  margin-top: 0;
}
#menu ul {
  margin-top: 0;
  list-style-type: none;
  width: 100%; /*When this is relative or deleted, the menu becomes too short*/
  float: left;
  background-color: #0c0c0c;
}
#menu ul li {
  position: relative;
  float: left;
  text-align: center;
  padding: 10px 10px 10px 10px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}