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-field">
          <input name="search" placeholder="Search.." class="search-input" id="search" />
          <span class="cancel-icon" id="test"></span>
          <div class="search-module">
            <div id="search-content"></div>
          </div>
        </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>
      <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 class="main_content">
        <p>
          Excepteur ad et minim occaecat et laborum dolor non dolor in....

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

header .search_container input {
  width: 100%;
  padding: 0.5rem;
}

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

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;
    z-index: 3;
}

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%;
  background-color: lightgray;
  margin-right: 1rem;
}

header .toolbar .user {
  width: 3rem;
  height: 3rem;
}

.slider {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 2rem;
  background-color: rgba(211, 211, 211, 0.397);
}

.main_content {
  max-width: 1200px;
  margin: 0 auto;
}

.main_content .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.search-field {
	position: relative;
	z-index: 2;
}

.search-field:focus {
	width: 100%;
	background-color: #fff;
}

.search-input {
	position: relative;
	width: 330px;
	box-sizing: border-box;
	border: 2px solid #ccc;
	border-radius: 4px;
	font-size:...

JavaScript

$(".search-input").on("mousedown", function () {
	$(this).addClass('active');
    $('.search_container').addClass('test')
});

$(".cancel-icon").on("mousedown", function () {
	$('#search-content').hide();
	$('.search-input').removeClass('active');
	$('.search-input').val('');
    $('.search_container').removeClass('test')
});