JSFiddle - React, Tailwind, and code Playground

by NicoO

HTML

<nav id="tiles">
        <ul>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
        </ul>
    </nav>

CSS

body {
  margin: 0px;
  padding: 0px;
}

*
{
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#tiles {
  background: #fff;
  overflow: hidden;
  border: 2px solid #185a2a;
}
#tiles ul {
  list-style: none;
  margin: 0px;
  padding: 0;
}
#tiles li {
  float: left;
  background: #ddd;
  margin: 0;
  padding: 0 0 4.273% 0;
  width: 4.273%;
  position: relative;
  border-top: 1px solid white;
  border-left: 1px solid white;
}

#tiles li a {
  position: absolute;
}