JSFiddle - React, Tailwind, and code Playground

by Chris

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<body>
    
<div data-role="page">

	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->

	<div role="main" class="ui-content">
		<p>Page content goes here.</p>

        <i class="fa fa-camera-retro" ></i>
        
        <a href="#" class="ui-btn ui-corner-all ui-mini ui-btn-inline ui-icon-nodisc ui-btn-icon-notext ui-icon-footer-cart fa fa-camera-retro" style="text-indent: 0px;"></a>
      
        <a href="#" class="ui-btn ui-corner-all ui-mini ui-btn-inline ui-icon-nodisc ui-btn-icon-notext ui-icon-grid" ></a>
        
<a href="#" class="ui-btn ui-corner-all ui-mini ui-btn-inline ui-icon-nodisc ui-btn-icon-notext" style="text-indent: 0px;"><i class="fa fa-cog" style="margin-top: 5px;"></i></a>
        
        
<a href="#" class="ui-btn ui-corner-all ui-mini ui-btn-inline ui-icon-nodisc ui-btn-icon-notext ui-btn-fa"><i class="fa fa-cog fa-btn"></i></a>
        
        <a href="#" class="ui-btn ui-btn-b ui-corner-all ui-mini ui-btn-inline ui-icon-nodisc ui-btn-icon-notext ui-btn-fa"><i class="fa fa-cog fa-btn"></i></a>


        
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>

CSS

.ui-btn-fa {
    text-indent: 0;   
}

.fa-btn {
    color: white !important;   
    margin-top: 5px;
}