JSFiddle - React, Tailwind, and code Playground

by quanqhuy188

HTML

<!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 class="li-menu" id="action-menu1">Abouts Us</li>
            <li class="li-menu">Investor Relations </li>
            <li class="li-menu">Applications</li>
            <li class="li-menu" id="action-menu2">Products </li>
            <li class="li-menu" id="action-menu3">Technology</li>
            <li class="li-menu">Support</li>
            <li class="li-menu">Inforcenter</li>
            <li class="li-menu">Contact Us</li>
          </ul>
        </div>
        <div class="search-container">
          <div...

CSS

.container-header {
  position: fixed;
  width: 100%;
}

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

.logo-img {
  width: 200px;
}

.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;
  color: black;
}

.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-container {
  position: absolute;
  width: 200px;
  display: none;
  right: 40px;
}

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

input:focus {
  outline: none;
}

.second-container {
  max-width: 90%;
  text-align: center;
  margin: 0 auto;
}

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

.menu-products {
  line-height: 60px;
  display: none;
  background-color: antiquewhite;
}

.menu-technology {
  line-height: 60px;
  display: none;
  background-color: antiquewhite;
}

::-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;
}

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

JavaScript

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


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


    });

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

        }

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

        }

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

        }

    });
    $(document).click(function (IconMenuBox) {
        if ($(IconMenuBox.target).is(".icon-menu-box,.li-menu-mobile")) {

            $(".ul-menu-mobile").css({ "display": "block" });
            
            
        }
        else {
            $(".ul-menu-mobile").css({ "display": "none" });


        }

    });

});