JSFiddle - React, Tailwind, and code Playground

by Gabriel Rodrigues

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<div class="container">
		<div class="row">
			<div class="col-xs-6 imagem">
				<img src="imgs/logo.png" height="68" width="228">
			</div>
			<div class="col-xs-6 imagem1">
				<div class="iconInput">
					<i class="glyphicon glyphicon-search pull-right" style="margin-right: 15px"></i>
					<input type="text" name="" value="" class="form-control inpuT" placeholder="Pesquisar">
				</div>
			</div>
		</div>
		<div class="row">
			<nav class="navbar navbar-inverse" role="navigation">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mycollapse" style="float: right; height:32px; margin-top: 0px;">
						<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="mycollapse">
					<ul class="nav nav-pills">
						<li>
							<a href=""><i class="glyphicon glyphicon-home" aria-hidden="true" style="color: #FFF;"></i></a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle cor-letra" data-toggle="dropdown" role="button" aria-expanded="false">Calçados</a>
							<ul class="dropdown-menu" role="menu">
								<li class="dist"><a href="#" style="color: #FFF; margin-bottom: 6px; padding: 6px 15px;">WOMEN CLOTHING</a></li>
								<li><a href="#" style="color: #FFF; margin-bottom: 6px;  padding: 6px 15px;">MEN CLOTHING</a></li>
								<li><a href="#" style="color: #FFF; margin-bottom: 6px;  padding: 6px 15px">INFANT CLOTHING</a></li>
							</ul>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle cor-letra" data-toggle="dropdown" role="button" aria-expanded="false">Shorts</a>
							<ul...

CSS

@media screen and (min-width: 767px) {
.container{margin-top: 20px; max-width:1002px;}
body{background: url("imgs/fundo.png");}
.imagem{margin-top: 73px;}
.imagem1{margin-top: 110px; }
.inpuT{width: 300px; float: right;}
.iconInput { position: relative }
.iconInput i { position: relative; margin-left: -30px; margin-top: 10px;}



.navbar{background: #000000; margin-top: 15px;border-radius: 0px 0px 0px 0px; min-height: 0px; max-height: 34px;}
.cor-letra{color: #FFF; font-family: "Open Sans",arial,sans-serif;}
.nav-pills>li>a:hover{background: #F71277;border-radius: 0px 0px 0px 0px; color: #FFF; -webkit-transition-duration:.30s; height: 32px;}
.dropdown-menu{background: #000000; opacity:0.69; width: 200px;}
.dropdown-menu>li>a:hover{background: #FF0066; -webkit-transition-duration:.20s;}
.nav-pills>li>a{padding:7px 10px 5px 10px;}


/* ---------------  Menu Dropdown(Bootstrap) automatico --------------- */

.dropdown-menu li:hover .sub-menu {visibility: visible;}
.dropdown:hover .dropdown-menu {display: block;}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {margin-top: -0px;}


/* ------------------------------------------------------------------------------- */

}