JSFiddle - React, Tailwind, and code Playground

HTML

<!--Nav Bar-->
    <nav class="navbar navbar-default hidden-md hidden-lg hidden-md hidden-lg" role="navigation" >
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
          <ul class="nav navbar-nav">
              <li class="dropdown hamburgerListLine">
                <i class="glyphicon glyphicon-plus glyphiconIcon pull-right"></i>
                <a href="#" data-toggle="dropdown" class="dropdown-toggle">Glass Containers</a>
                  <ul class="dropdown-menu">
                      <li class="dropDownList"><a href="#">Glass Bottles</a></li>
                      <li class="dropDownList"><a href="#">Glass Jars</a></li>
                      <li class="dropDownList"><a href="#">Glass Jugs</a></li>
                      <li class="dropDownList"><a href="#">Glass Vials</a></li>
                  </ul>
              </li>
              <li class="dropdown hamburgerListLine">
                <span class="glyphicon glyphicon-plus glyphiconIcon pull-right "></span>
                <a href="#" data-toggle="dropdown" class="dropdown-toggle">Plastic Containers</a>
                  <ul class="dropdown-menu">
                      <li class="dropDownList"><a href="#">Plastic Bottles</a></li>
                      <li class="dropDownList"><a href="#">Plastic Jars</a></li>
                      <li class="dropDownList"><a href="#">Plastic Jugs</a></li>
                      <li class="dropDownList"><a href="#">Plastic Vials</a></li>
                      <li class="dropDownList"><a href="#">Plastic Tubes</a></li>
                  </ul>
              </li>
    ...

CSS

.mydiv{
	background-color:#F5F4F0;
	height:30px;
	padding-top:5px;
}

.greyColor{
	background-color:#F5F4F0;
	
}

.paragraphBreak{
	margin-top:15px;
}

.leftBorder{
	border-right: 1px solid #CCC;
	padding-right:5px;
}


.mydiv2{
	background-color:#F5F4F0;
}

.mydiv1{
	
	width:100%;
	height:200px;
	background-size: cover;
 	background-image: url("../images/623x280_SpiceJars.jpg");
}

.searchBar{
    margin-top:15px;
}

.featuredItems{
	padding:5px;
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	margin-top:10px;
	margin-bottom:20px;

}

.boxs{
	width:100%;
	height:100px;
	background-color:grey;
	margin-bottom:10px;
}

.footerContainer{
	background-color:#F5F4F0;
	height:100px;
	margin-bottom:10px;
    font-size:10px;
    font-family: Arial,Helvetica,sans-serif;


}
.footerContainer > p{
    font-size:12px;
    font-family: Arial,Helvetica,sans-serif;
}

.footerContainer a{
    color:black;
    text-decoration: underline;
}

.footerContainer a:link {
    text-decoration: underline;
}

.footerBottom{
	background-color:#BDBAAF;
	font-family: Arial,Helvetica,sans-serif;
	font-size:11px;
	padding-top:10px;
    line-height: 140%;
    color: #000;
    height:auto;
    margin-top:20px;
    width:70%;
    text-align: center;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:10px;
}

.productbox{
	height:220px;
	margin-bottom:30px;
    border: 1px solid #DDDBCE;
    z-index: 1;
    border-radius: 10px;
    background: none repeat scroll 0% 0% #FFF;
    padding:5px;
}

.wheelNavBar{
   
    margin-top:15px;
}

.wheelNavBar li{
	display:inline !important;
	margin-left:20px;
}

.wheelBox{
	margin-top:20px;
	text-align: center;
}
.wheel{
	display:inline;
	margin-left:20px;
}
.hamburgerList{
	background-color:white;
}
.hamburgerListLine{
	border-bottom:1px solid #E7E7E7;
}
.hamburgerListFlat{
    border-top:1px solid #E7E7E7;
}
.glyphiconIcon{
    margin-top:10px;
    margin-right:10px;
    color:#AAA;
}
.glyphiconIcon2{
    margin-top:10px;
   ...