JSFiddle - React, Tailwind, and code Playground

by Mikhail Cheremukhin-Rerberg

HTML

<body>
    <header class="main-header">
      <nav class="main-navigation wrapper">
        <a class="main-header-logo">
          <svg xmlns="http://www.w3.org/2000/svg" width="160" height="65" viewBox="0 0 160 65"><path class="nerds-logo" d="M157.936 49.374c-1.235.16-2.523.27-3.757.377v.057c-2.416 17.364-26.19 20.23-26.78 6.6-.27-6.168 11.593-7.95 23.398-9.09.43-11.09-15.9 5.668-21.608-4.6-5.02-9.025 14.632-17.938 16.728-16.102 6.438 5.636 3.404 6.618-1.38 8.335-9.49 3.41-5.79 4.107-4.51 3.726 7.57-2.253 14.366-1.04 14.312 8.317 1.288-.107 2.522-.163 3.757-.27 2.306-.216 2.467 2.434-.16 2.65zm-7.514.756c-9.124 1.028-17.013 2.436-16.153 5.355 1.715 5.573 13.576 6.818 16.152-5.355zm-32.744-5.212c-.682-.037-.703-6.038.112-11.688 1.005-6.95 11.935-3.357 9.093-1.906-2.975 1.52-4.43 8.718-6.266 12.087-.635 1.162-2.605 1.527-2.94 1.508zM42.105 21.002c2.376 4.866-4.937 8.17-8.292 4.52-1.398-1.554-.755-4.56 2.636-6.192 1.696-.836 4.072-1.596 5.655 1.672zm14.957-2.14c2.585 5.296-5.38 8.895-9.03 4.92-1.523-1.694-.824-4.962 2.872-6.74 1.846-.912 4.432-1.737 6.158 1.82zm-28.18 42.804c-7.918 5.338-14.218 4.16-12.21-10.848 1.45-10.904-.95-11.52-3.123-9.442-2.846 2.697-4.63 9.723-4.685 16.412a50.98 50.98 0 0 0 1.004 4.776c.333 1.63-4.908 3.315-7.975 1.01C.837 62.79 0 54.865 0 44.132c0-8.823 1.17-14.894 2.23-15.174 8.03-2.19 9.312 1.348 7.583 7.98a47.637 47.637 0 0 0-1.395 7.925c1.673-4.663 4.07-8.484 6.803-10.172 7.417-4.664 13.606-2.473 12.435 6.8-2.007 16.58-2.174 18.828-.39 17.536 2.23-1.574 3.68 1.238 1.618 2.642zm26.1-2.076c-2.175 3.484-7.806 5.17-13.216 4.552-7.75-.843-12.545-7.756-10.705-18.097 2.01-11.185 18.066-18.322 23.197-10.34 3.735 5.788-2.175 16.016-11.597 19.782l-.502.168c1.95 5.17 6.58 7.476 11.04 2.36 2.118-2.36 3.623-1.348 1.784 1.575zm-13.605-7.418c5.855-4.16 7.806-13.32 6.19-15.905-1.73-2.697-5.075 1.517-6.246 11.746-.11 1.46-.11 2.865.057 4.16zm41.714-7.18c-1.596 2.507-3.902 4.384-5.965 5.06-2.398.73-5.185.055-5.185-2.7 0-1.01.892-3.37...

CSS

html, body {
    margin: 0;
    padding: 0;
    
    font-family: "Roboto", "Arial", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #283136;

    background-color: white;
}

a {
    text-decoration: none;
}

img {
    height: auto;
}

.main-navigation {
    font-size: 16px;
    font-weight: 500;
    line-height: 30px;
    color: #000000;
    background-color: #eeeeee;
}

.site-navigation,
.user-navigation {
    list-style: none;
}

.site-navigation a,
.user-navigation a {
    color: #000000;
    text-transform: uppercase;
    
    display: block;
    
    vertical-align: middle;
}

.user-navigation .cart-enter {
    padding-left: 105px;
    
    position: relative;
    
    margin-bottom: 16px;
}

.cart-enter::before {
    content: "";
    position: absolute;
    
    top: 7px;
    left: 65px;
    
    width: 18px;
    height: 18px;
    
    background-image: url("../img/cart-icon.svg");
    background-repeat: no-repeat;
    background-position: 0 0;
}

.site-navigation a:hover,
.user-navigation a:hover {
    color: #fb565a;
}

.site-navigation a:focus,
.user-navigation a:focus {
    color: #cdcdcd;
}

.main-header-logo:hover path {
   fill: rgba(48, 48, 48, 0.8)
}

.main-header-logo:active path {
   fill: rgba(48, 48, 48, 0.3)
}

/*Новая разметка слайдов*/
.up-section{
    background-color: #eeeeee;
}

.slider {
    position: relative;
    min-width: 1160px;
    height: 420px;
    background: #eeeeee;
}

.slider-info {
   margin: 0;
    
   padding-top: 25px;

}

.slider input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.slider-controls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    position: absolute;
    bottom: 96px;
    left: 50%;
    width: 94px;
    height: 18px;
    margin-left: -48px;
    text-align: center;
    z-index: 1000;
}

.slider-controls label {
   ...