JSFiddle - React, Tailwind, and code Playground

by kolxoznik1

HTML

<div id="header">
        
            <div class="navigation_menu_block">
            
                <div class="search_block">
                    <div class="content">
                        <div class="search_icon">Search</div>
                        <div><input type="text" name=""/></div>
                        <div class="close">X</div>
                    </div>
                </div>
                <div class="menu_bg_line">
                    <div class="content">
                        <ul class="left">
                            <li><a href="#">somos</a></li>
                            <li><a href="#">somos</a></li>
                            <li><a href="#">somos</a></li>
                        </ul>
                        <a class="logo"><span class="slogan">logo</span></a>
                        <ul class="right">
                            <li><a href="#">somos</a></li>
                            <li><a href="#">somos</a></li>
                            <li><a href="#">somos</a></li>
                            <li class="search" id="search">
                                &nbsp;
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        
            <div class="logo_show">
                <div class="content">
                    <img src="assets/img/header_logo.png" alt="">
                    <span>Menu</span>
                </div>             
            </div>
            
         
    </div>

CSS

@import url('reset.css');

.content {
    margin: 0 auto;
    text-align: center;
    width: 1030px;
    border: 0 none;
}
#header {
    margin: 0 auto;
    width: 100%;
    border: 0px solid black;
}
#header .logo_show {
    position: fixed;
    width: 100%;
    height: 140px;
    border: 0 none;
}
#header .logo_show span {
    display:  block;
    border-radius: 10px;
    background: #000000 repeat-x;
    color: #FFFFFF;
    font-size: 10px;
    text-transform: uppercase;
    padding: 3px 0;
    margin: 10px 430px 0;
    letter-spacing: 1px;
}
#header .navigation_menu_block {
    height: 140px; 
    text-align: center;
    display: none;
    border: 0 none;
    position: relative;
}
#header .navigation_menu_block .search_block {
    background: #FFFFFF;
    height: 62px;
    position: absolute;
    width: 100%;
    text-align: left;
    display: none;
    border: 0 none;
}
#header .navigation_menu_block .search_block .search_icon {
    background: url('../img/sprite_general.png') no-repeat scroll 0 0;
    float: left;
    display: block;
    width: 68px;
    height: 40px;
    text-indent: -9999px;
    border: 0 none;
    margin-top: 10px;
}
#header .navigation_menu_block .search_block input[type="text"] {
    float: left;
    height: 62px;
    width: 850px;
    border: 0 none;
    color: #000000;
    font-size: 38px;
    outline: 0 none;
    overflow: hidden;
    text-transform: lowercase;
    margin-left: 10px;
}
#header .navigation_menu_block .search_block .close {
    float: right;
    background: url('../img/sprite_general_close.png') no-repeat scroll 0 0;
    height: 18px;
    width: 17px;
    display: block;
    cursor: pointer;
    text-indent: -9999px;
    margin-top: 22px;
    margin-right: 20px;
}
#header .navigation_menu_block .search_block .close:hover {
    background: url('../img/sprite_general_close.png') no-repeat scroll -17px 0;
}
#header .navigation_menu_block .menu_bg_line {
    background: #000000;
    height: 62px;
}
#header...

JavaScript

$(document).ready(function() {

    $("#header").mouseover(function(){

        
        $(".logo_show").stop(false, true).animate({top: '-200px'}, 400);
        
        $('.navigation_menu_block').stop(false, true).delay(500).slideDown({ duration: 500, easing: 'easeInSine'});
    
    }).mouseout(function(){
    
        
        //$('.navigation_menu_block').slideUp({ duration: 200, easing: 'easeInSine'});
        //$(".logo_show").animate({top: '0px'}, 700);
     
        
    });
 
 
 
});