JSFiddle - React, Tailwind, and code Playground

by JuanMa

HTML

<ul>
    <li><a href="#">Categoria 1</a></li>
    <li><a href="#">Categoria 2</a></li>
    <li><a href="#">Categoria 3</a></li>
    <li><a href="#">Categoria 4</a></li>
    <li><a href="#">Categoria 5</a></li>
    <li><a href="#">Categoria 6</a></li>
    <li><a href="#">Categoria 7</a></li>
    <li><a href="#">Categoria 8</a></li>
</ul>

CSS

ul{
    width: 300px;
    text-align:center;
    list-style-type:none;
}
li{
    background: #444;
    float: left;
    width: 38%;
    margin:6px;
    padding:3px 10px;
    border: 1px solid #000;
    border-radius: 3px;
    box-shadow: 1px 1px 0 #000;
}
li a{
    color:#fff;
    text-decoration: none;
    font: italic bold 14px Georgia;
}
li:hover{
    background: #666;
    box-shadow: -1px -1px 0 #000;
}
li:hover a{
    color: orange;
}