JSFiddle - React, Tailwind, and code Playground

by AlexGun

HTML

<!doctype html>
<html lang="ru">
<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>ElbrusKino</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section class="start-page">
    <div class="header">
      <div class="logo"><a href="#">ElbrusКино</a></div>
      <div class="nav">
        <div class="tabs">
          <ul>
            <li class = "nav-link active"><a href="#">Моё кино</a></li>
            <li class = "nav-link"><a href="#">Магазин</a></li>
            <li class = "nav-link"><a href="#">Мои покупка</a></li>
            <input type="text" id = "search">
            <label for="search">&#128269;</label>
          </ul>

        </div>
        <div class="personal-account">
          Личный кабинет
        </div>
      </div>
    </div>
    <div class="main-info">
      <div class="new-films">
        <p class="block-title">Новое в подписке</p>
        <button class="next">&gt;</button>
        <div class="slider-wrap">
          <div class="slider-item">
            <img src="img/bryklin.jpg" alt="Bryklin">
              <p class="film-title">Сиротский бруклин</p>
              <p class="film-info">2019, комедия</p>
              <p class="film-score good">7.3</p>
          </div>
          <div class="slider-item">
            <img src="img/solo.jpg" alt="Star Wars:Solo">
            <p class="film-title">Соло</p>
            <p class="film-info">2018, фантастика, боевик, приключения</p>
            <p class="film-score good">7.0</p>
          </div>
          <div class="slider-item">
            <img src="img/starWars.jpg" alt="Star Wars">
            <p class="film-title">Звездные войны</p>
            <p class="film-info">2017,фантастика, боевик, приключения</p>
            <p class="film-score good">7.1</p>
          </div>
          <div...

CSS

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;400;700&display=swap');
:root {
  --main-color:#5200ae;
  --main-color-transparent: rgba(82, 0, 174, 0.66);
  --main-font-color-transparent: #8178ce;
  --menu-font-color: #6fe9fe;
  --color-highlight: #f0c159;
  --color-good-score: #4eba2f;
  --color-neutral-score: #aaaaaa;
  --color-bad-score: red;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,ol {
  list-style: none;
}
input:focus,input:target {
  appearance: none;
  outline: none;
}
a {
  text-decoration: none;
}
::after, ::before {
  box-sizing: border-box;
}

body {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
}

.start-page {
  display: flex;
  height: 100vh;
  width: 100vw;
  flex-direction: column;
  align-items: center;
}

.start-page .header {
  width: 100%;
  background-color: var(--main-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 60px;
  flex: 0 0 10%;
  max-height: 10%;
}
.header .logo > a {
  flex: 2 1 30%;
  max-width: 30%;
  font-size: 30px;
  color:var(--menu-font-color);
  font-weight: 900;
  cursor: pointer;
}
.header .nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 0 0 70%;
  max-width: 70%;
}

.nav .tabs {
  display: flex;
  align-items: center;
  flex:2 1 70%;
}

.tabs > ul {
  display: flex;
  height: 100%;
  position: relative;
  align-items: center;
  padding: 15px 15px;
}

.nav-link+.nav-link {
  margin-left: 20px;
}
.nav-link > a {
  font-size: 20px;
  color: var(--main-font-color-transparent);
  position: relative;
}
.nav-link.active > a {
  color: var(--color-highlight)
}
.nav-link.active > a:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left:0;
  width: 100%;
  height: 3px;
  background-color: var(--color-highlight);
}
.tabs > ul > label {
  margin-left: 30px;
  cursor: pointer;
  z-index: 100;
  font-size: 20px;
}
input#search {
  transform: scaleX(0);
  position: absolute;
  width: 100%;
 ...

JavaScript

<!doctype html>
<html lang="ru">
<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>ElbrusKino</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section class="start-page">
    <div class="header">
      <div class="logo"><a href="#">ElbrusКино</a></div>
      <div class="nav">
        <div class="tabs">
          <ul>
            <li class = "nav-link active"><a href="#">Моё кино</a></li>
            <li class = "nav-link"><a href="#">Магазин</a></li>
            <li class = "nav-link"><a href="#">Мои покупка</a></li>
            <input type="text" id = "search">
            <label for="search">&#128269;</label>
          </ul>

        </div>
        <div class="personal-account">
          Личный кабинет
        </div>
      </div>
    </div>
    <div class="main-info">
      <div class="new-films">
        <p class="block-title">Новое в подписке</p>
        <button class="next">&gt;</button>
        <div class="slider-wrap">
          <div class="slider-item">
            <img src="img/bryklin.jpg" alt="Bryklin">
              <p class="film-title">Сиротский бруклин</p>
              <p class="film-info">2019, комедия</p>
              <p class="film-score good">7.3</p>
          </div>
          <div class="slider-item">
            <img src="img/solo.jpg" alt="Star Wars:Solo">
            <p class="film-title">Соло</p>
            <p class="film-info">2018, фантастика, боевик, приключения</p>
            <p class="film-score good">7.0</p>
          </div>
          <div class="slider-item">
            <img src="img/starWars.jpg" alt="Star Wars">
            <p class="film-title">Звездные войны</p>
            <p class="film-info">2017,фантастика, боевик, приключения</p>
            <p class="film-score good">7.1</p>
          </div>
          <div...