JSFiddle - React, Tailwind, and code Playground

HTML

<a>Menu</a><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Index Adaptive</title>
    <link rel="stylesheet" href="styles/styles.css">
  </head>
  <body>
    <header class="header">
      <div class="header-wrap_mobile">
        <div class="header-wrap_mobile_men-img">
          <a class="logo" href="#">
            <img src="images/index-assets/header/logo-small.png" alt="...">
          </a>
          <form class="search">
            <input type="search" placeholder="Search">
          </form>
          <img class="men" src="images/index-assets/men-header.jpg" alt="...">
        </div>
        <div class="header-wrap_mobile_txt">
          <input type="checkbox" id="menu">
          <label for="menu"></label>
          <ul class="menu">
            <li><a href="#"><span>home</span></a></li>
            <li><a href="#">man</a></li>
            <li><a href="#">women</a></li>
            <li><a href="#">kids</a></li>
            <li><a href="#">accoseriese</a></li>
            <li><a href="#">featured</a></li>
            <li><a href="#">deals</a></li>
          </ul>
          <a class="back">
            <img src="images/index-assets/header/basket-white.png" alt="...">
          </a>
          <div class="txt-brand">
            <span class="txt-brand_brand">the brand</span><br>
            <span class="txt-brand_lux">of luxerious</span>
            <span class="txt-brand_fash">fashion</span>
          </div>
        </div>
      </div>
      <div class="header-wrap_desctop">
        <div class="hd-logo">
          <a class="hd-logo_logo" href="#">
            <img class="logo" src="images/index-assets/header/logo.png" alt="...">
            <span class="hd-logo_logo-txt">bran<span>d</span></span>
          </a>
          <div...

CSS

@font-face {
  font-family: "lato-regular";
  font-style: normal;
  font-weight: 400;
  src: local("lato-regular"), url("../fonts/lato-regular/lato-regular.woff2") format("woff2"), url("../fonts/lato-regular/lato-regular.woff") format("woff"), url("../fonts/lato-regular/lato-regular.ttf") format("ttf"), url("../fonts/lato-regular/lato-regular.eot") format("eot"); }
@font-face {
  font-family: "lato-black";
  font-style: normal;
  font-weight: 900;
  src: local("lato-black"), url("../fonts/lato-black/lato-black.woff2") format("woff2"), url("../fonts/lato-black/lato-black.woff") format("woff"), url("../fonts/lato-black/lato-black.ttf") format("ttf"), url("../fonts/lato-black/lato-black.eot") format("eot"); }
@-webkit-keyframes opacity_hd-btn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes opacity_hd-btn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@-webkit-keyframes go {
  from {
    left: 0; }
  to {
    left: -220px; } }
@keyframes go {
  from {
    left: 0; }
  to {
    left: -220px; } }
body {
  margin: 0; }

.header {
  background-color: #f4f3f3; }
  .header-wrap_mobile {
    width: 992px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin: 0 auto;
    margin-bottom: 98px; }
    .header-wrap_mobile_men-img {
      width: 50%;
      background-color: #f4f3f3;
      margin: 0 auto;
      position: relative; }
      .header-wrap_mobile_men-img .logo {
        position: absolute;
        width: 75px;
        height: 74px;
        background-color: #222;
        z-index: 1;
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center; }
    ...