JSFiddle - React, Tailwind, and code Playground

by fatfantasma

HTML

<br>   
<br>   
<div class="mp-myheader">
            <div class="mp-center-wrapper">
                <i class="mp-icon-hamburger mp-icon-xsm mp-float-left"></i>
                <i class="mp-icon-hamburger mp-icon-xsm"></i>
                <i class="mp-icon-hamburger mp-icon-xsm mp-float-right"></i>
            </div>
        </div>

<br>

        <div class="mp-myheader">
            <div class="mp-center-wrapper">
                <i class="mp-icon-hamburger mp-icon-xsm"></i>
                <i class="mp-icon-hamburger mp-icon-xsm mp-float-right"></i>
            </div>
        </div>

CSS

.mp-center-wrapper{
  text-align: center;
}

.mp-myheader {
    background: #015688 !important;
    width:100%
}

.mp-icon-hamburger {
	background-image: url("http://icons.iconarchive.com/icons/klukeart/summer/128/hamburger-icon.png");
    background-position:center;
    background-repeat:no-repeat;
}

.mp-icon-xsm {
    width: 25px;
    height:25px;
    background-size: 25px;
    display:inline-block;
}

.mp-float-left {
    float:left;
}

.mp-float-right {
    float:right;
}