JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
	<!-- Cadastro e Login  Menu -->
	<header id="header" class="header">
    	<div class="cadastroMenu">
        	<ul>
            	<a href="#"><img class="headerLogo" alt="Logo" src="img/logo.png" ></a>
                <li><a href="#">Cadastrar</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </div>
    <!-- ----------------------------------------------------------------------->
    <!-- Menu Principal -->
    <nav class="nav" id="nav"><span class="menuMobile" id="menuMobile" onClick="MenuMobile()">&#9776</span>
      <ul id="navulfirst">
        <li><a href="#"><img class="lupa" alt="Pesquisar" src="img/lupa.png" ></a>
          <div id="caixaPesquisa">
            <form id="formPesquisa" action="" method="post">
              <input id="pesquisa" type="text" value="" maxlength="150" placeholder="Pesquisar...">
            </form>
          </div>
        </li>
        <li><a href="#">Página Inicial</a></li>
        <li><a href="#">Produtos<img class="flechaVertical" alt="Flecha" src="img/flecha.png"></a>
          <ul>
            <li><a href="#">Brinquedos</a></li>
            <li><a href="#">Casamento</a></li>
            <li><a href="#">Decoração</a></li>
            <li><a href="#">Festa</a></li>
            <li><a href="#">Lembrancinhas</a></li>
          </ul>
        </li>
        <li><a href="#"><img id="navLogo" class="navLogo" alt="Versatyll" src="img/logotipo.png"></a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Contatos</a></li>
        <li><a href="#">Dúvidas</a></li>
      </ul>
    </nav>
    </header>
</div>
<!-- Main content -->
<main>
	<!-- Slider main container -->
	<div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide" style="background-image:url(imagesprodutos/enfeitedeporta.jpg)"></div>
            <div class="swiper-slide"...

CSS

body{
	width:100%;
	height:auto;
	margin:0;
	padding:0;
	border:0;
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	font-size:18px;
	background-color:#601516;
	overflow-y:scroll;
	overflow-x:hidden;
}

#container{
	width:100%;
	height:auto;
	margin:0;
	padding:0;	
	z-index:500;
}

/* Header */
.header{
	width:100%;
	height:auto;
	position:fixed;
	z-index:500;
	overflow:hidden;
	margin:0;
	padding:0;
}
/* ----------------------------------------------------------------------------*/

/* Cadastro Menu */
.cadastroMenu{
	width:100%;
	height:auto;
	margin:0;
	text-align:right;
	background-color:#222;	
}

.headerLogo{
	width:70px;
	height:70px;
	float:left;
	display:inline-block;
	margin:8px;
	margin-left:20px;	
}
/* --------------------*/

.cadastroMenu ul{
	height:82px;
	list-style:none;
	padding:0;
	margin:0;
	position:relative;
}

.cadastroMenu ul li{
	display:inline-block;
}

.cadastroMenu ul li:hover{
	background-color:#333;	
}

.cadastroMenu ul li a,visited{
	color:#ccc;
	display:block;
	text-decoration:none;
	padding:30px;
	padding-right:50px;
	padding-left:50px;
	text-align:center;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
}

.cadastroMenu ul li a:hover{
	color:#ccc;
	text-decoration:none;	
}

/* Barra e Caixa Pesquisa */
#caixaPesquisa{
	padding-left:15px;
}

#pesquisa{
	width:160px;
	height:50px;
	margin-left:10px;
	display:none;
	position:absolute;
	text-align:center;
	border:1px solid #222222;	
}
/* ---------------------------*/
/* Navigation Menu */

.lupa{
	width:30px;
	height:30px;	
}

.flechaVertical{
	width:8px;
	height:8px;
	padding-left:8px;
	padding-top:8px;
	position:absolute;	
}

.menuMobile{
	display:none;	
}

.navLogo{
	width:160px;
	height:90px;	
}

.nav{
	width:100%;
	margin:0;
	text-align:left;
	background-color:#FFFFFF;
	position:fixed;
	z-index:500;
}

.nav ul{
	list-style:none;
	padding:0;
	margin:0;
	position:relative;
}

.nav ul...

JavaScript

$(document).ready(function(){
	"use strict";
	
	// Calling Functions
	
	ShowHide();
	MenuMobile();
	
	//Functions
	
	function ShowHide(){
		$(".lupa").click(function(){
			$("#pesquisa").css("display", "inline-block");	
		});
		
		$("#pesquisa").blur(function(){
			$(this).css("display", "none");	
		});
	}
	
	function MenuMobile(){
		$(".menuMobile").click(function(){
			$(".nav").toggleClass("visible");
			$(".menuMobile").toggleClass("visible");
		});
	}
	
}); // Close document.ready function