JSFiddle - React, Tailwind, and code Playground

by omarjuvera

HTML

<h1>Table-cell navigation bar</h1>
<nav>
<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>
</nav>

CSS

nav {display:table; background:yellow}
ul {display:table-row; }
li {display:table-cell; border:1px solid red; padding: 40px 0px;}
a {padding: 40px;}