JSFiddle - React, Tailwind, and code Playground

by rzea

HTML

<div class="container flex">
    <ol>
        <li>
            <a href="#">
                <span>
                    Title here 
                    <small>Small decriptive text here</small>                    
                </span>
                <i class="icon-table"></i>
            </a>
        </li>
        <li><a href="#">Title here</a></li>
        <li><a href="#">Title here</a></li>
    </ol>
</div>
<div class="container floats">
    <ol>
        <li>
            <a href="#">
                <span>
                    Title here 
                    <small>Small decriptive text here</small>
                </span>
                <i class="icon-table"></i>
            </a>
        </li>
        <li><a href="#">Title here</a></li>
        <li><a href="#">Title here</a></li>
    </ol>
</div>

CSS

.container {  padding: 10px; margin-bottom: 20px; background: #eee; }
ol { display:flex; }
li { display:flex; width: 23%; margin-right: 5%; }
a { display: block; width: 100%; min-height: 100px; background: #333; color:white; padding: 3px; }
a span { display:flex; }

.flex {}

small { display: block; background:#999; }

/*Basic styling only*/
* { box-sizing: border-box; }
body { font-family: Arial; }

[class^="icon-"], 
[class*=" icon-"] { display:flex; justify-content:center; align-items:center; height:140px; }

[class^="icon-"]:before, 
[class*=" icon-"]:before { font:normal normal 100px 'icon-font'; speak:none; font-variant:normal; text-transform:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }