JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <header class="top_header">
        <span>Dolore sint</span>
        <span>Deserunt nostrud dolore</span>
        <span>Lorem pariatur consectetur ullamco</span>
        <span>Commodo officia irure ut cillum enim</span>
    </header>
    <header>
        <div class="search_container">
            <img class="logo" src="./assets/logo.svg" />
            <button class="catalog">
                <span class="dots"></span>
                <span>Katalog</span>
            </button>
            <div class="search_bar">
                <input placeholder="Search..." id="search" />
                <span class="cancel-icon"></span>
            </div>
        </div>
        <div class="toolbar">
            <div class="info">
                <small>Call is free</small>
                <h4>420 773 777 777</h4>
                <a href="tel:777 777 777">Call us</a>
            </div>
            <div class="actions">
                <i class="icon-1"></i>
                <i class="icon-2"></i>
                <i class="icon-3"></i>
            </div>
            <div class="user"></div>
        </div>
    </header>
    <main>
        <div class="search_body">
            <table class="search_content">
            </table>
        </div>
        <section class="slider">
            <img src="https://via.placeholder.com/230" alt="230" />
            <img src="https://via.placeholder.com/230" alt="230" />
            <img src="https://via.placeholder.com/230" alt="230" />
            <img src="https://via.placeholder.com/230" alt="230" />
        </section>
        <section...

CSS

html {
    background-color: #fafafa;
}

body {
    width: auto;
    height: 100%;
    margin: 0;
}

header {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
}

header.top_header {
    padding-top: 0.4rem;
    border-bottom: 1px solid lightgray;
    justify-content: space-between;
}

header .search_container {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    margin-right: 1rem;
    z-index: 1024;
    top: 0;
    transition: top .5s ease;
}

header .search_container.search_modal {
    top: -50px;
    left: 0;
}

header .search_container input {
    position: relative;
    width: 350px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('assets/icon/searchicon.png');
    background-position: right 10px center;
    background-repeat: no-repeat;
    padding: 12px 40px 12px 12px;
    transition: width .5s ease-in-out;
}

header .search_container .active {
    width: 100%;
    outline: none !important;
    z-index: 901;
    border: 1px solid #30a161 !important;
}

header .logo {
    width: 10rem;
    height: 3rem;
    margin-right: 1rem;
}

header .catalog {
    display: flex;
    border: none;
    background-color: black;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: uppercase;
    padding: 0.7rem;
    border-radius: 5px;
    margin-right: 1rem;
}

header .catalog .dots {
    background-color: white;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

header .toolbar {
    display: flex;
    flex: 0 0 40%;
    font-size: 1rem;
    align-items: center;
    justify-content: space-between;
}

header .toolbar .info {
    margin: 0 1rem;
}

header .toolbar .info h4 {
    margin: 0;
}

header .toolbar .actions {
    display: flex;
}

header .toolbar .actions i,
header .toolbar .user {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
   ...

JavaScript

$("#search").click(function () {
    $("#search").addClass('active');
    $(".search_container").addClass('search_modal');
    $('.search_body').css('opacity', '1');
    $('.toolbar').fadeOut('fast');
});

$(".cancel-icon").click(function () {
    $("#search").removeClass('active');
    $("#search").val('');
    $(".search_container").removeClass('search_modal');
    $('.search_body').css('opacity', '0');
    $('.toolbar').fadeIn('slow');
    $('.search_content').hide();
});