JSFiddle - React, Tailwind, and code Playground

by Arnold Daniels

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div id="side-panel-140" style="margin-left:-15px;" >
    <ul class="nav nav-tabs nav-stacked icon-only-xs">
        <li><a href="#"><i class="fa fa-user fa-lg fa-fw"></i> Contact Info</a></li>
        <li><a href="#"><i class="fa fa-credit-card fa-lg fa-fw"></i> Voter Info</a></li>
        <li><a href="#"><i class="fa fa-edit fa-lg fa-fw"></i> Notes</a></li>
        <li><a href="#"><i class="fa fa-group fa-lg fa-fw"></i> Groups</a></li>
        <li><a href="#"><i class="fa fa-rss fa-lg fa-fw"></i> Outreach</a></li>
        <li class="active"><a href="#"><i class="fa fa-heart fa-lg fa-fw"></i> Volunteer</a></li>
        <li><a href="#"><i class="fa fa-money fa-lg fa-fw"></i> Prospect</a></li>
        <li><a href="#"><i class="fa fa-dollar fa-lg fa-fw"></i> Donations</a></li>
        <li><a href="#"><i class="fa fa-dollar fa-lg fa-fw"></i> Expenses</a></li>
    </ul>
</div>

CSS

@media(max-width: 768px) {
    .icon-only-xs a .fa {
        float: left;
        text-indent: 0;
        margin-top: 4px;
    }
    .icon-only-xs a {
        text-indent: -10000px;
    }
}