JSFiddle - React, Tailwind, and code Playground

by hisbvdis

HTML

<!DOCTYPE html>
<html lang="ru">
<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">
  <title>Запись на стрижку | Borodinski</title>
</head>
<body>

<header class="header">
  <a class="logo" href="index.html">
    <img class="logo__img" src="#" width="226" height="30" alt="Барбершоп «Borodinski»">
  </a>
  <nav class="nav">
    <button class="nav__btn" type="button">Открыть меню</button>
    <div class="nav__wrapper">
      <ul class="site-nav">
        <li class="site-nav__item">
          <a class="site-nav__link site-nav__link--active">Главная</a>
        </li>
        <li class="site-nav__item">
          <a class="site-nav__link" href="photo.html">Наши работы</a>
        </li>
        <li class="site-nav__item">
          <a class="site-nav__link" href="form.html">Записаться</a>
        </li>
        <li class="site-nav__item">
          <a class="site-nav__link" href="#">Контакты</a>
        </li>
        <li class="site-nav__item">
          <a class="site-nav__link" href="#">HTML Academy</a>
        </li>
      </ul>
      <ul class="user-panel">
        <li class="user-panel__item">
          <a class="user-panel__link user-panel__link--login" href="#">Войти</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

<main class="main">
  <h1 class="page-title">Запись на стрижку</h1>

  <section class="appt">
    <h2 class="visually-hidden">Форма записи</h2>
    <form class="appt-form" action="https://echo.htmlacademy.ru" method="POST">
      <input type="text" name="last-name" placeholder="Фамилия" autocomplete="off">
      <input type="text" name="first-name" placeholder="Имя" autocomplete="off">
      <input type="text" name="patronymic" placeholder="Отчество" autocomplete="off">
      <input type="text" name="phone" placeholder="Контактный телефон" autocomplete="off">
      <input type="email" name="email" placeholder="Контактный e-mail"...

CSS

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;

  font-family: 'PT Sans Narrow', Arial, sans-serif;
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
  color: #000;
  text-transform: uppercase;

  background: #000 url("../img/index-bg.jpg") 50% 43px no-repeat;
  overflow: scroll;
}

body.inner-page {
  background: #f8f5f2 url("../img/sections-group.jpg") top left;
}

a {
  text-decoration: none;
}

button,
input {
  font: inherit;
}

img {
  max-width: 100%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.btn {
  display: inline-block;
  padding: 10px 0;

  font: inherit;
  color: #fff;
  text-transform: uppercase;
  text-align: center;

  background: #000000;
  border: none;
  cursor: pointer;
}

.btn:hover,
.btn:focus {
  background-color: #663d15;
}

.btn + .btn {
  margin-left: 16px;
}

.btn--min-width {
  min-width: 140px;
}

.btn--secondary:hover,
.btn--secondary:focus {
  color: #000;

  background: #fff;
}

.inner-page main {
  padding-top: 50px;
}

.page-header {
  background: #000000;
}

.page-nav {
  display: flex;
  /* justify-content: space-between; */
  /* align-items: center; */
}

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 10px;
}

.page-nav ul {
  list-style: none;
}

.site-nav {
  display: flex;
  margin: 0;
  margin-right: 10px;
  padding: 0;
}

.inner-page .site-nav {
  margin-left: 10px;
}

.site-nav li {
  flex-shrink: 0;
  display: flex;
}

.site-nav .active {
  background: linear-gradient(#fff, #fff) bottom / 100% 3px no-repeat;
}

.site-nav .active:hover,
.site-nav .active:focus {
  background: #242424 linear-gradient(#fff, #fff) bottom / 100% 3px no-repeat;
}

.user-nav {
  margin: 0 10px;
  margin-left: auto;
  padding: 0;
}

.site-nav a,
.user-nav a {
  display: block;
  padding: 26px 20px;

  font-size: 16px;
 ...

JavaScript

//gulp gulp-less gulp-sourcemaps gulp-concat gulp-autoprefixer gulp-if browser-sync gulp-clean-css
var gulp = require('gulp');
var less = require('gulp-less');
var browserSync = require('browser-sync');
var autoprefixer = require('gulp-autoprefixer');
var cleanCss = require('gulp-clean-css');
var gulpConcat = require('gulp-concat');
var gulpIf = require('gulp-if');
var sourcemaps = require('gulp-sourcemaps').create();

var config = {
  paths: {
    less: './source/**/*.less',
    html: './public/index.html',
  },
  ouptup: {
    path: './public',
    cssName: 'style.css',
  },
  isDevelop: true,
};

gulp.task('less', function() {
  return gulp.src(config.paths.less)
    .pipe(gukpIf(config.isDevelop, sourcemaps.init()))
    .pipe(less())
    .pipe(concat(config.ouptup.cssName))
    .pipe(autoprefixer())
    .pipe(gulpIf(!config.isDevelop, cleanCss()))
})

gulp.task('serve', function() {

})

gulp.task('default', ['less', 'serve']);

var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

// Cross-browser xml parsing
var parseXML = function( data ) {
  var xml, tmp;
  if ( !data || typeof data !== "string" ) {
    return null;
  }
  try {
    if ( window.DOMParser ) { // Standard
      tmp = new DOMParser();
      xml = tmp.parseFromString( data , "text/xml" );
    } else { // IE
      xml = new ActiveXObject( "Microsoft.XMLDOM" );
      xml.async = false;
      xml.loadXML( data );
    }
  } catch( e ) {
    xml = undefined;
  }
  if ( !xml || !xml.documentElement || xml.getElementsByTagName( "parsererror" ).length ) {
    jQuery.error( "Invalid XML: " + data );
  }
  return xml;
};

// Bind a function to a context, optionally partially applying any arguments.
var proxy = function( fn, context ) {
  var tmp, args, proxy;

  if ( typeof context === "string" ) {
    tmp = fn[ context ];
    context = fn;
    fn = tmp;
  }

  // Quick check to determine if target is callable, in the spec
  // this throws a TypeError, but we will just...