JSFiddle - React, Tailwind, and code Playground

by CollonilTolli

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 " style="background-image: url('https://wallpaperbat.com/down/92585-i-made-a-minimalist-arch-linux-wallpaper-1920x1080-linuxmasterrace');">
    <h3>Arch Linux</h3>
  </div>
  <div class="slide" style="background-image: url('https://wallpaperbat.com/down/291124-awesome-minimalist-linux-wallpaper');"
  >
    <h3>Debian</h3>
  </div>
  <div
      class="slide"
      style="
          background-image: url('https://wallpaperbat.com/down/72772-minimalist-wallpaper-and-logo');
        "
  >
    <h3>Linux Mint</h3>
  </div>
  <div
      class="slide"
      style="
          background-image: url('https://wallpaperbat.com/down/111975-minimal-manjaro-wallpaper-ive-made-wallpaper-manjaro-linux-forum');
        "
  >
    <h3>Monjaro</h3>
  </div>
  <div
      class="slide "
      style="
          background-image: url('https://wallpaperbat.com/down/284127-github-dorianpro-kali-linux-wallpaper-a-set-of-dedicated-kali');
        "
  >
    <h3>Kali Linux</h3>
  </div>
</div>
</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: #e2e2e2
  font-size: 10px;
}
.slide h3 {
  font-size: 1.5rem;
}
.container{
  display: flex;
  height: 100vh;
  max-width: 100vw;
  width: 100%;
}
.container .slide{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
  padding: 2rem 0;
  height: 100vh;
  flex: 1;
  margin: 0.5rem;
  border-radius: 1rem;
  transition: all 500ms ease-in-out;
  background-position: center;
  background-size: cover;
}
.container .slide h3{
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  opacity: 0;
}
.slide.active{
  position: relative;
  flex: 10;
}
.slide.active h3{
  opacity: 1;
  transition: opacity 0.3s ease-in 0.4s;
}

JavaScript

const SLIDES = document.querySelectorAll('.slide')

for (const SLIDE of SLIDES){
	SLIDE.addEventListener('click', () => {
  	clearActiveClasses()
  	SLIDE.classList.add('active')
  })
}
function	clearActiveClasses() {
	SLIDES.forEach((SLIDE) => {
  	SLIDE.classList.remove('active')
  })
}