JSFiddle - React, Tailwind, and code Playground

by Mawel Don

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="miniMenu">
    <div class="row">
        <ul>
            <li id="miniLogo">
                <img alt="Logo AgencedeVoyage.com" src="http://dev.agencedevoyage.com/images/logo/logoHead.png"/>
            </li>
        </ul>
    </div>
    <div class="tableRow">
        <ul>
            <li>
                <div class="col-xs-4" id="subMiniMenu">
                    <i class="fa fa-bars"></i>
                </div>
            </li>
            <li>
                <div class="col-xs-4" id="miniSearch">
                    <i class="fa fa-search-plus"></i>
                </div>
            </li> 
            <li>
                <div class="col-xs-4" id="miniContact">
                    <i class="fa fa-envelope"></i>
                </div>
            </li>
        </ul>
    </div>
    <!-- Hidden content -->
    <div id="subMiniMenu1">
    </div>
    <div id="miniSearch1">
        <form>
            <input type="text"/>
            <button>RECHERCHER</button>
        </form>
    </div>
</div>

CSS

#miniMenu{
    width: 100%;
    display:table;
    border-collapse:separate;
    border-spacing:2px;
    border-color:black;
}

#miniLogo img{
    display: block;
    margin-left: auto;
    margin-right: auto
}

.miniMenu{
    display:table-row;
}

#miniMenu .col-xs-4{
    display:table-cell;    
    border-right:1px solid #a5a5a5;
    border-left:1px solid #a5a5a5;
    text-align:center;
}

#subMiniMenu{
    color:#45aede;
    border-left:0px !important;
}
#miniContact{
    border-right:0px !important;
}

ul{
    list-style:none;
    font-size:40px;
    color:#ea6414;
}

#subMiniMenu1, #miniSearch1{
    display:none;
}