JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <h2>Inline-block</h2>
    <a href="#" class="i-b-item">I-B Item 1</a>
    <a href="#" class="i-b-item">I-B Item 2</a>
    <a href="#" class="i-b-item">I-B Item 3</a>
    <a href="#" class="i-b-item">I-B Item 4</a>
    <a href="#" class="i-b-item">I-B Item 5</a>
    <a href="#" class="i-b-item">I-B Item 6</a>
    <a href="#" class="i-b-item">I-B Item 7</a>
    <a href="#" class="i-b-item">I-B Item 8</a>
    <h2>Floated</h2>
    <a href="#" class="f-item">Float Item 1</a>
    <a href="#" class="f-item">Float Item 2</a>
    <a href="#" class="f-item">Float Item 3</a>
    <a href="#" class="f-item">Float Item 4</a>
    <a href="#" class="f-item">Float Item 5</a>
    <a href="#" class="f-item">Float Item 6</a>
    <a href="#" class="f-item">Float Item 7</a>
    <a href="#" class="f-item">Float Item 8</a>
    <div style="clear:both"></div>
</div>

CSS

body{
    font-family: Helvetica, Arial;

}

.content{
    background:grey;
    padding:.5em;
}

.content h2{
    color:white;
    margin:.5em;
}

.content a{
    color:black;
    text-decoration:none;
    padding:.5em;
    margin: .5em;
    text-align:center;
    height:75px;
    width:150px;
    background: white;
}

.i-b-item{
    display:inline-block;
}

.f-item{
    float:left;
    display:block;
}