JSFiddle - React, Tailwind, and code Playground

by anatomic

HTML

<section class="taxonomy-overview">
    <header>
        <h1>See posts by taxonomy</h1>
    </header>
    <ul>
        <li>
            <h2>Taxonomy Name (1)</h2>
            <p>lorem</p>
        </li>
        <li>
            <h2>Taxonomy Name (1)</h2>
            <p>lorem</p>
        </li>
        <li>
            <h2>Taxonomy Name (1)</h2>
            <p>lorem</p>
        </li>
        <li>
            <h2>Taxonomy Name (1)</h2>
            <p>lorem</p>
        </li>
        <li>
            <h2>Taxonomy Name (1)</h2>
            <p>lorem</p>
        </li>
        <li>
            <h2>Taxonomy Name (1)</h2>
            <p>lorem</p>
        </li>
    </ul>
</section>

CSS

.taxonomy-overview{
    font-family:Helvetica, Arial, sans-serif;
    font-size:0.75em;
    width:560px; /*total width including padding is 560px*/
    background:#ebebeb;
    padding-top:20px;
}
.taxonomy-overview h2,
.taxonomy-overview h1{
    font-family:Helvetica, Arial, sans-serif;
    color:#36638C;
}
.taxonomy-overview h1{   
    font-size:1.3333333em;
    margin-left:20px;
    margin-top:0;
}
.taxonomy-overview h2{
    font-weight:bold;
    font-size:1em;
    margin-top:0;
}

/* ----- List Styles ----- */

.taxonomy-overview ul{
    list-style:none;
    margin:0;
    padding:0;
    width:540px;
}

.taxonomy-overview:after{
    content:'';
    height:1px;
    clear:both;
    display:block;
}

.taxonomy-overview li{
    margin:0 0 20px 20px;
    padding:14px 20px 18px 20px;
    background:#f1f1f1;
    display:block;
    float:left;
    width:120px; /*total contained width: 160px, total with margin: 180px;*/
    -webkit-transition:all 0.2s ease-in-out;
}

.taxonomy-overview li:hover{
    background:#fff;
    -webkit-box-shadow:0 0 4px rgba(0,0,0,0.125);