JSFiddle - React, Tailwind, and code Playground

by quanqhuy188

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="mystyle.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
        crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="common.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="container-header">

        <div class="first-container">

            <div class="logo-container">
                <a href="#"><img class="logo-img" src="https://i.postimg.cc/PNszsz49/logo.png"></a>
            </div>
            <div class="categories-container">
                <ul class="ul-menu">
                    <li...

CSS

.container-header{
    position:fixed;
    width:100%;
}
.first-container{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    max-width:90%;
    margin: auto;
    box-shadow: 0 9px 8px -7px grey;

}

.ul-menu{
    display:inline-block;
    margin:0;
    padding:0;

}

.li-menu{
    cursor:pointer;
    display:inline-block;
    text-transform:uppercase;
    padding-left:5px;
    padding-right:5px;
    height:70px;
    line-height:70px;
    color:black;
    


}
.categories-container{
 
}
.li-menu:hover{
    border-bottom:8px solid #F7B906;
    font-weight: bold;

}


.search-container{
    position:relative;


   
}
.icon-search-box{
    color:#F7B906;
    padding:10px;
    background-color:#F8F0EB;
    border-radius:20px;


    
}
.icon-search-box:hover{
    color:white;
    background-color:#F7B906;


}


.underline{
    border:2px solid #F7B906;
    width:20%;
    transition: all 2s;




}
.input-controller{
    position:absolute;
    width:200px;

    display:none;
    right:40px;
 

}


.search-box{
    width:100%;
    border:0;
    background-color:aliceblue;
    padding-left:5px;
    height:31px;

 
}

input:focus {
    outline: none;
}
.second-container{

    background-color:aliceblue;
    max-width:90%;
    text-align:center;
    margin:0 auto;
    display:none;
    height:60px;
 

}
::-webkit-input-placeholder {
    font-style: italic;
  }

.ul-menu-aboutsus{
    display:inline-block;
    margin:0px;
    padding:0px;
    
}
.li-menu-aboutsus{
    display:inline-block;
    padding-left:10px;
    padding-right:10px;
    height:40px;
    line-height:40px;
    margin-left:10px;
    margin-right:10px;
    cursor:pointer;
    text-transform:uppercase;

}
.li-menu-aboutsus:hover{
    border-bottom:2px solid #F7B906;
    font-weight: bold;


}
.menu-aboutsus{
    line-height:60px;
    display:none;

}
.ul-menu-products{
    display:inline-block;
    margin:0px;
    padding:0px;
    
}
.li-menu-products{
   ...

JavaScript

$(document).ready(function () {
    $(".li-menu").click(function () {
        $(".li-menu").css({ "color": "black" });
        $(this).css({ "color": "#F7B906" });
    });

    
    $(document).click(function (event) {
        if ($(event.target).is(".icon-search-box,.search-box")) {
            $(".input-controller").css({ "display": "inline-block" });
            $(".underline").css({ "width": "100%" });
            $(".ul-menu").css({ "visibility": "hidden" });
            $(".search-box").focus();
            $(".icon-menu-box").css({ "display": "none" });
            $(".container-left-mobile").css({ "visibility": "hidden" });
        }
        else {
            $(".input-controller").css({ "display": "none" });
            $(".underline").css({ "width": "20%" });
            $(".ul-menu").css({ "visibility": "visible" });
            $(".icon-menu-box").css({ "display": "inline" });
            $(".container-left-mobile").css({ "visibility": "visible" });



        }

    });
    $(document).click(function (event2) {
        if ($(event2.target).is("#action-menu1,#action-menu2,#action-menu3,.li-menu-aboutsus,.li-menu-products,.li-menu-technology")) {
            $(".second-container").css({ "display": "block" });

        }
        else {
            $(".second-container").css({ "display": "none" });

        }

    });
    $(document).click(function (event3) {
        if ($(event3.target).is("#action-menu1,.li-menu-aboutsus")) {
            $(".menu-aboutsus").css({ "display": "block" });
        }
        else {
            $(".menu-aboutsus").css({ "display": "none" });

        }

    });
    $(document).click(function (event4) {
        if ($(event4.target).is("#action-menu2,.li-menu-products")) {
            $(".menu-products").css({ "display": "block" });
        }
        else {
            $(".menu-products").css({ "display": "none" });

        }

    });
    $(document).click(function (event5) {
        if...