JSFiddle - React, Tailwind, and code Playground

by Sanjay Ingole

HTML

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<div style="float:left;width : 100%">

<div class="navmenu">    
<a href="#" title="Home" class="navlink"><i class="fa fa-home"></i>
     <br/>
     Home</a>
</div>

 <div class="navmenu">    
    <a href="#" title="Search" class="navlink"><i class="fa fa-search"></i>  
     <br/>
     Search</a>
 </div>

<div class="navmenu">    
<a href="#" title="Sign In"class="navlink"><i class="fa fa-user"></i>  <br/>
     Sign In</a>
</div>

    </div>

    <br/>
    <br/>
    
<div style="margin-top : 30px;
float:left; width : 100%">

<div class="navmenu">    
<a href="#" title="Home" class="navlink"><i class="fa fa-home fa-lg"></i></a>
</div>

 <div class="navmenu">    
    <a href="#" title="Search" class="navlink"><i class="fa fa-search fa-lg"></i> </a>
 </div>

<div class="navmenu">    
<a href="#" title="Sign In"class="navlink"><i class="fa fa-user fa-lg"></i></a>
</div>

    </div>

CSS

a {
   text-decoration : none;    
}

a:hover {
    color : blue;
}

.navmenu {
    float : left;    
    margin-left : 30px;
}

.navlink{
    margin-left : 10px;
}
}