JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="keywords" content="">
	<meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Perfume</title>
  <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
  <link rel="stylesheet" href="libs/font-awesome-4.7.0/css/font-awesome.min.css">
	  <link rel="stylesheet" href="libs/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="css/fonts.css">
	  <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/reset.css">
	  <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/media.css">
    <link rel="stylesheet" href="css/less.css">
    <script src="libs/jquery/jquery-3.2.1.min.js"></script>
 </head>
	<body>
	  <div class='wrapper'>
             <header id="header" class="header">
          <div class="container-header">
            <div class='sliders-womens-left'>
                  <input checked type='radio' name='slider' id='slide1'/>
                  <input type='radio' name='slider' id='slide2'/>
                  <input type='radio' name='slider' id='slide3'/>
                  <input type='radio' name='slider' id='slide4'/>
                  <input type='radio' name='slider' id='slide5'/>
    <div id="slides">
      <div id="container">
         <div class="inner">
            <article class='paused'>
			  <a class="logo" href="/">
			    <img src="images/your-logo.jpg" class="image-logo" title="Logo" alt="Logo"/>
			  <span class="your-logo">Your logo</span></a>
			  <form action="/echto" method="post" target="_blank" class="form-login">
			    <input type="text" name="login" placeholder="Login" class="login-form" required />
		        <button type='submit' class="enter-login"></button> 
				<button type='submit'...

CSS

html, body {
	max-width: 1920px;
	min-width: 320px;
	font-size: 100%;
	line-height: 1.6;
	font-family: 'RobotoRegular', sans-serif;
  background: #fff;  
} 

.wrapper {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

            /*Слайдер в Хедере*/
#sliders-womens-left {
  float: left;
}

label {
  color: brown; 
  cursor: pointer;
  text-decoration: none;
  font-style: italic;
  border: 1px solid orange;
}

label:hover,
    a:hover {
  color: #ddd!important
}

input#slide1,
input#slide2,
input#slide3,
input#slide4,
input#slide5 {
  display: none;
}  

#slide1:checked ~ #slides .inner{margin-left:0}
#slide2:checked ~ #slides .inner{margin-left:-100%}
#slide3:checked ~ #slides .inner{margin-left:-200%}
#slide4:checked ~ #slides .inner{margin-left:-300%}
#slide5:checked ~ #slides .inner{margin-left:-400%}

#container {
  width: 100%; 
  overflow: hidden;
}

article img {
  width: 100%;
}

#slides .inner{
  width: 500%;
  line-height: 0;
}

#slides article {
  width: 20%;
  float: left;
}

#active {
  position: relative;
  z-index: 5;
  margin: -3% 0 0;
  text-align: center;
}

#active label {
  display: inline-block;
  border-radius: 10px;
  width: 20px;
  height: 20px;
  background: #bbb;
}

#active label:hover {
  background: #333;
  border-color: #777 !important;
}

#slide1:checked ~ #commands label:nth-child(2),
#slide2:checked ~ #commands label:nth-child(3),
#slide3:checked ~ #commands label:nth-child(4),
#slide4:checked ~ #commands label:nth-child(5),
#slide5:checked ~ #commands label:nth-child(1) {
  background: url('https://0.s3.envato.com/files/84450220/img/next.png')  no-repeat; 
  float: right;
  margin: 0 12px 0 0;
  display: block;
}

#slide1:checked ~ #commands label:nth-child(5),
#slide2:checked ~ #commands label:nth-child(1),
#slide3:checked ~ #commands label:nth-child(2),
#slide4:checked ~ #commands label:nth-child(3),
#slide5:checked ~ #commands label:nth-child(4) {
  background:...

JavaScript

/* При клике на кнопку, справа появляется блок, а центральный уменьшается влево на 26%. При вторичном клике, правый Блок исчезает, а центральный снова расширяется. */
$(document).ready(function() {
    $('#button-spoiler-title').click(function() { // зелёная кнопка
        $('.sliders-womens-left').toggleClass('minimized');
        $('.spoiler-title').toggleClass('spoiler-title-open');
        $('.spoiler-body').toggleClass('displayed');
    });
});