JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="header_content">
   <div class="row">
      <div class="col-md-3 col-sm-3">
         <div class="row">
            <div class="logo">
               <a href="#"><img src="https://upload.wikimedia.org/wikipedia/en/b/bd/Random_App_Logo.png" alt=""></a>
               <div class="navbar-header rowl">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                  <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>
         </div>
      </div>
      <div class="col-md-9 col-sm-9 nav_area">
         <nav class="main_menu navbar-collapse collapse">
            <ul id="menu-main-menu" class="nav navbar-nav navbar-right">
               <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-25 current_page_item menu-item-92 active"><a title="Welcome" href="http://imagerylab.pixiumdigital.com/">myLongerLongTitle</a></li>
               <li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-107 dropdown">
                  <a title="Researches" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">myLongTitle <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-menu">
                     <li id="menu-item-129" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-129"><a title="myTitle" href="#">myTitle</a></li>
                     <li id="menu-item-130" class="menu-item...

CSS

//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
.header_content {
    background: #fff;
    border-bottom: 3px solid #e4e4e4;
    font-family: 'Libre Baskerville', serif;
    position: relative;
    z-index: 9;
    margin-top: 5%;
}
.logo{
  padding-left: 30px;
}
.logo a img {
    min-width: 200px !important;
    padding: 0;
    max-width: 100%;
}
.nav_area {
    padding-right: 88px;
}
li{
  background-color:#c0c0c0;
  border: solid thin white;
}
#menu-main-menu{
	 list-style: none;
	 width: 100%;
	 margin: 0;
	 padding: 0;
	 white-space: nowrap;
	 overflow: visible !important;
}
#menu-main-menu > li{
	display: inline-block;
	 width: 17%;
	 height: 100%;
	 padding: 0;
}
#menu-main-menu > li > a{
	font-size: 100% !important;
}