JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<ul class="category">
    <li><a href="#">m1 m1 m1 m1 m1 m1 m1 m1 m1 m1</a></li>
    <li><a href="#" class="on">m2</a></li>
    <li><a href="#">m3</a></li>
    <li><a href="#">m4</a></li>
    <li><a href="#">m5</a></li>
    <li><a href="#">m6</a></li>
</ul>

CSS

ul, li {
    padding:0;
    margin:0;
    list-style-type: none;
}
ul.category {
    width:300px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
ul.category li {
    display: -webkit-flex;
    display: flex;
    width:100px;
    
}
ul.category li a {
    font-size: 12px;
    color: #fff;
    background: #5aada2;
    text-decoration: none;
    text-align: center;
    height: 100px;
    padding:5px;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 1;
    flex: 1;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
ul.category li a:hover, ul.category li a.on {
    background: #38776a;
}