JSFiddle - React, Tailwind, and code Playground

by sazakharov

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="css/style.css">

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
       <title>Coffie</title>
      <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
   </head>
   <body>
     <!-- Модальное окно -->
     <!-- Модальное окно -->
     <!-- Modal -->
<div class="modal fade modal-dialog-centered" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="my-modal-form">
          <h1>заказать</h1>
          <input type="email" placeholder="Почта">
          <input type="name" placeholder="Имя">
          <input...

CSS

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
@font-face {
  font-family: SegoeUIRegular;
  src: url(../fonts/SegoeUIRegular/SegoeUIRegular.ttf);
}
@font-face {
  font-family: SegoeUIBold;
  src: url(../fonts/SegoeUIBold/SegoeUIBold.ttf);
  font-weight: bold;
}
.my-modal-form {
  margin-top: 20px;
  border-radius: 50px;
  height: 48px;
  width: 268px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  border-radius: 50px;
  width: 268px;
  background-color: #E09256;
  border: 4px #E09256 solid;
}
.my-modal-form div {
  padding-left: 10px;
  border: 2px white dashed;
  height: 48px;
  width: 268px;
  border-radius: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-modal-form .buy-button {
  margin: 0;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 18px;
  font-family: "Open Sans";
}

* {
  padding: 0;
  margin: 0;
}

.line {
  width: 100%;
  height: 1px;
  border: 1px dashed #8A8A8A;
}

.wrapper {
  overflow-x: hidden;
}
.wrapper .container {
  min-width: 997px;
}
.wrapper #coffie-header-nav {
  height: 80px;
  background-color: #cacfa2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wrapper #coffie-header-nav nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper #coffie-header-nav nav .nav-part-right {
  display: flex;
}
.wrapper #coffie-header-nav nav .nav-part-right .nav-item {
  padding-right: 25px;
  padding-left: 25px;
}
.wrapper #coffie-header-nav nav .nav-part-right .nav-item .nav-link {
  text-transform: uppercase;
  text-decoration: none;
  color: black;
  font-family: SegoeUIRegular;
}
.wrapper #coffie-header-nav nav .nav-part-left {
  display: flex;
}
.wrapper #coffie-header-nav nav .nav-part-left .nav-item {
  padding-right: 25px;
  padding-left: 25px;
}
.wrapper #coffie-header-nav nav .nav-part-left .nav-item .nav-link...

JavaScript

if (window.matchMedia('(max-width: 1184px)').matches)
{
  $( "#nav1" ).css( "display", 'none');
  $( "#nav2" ).css( "display", 'none');
}
window.onresize = function(event) {
  if(window.matchMedia('(max-width: 1184px)').matches){
    // do functionality on screens smaller than 768px
    $( "#nav1" ).css( "display", 'none');
    $( "#nav2" ).css( "display", 'none');
  } else {
    $( "#nav1" ).css( "display", 'flex');
    $( "#nav2" ).css( "display", 'flex');
  }
};


$( ".nav-logo" ).click(function() {
  if ($(window).width() < 1184)
  {

  $( "#nav1" ).toggle( "slow", function() {
    // Animation complete.
    // $(this).rotate(100);

  });
  $( "#nav2" ).toggle( "slow", function() {
    // Animation complete.
    // $(this).rotate(100);
  });
} else {
  $( "#nav1" ).css( "display", 'flex');
  $( "#nav2" ).css( "display", 'flex');
}

});