JSFiddle - React, Tailwind, and code Playground

by artgas_pro

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
  <title>Карточки | Проект 1</title>
</head>

<body>
  <div class="container">
    <div class="slide" data-background="rgb(3, 142, 198)">
      <h3>Океаны</h3>
    </div>
    <div class="slide" data-background="rgb(207, 214, 214)">
      <h3>Города</h3>
    </div>
    <div class="slide" data-background="rgb(173, 173, 112)">
      <h3>Дороги</h3>
    </div>
    <div class="slide" data-background="rgb(129, 64, 27)">
      <h3>Походы</h3>
    </div>
    <div class="slide" data-background="rgb(250, 183, 156)">
      <h3>Культура</h3>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

CSS

@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

* {
  box-sizing: border-box;
}

body {
  font-family: "Muli", sans-serif;
  overflow: hidden;
  margin: 0;
  background-color: coral;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  transition: all 1.5s ease 0s;
}
.container {
  display: flex;
  padding: 0 20px;
  height: 80vh;
  width: 100%;
}
.container .slide:first-child {
  background-image: url("https://images.unsplash.com/photo-1587059481645-b3a17becd6e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=701&q=80");
}
.container .slide:nth-child(2) {
  background-image: url("https://images.unsplash.com/photo-1572075771343-ac4adf294c7a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80");
}
.container .slide:nth-child(3) {
  background-image: url("https://images.unsplash.com/photo-1602770151814-2560b8a89602?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80");
}
.container .slide:nth-child(4) {
  background-image: url("https://images.unsplash.com/photo-1620953749696-38989c40eadb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80");
}
.container .slide:nth-child(5) {
  background-image: url("https://images.unsplash.com/photo-1568456774218-ca9ea97e6c9c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80");
}
.slide {
  margin: 0 20px 0 0;
  position: relative;
  cursor: pointer;
  color: azure;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  flex: 1;
  min-width: 128.47px;
  border-radius: 40px;
  transition: all 1.5s ease 0s;
}
.slide:last-child {
  margin: 0;
}
.slide h3 {
  height: 100%;
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 10px 10px 10px;
  font-size: 24px;
  letter-spacing:...

JavaScript

const sliders = document.querySelectorAll('.slide')
   sliders.forEach((slide) => {
      slide.addEventListener('click', () => {
         if (!slide.classList.contains('active')) {
            deleteClassActive();
            document.body.style.backgroundColor = slide.dataset.background;
         } else {
            document.body.style.backgroundColor = '#FF7F50';
         }
         slide.classList.toggle('active');


      });

   });
   function deleteClassActive() {
      sliders.forEach((slide) => {
         slide.classList.remove('active');
      });
   }