JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA_Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
	<title>Service</title>
   <script   src="js/jquery-3.3.1.min.map" type="text/javascript"></script>
  <script   src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
   <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>

<section class="header">
  <div class="container">
    <div class="row header-position">

      <div class="col-md-3 col-sm-10 ">
        <div class="header-place">
        <form action="" class="header-search">
          <input type="search" placeholder="Поиск" class="header-text">
        </form>
        </div>
      </div> <!-- cols -->
      
      <div class="offset-md-4 col-md-2 col-sm-4">
        <button type="button" class="header-record-1 btn "><p><a href="#">Регистрация</p></a></button>
      </div> 
      <div class="col-md-1 col-sm-4">
        <button type="button" class="header-record-2 btn"><p><a href="#">Войти</p></a></button>
      </div>
    </div>  <!-- finish row -->
  </div> <!-- finish container -->

  <div class="container">
    <div class="row header-logo">
      <div class="col-md-2">
        <p class="">
          <span class="header-logo-text">LOGO </span> <br>
          ...

CSS

@font-face {
  font-family: 'SegoeUI_bold';
  src: url('../fonts/SegoeUI-SemiBold.eot');
  src: url('../fonts/SegoeUI-SemiBold.eot?#iefix') format('embedded-opentype'), url('../fonts/SegoeUI-SemiBold.woff2') format('woff2'), url('../fonts/SegoeUI-SemiBold.woff') format('woff'), url('../fonts/SegoeUI-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'ErasBoldITC_bold';
  src: url('../fonts/ErasITC-Bold.eot');
  src: url('../fonts/ErasITC-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/ErasITC-Bold.woff2') format('woff2'), url('../fonts/ErasITC-Bold.woff') format('woff'), url('../fonts/ErasITC-Bold.ttf') format('truetype'), url('../fonts/ErasITC-Bold.svg#ErasITC-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
}
.eras {
  font-family: 'ErasBoldITC_bold', sans-serif;
}
body {
  background-color: #f8f8f8;
}
button:active,
button:focus,
button {
  outline: none;
  border-style: none;
}
a:focus,
a:hover,
a:active {
  text-decoration: none;
  color: white;
  outline: none;
}
button:hover {
  cursor: pointer;
}
::-webkit-input-placeholder {
  font-family: 'SegoeUI_bold', sans-serif;
  color: #c2bcbc;
  font-weight: 400;
  font-size: 16px;
}
::-moz-placeholder {
  font-family: 'SegoeUI_bold', sans-serif;
  color: #c2bcbc;
  font-weight: 400;
  font-size: 16px;
}
/* Firefox 19+ */
:-moz-placeholder {
  font-family: 'SegoeUI_bold', sans-serif;
  color: #c2bcbc;
  font-weight: 400;
  font-size: 16px;
}
/* Firefox 18- */
:-ms-input-placeholder {
  font-family: 'SegoeUI_bold', sans-serif;
  color: #c2bcbc;
  font-weight: 400;
  font-size: 16px;
}
input:active,
:hover,
:focus {
  outline: 0;
  outline-offset: 0;
}
/*

ВАРИАНТ 2

*/
.menu {
  margin-top: 25px;
  text-align: left;
}
.menu__links {
  margin-top: -10px;
}
.menu__icon {
  display: none;
  width: 45px;
  height: 35px;
  position: relative;
  cursor: pointer;
}
.menu__icon span {
  display: block;
  position: absolute;
  height:...