JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<ul class="dangling-menu">
<li><i class="fa fa-trophy fa-2x full-line"></i>l1</li>
<li><i class="fa fa-cogs fa-2x full-line"></i>l2</li>
<li><i class="fa fa-lightbulb-o fa-2x full-line"></i>l3</li>
<li><i class="fa fa-flask fa-2x full-line"></i>l4</li>
</ul>

CSS

.dangling-menu{
    text-align:center;
    border-bottom:1px #e8e8e8 solid;
}
.dangling-menu li{
    list-style-type:none;
    display: inline-block;
}
.full-line{
    display:block;
}
.fa {
    width:48px;
    height: 48px;
}
.fa-cogs {
    background-image: url("http://png-3.findicons.com/files/icons/2232/wireframe_mono/48/cog.png");
}
.fa-trophy {
    background-image: url("http://www.veryicon.com/icon/48/System/Pretty%20Office%207/Trophy%20gold.png");
}
.fa-lightbulb-o {
    background-image: url("http://img2.wikia.nocookie.net/__cb20080414070003/wowwiki/images/thumb/4/49/Icon-lightbulb.svg/48px-Icon-lightbulb.svg.png");
}
.fa-flask {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Conical_flask_purple.svg/48px-Conical_flask_purple.svg.png");
}