JSFiddle - React, Tailwind, and code Playground

by zerrax

HTML

<nav>
  <ul>
  <li><a>Home</a></li>
  <li><a>Config</a></li>
  <li><a>Logout</a></li>
  </ul>
</nav>
<ul class="list">
  <li>
    <a>items #1</a>
    <a>Profie : </a>
    <a class=""><input type="text"></a>
    <a class="inp">X</a>
  </li>
  <li>
    <a>items #2</a>
    <a>Profie : </a>
    <a class=""><input type="text"></a>
    <a class="inp">X</a>
  </li>
  <li>
    <a>items #3</a>
    <a>Profie : </a>
    <a class=""><input type="text"></a>
    <a class="inp">X</a>
  </li>
</ul>
<div>
  <h3>
  History
  </h3>
  <ul class="lists">
    <li>items #1</li>
    <li>items #2</li>
    <li>items #3</li>
  </ul>
</div>
  <h3></h3>

CSS

body{padding:0;margin:0;background:#1f2533;}
nav{
   background:#1f2533;
}
nav ul{
  width:100%;
  list-style:none;
  padding:0;
  margin:0;
  background:#1f2533;
  text-align:center;
    display: grid;
  grid-template-columns:auto auto auto;
  grid-gap: 10px;
  padding-top:10px;
  padding-bottom:10px;
  background: rgba(0,0,0,0.35);
  color:#ddd;
}
nav ul li{
  cursor:pointer;
}
nav ul li a:hover{
  color:#fff
}
ul.list{
  width:100%;
  list-style:none;
  padding:0;
  margin:0;
  background:#1f2533;
  text-align:center;
  max-height:450px;
}
ul.list li{
  display: grid;
  grid-template-columns:auto auto auto auto;
  grid-gap: 10px;
}
ul.list li a{
  padding:15px;
   text-decoration: none; 
   color:#eee;
   font-size:18px;
}
ul.list li a input{
  background: rgba(0,0,0,0.3);
  border: 1px solid #666;
  font-size:16px;
  color:#eee;
  text-align:center
}
.inp{cursor:pointer;}
.inp:hover{color:#999}
ul.lists{
  width:100%;
  list-style:none;
  padding:0;
  margin:0;
  background:#1f2533;
  text-align:center;
  max-height:450px;
}
ul.lists li{
  color: #ddd;
}
h3{text-align:center;color:#fff;border-top:3px solid rgba(0,0,0,0.3);padding-top:10px;margin-bottom:10px;}