JSFiddle - React, Tailwind, and code Playground

by KURO KUMO

HTML

<ul class="mobile-header visible-phone visible-tablet">
  <li> 
    <!-- Start Dropmenu for mobile -->
    <select class="dropmenu" name="dropmenu" onChange="moveTo(this.value)">
      <option value="#intro" selected="selected">Welcome</option>
      <option value="#services">Services</option>
      <option value="#about">About Us</option>
      <option value="#recruit">Recruit</option>
      <option value="#mission">Our Mission</option>
    </select>
    <!-- End Dropmenu for mobile --> 
  </li>
</ul>

CSS

/*Navigation and Responsive Menu*/
.mobile-header {
	margin: 0px;
	padding: 0px;
	list-style: none;
	width: 100%;
	position: fixed;
	height: 60px;
	text-align: center;
	z-index: 100 !important;
	background-color: #794423;
	background-repeat: repeat;
	background-image: url(http://il05.heteml.jp/ipoca/ipoca_0827//images/tip_texture.jpg);
}
.dropmenu {
	height: 40px;
	width:80%;
	background-image: url(http://il05.heteml.jp/ipoca/ipoca_0827//images/tip_texture.jpg);
	color: white;
	margin: 10px 0;
	}
option {
	height: 40px;
	width:80%;
	background-image: url(http://il05.heteml.jp/ipoca/ipoca_0827//images/tip_texture.jpg);
	color: white;
	margin: 10px 0;
	}