JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<div data-role="page"> 
    <div data-role="content">
        <div data-role="footer" class="nav-glyphish-example"> 
            <div data-role="navbar" class="nav-glyphish-example" data-grid="d"> 
            <ul> 
                <li><a href="#" id="chat" data-icon="custom">Chat</a></li> 
                <li><a href="#" id="email" data-icon="custom">Email</a></li> 
                <li><a href="#" id="skull" data-icon="custom">Danger</a></li> 
                <li><a href="#" id="beer" data-icon="custom">Beer</a></li> 
                <li><a href="#" id="coffee" data-icon="custom">Coffee</a></li> 
            </ul> 
            </div> 
        </div>
        <br />
        <div data-role="footer"> 
            <div data-role="controlgroup" data-type="horizontal"> 
                <ul> 
                    <li>
                        <a href="#" data-role="button" id="chat" data-icon="custom">Chat</a> 
                        <a href="#" data-role="button" id="email" data-icon="custom">Email</a> 
                        <a href="#" data-role="button" id="skull" data-icon="custom">Danger</a>
                        <a href="#" data-role="button" id="beer" data-icon="custom">Beer</a>
                        <a href="#" data-role="button" id="coffee" data-icon="custom">Coffee</a>
                        
                        <a href="#" data-role="button" id="arrow-up" data-icon="arrow-u">Up</a> 
                        <a href="#" data-role="button" id="arrow-down" data-icon="arrow-d">Down</a> 
                        
                    </li>
                </ul> 
            </div>
        </div>
    </div>
</div>

CSS

.nav-glyphish-example .ui-btn .ui-btn-inner { 
    padding-top: 40px !important; 
}
.nav-glyphish-example .ui-btn .ui-icon { 
    width: 30px!important; 
    height: 30px!important; 
    margin-left: -15px !important; 
    box-shadow: none!important; 
    -moz-box-shadow: none!important; 
    -webkit-box-shadow: none!important; 
    -webkit-border-radius: none !important; 
    border-radius: none !important; 
}
#chat .ui-icon { 
    background:  url(http://jquerymobile.com/demos/1.0a4.1/docs/toolbars/glyphish-icons/09-chat2.png) 50% 50% no-repeat; background-size: 24px 22px; 
}
#email .ui-icon { 
    background:  url(http://jquerymobile.com/demos/1.0a4.1/docs/toolbars/glyphish-icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px;  
}
#login .ui-icon { 
    background:  url(http://jquerymobile.com/demos/1.0a4.1/docs/toolbars/glyphish-icons/30-key.png) 50% 50% no-repeat;  background-size: 12px 26px; 
}
#beer .ui-icon { 
    background:  url(http://jquerymobile.com/demos/1.0a4.1/docs/toolbars/glyphish-icons/88-beermug.png) 50% 50% no-repeat;  background-size: 22px 27px; 
}
#coffee .ui-icon { 
    background:  url(http://jquerymobile.com/demos/1.0a4.1/docs/toolbars/glyphish-icons/100-coffee.png) 50% 50% no-repeat;  background-size: 20px 24px; 
}
#skull .ui-icon { 
    background:  url(http://jquerymobile.com/demos/1.0a4.1/docs/toolbars/glyphish-icons/21-skull.png) 50% 50% no-repeat;  background-size: 22px 24px; 
}