JSFiddle - React, Tailwind, and code Playground

by milenig

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Mukta" rel="stylesheet">


<div class="topnav">
  <div class="topnav-right">
    <a class="active" href="#home">Home</a>
    <a href="#news">Collections</a>
    <a href="#contact">Discover</a>
    <span class="social">
    <a href="#twitter"><i class="fab fa-twitter"></i></a>
    <a href="#fb"><i class="fab fa-facebook-f"></i></a>
    <a href="#insta"><i class="fab fa-instagram"></i></a>
    </span>
  </div>
</div>
<div class="main">
  <div class="header">
    <h1>
      Stylish ideas for your home
    </h1>
    <h2>
      Look for your inspiration on our site.<br> Fresh solutions every day.
    </h2>
  </div>

  <div class="side">

    <div class="txt">

    </div>
    <div class="boxes">
      <div class="first-line">
        <div id="f1">
          <div class="inside">
            <span></span>
            <h3>KITCHEN INTERIER</h3>
            <h4>
              Watch ideas!
            </h4>
          </div>
        </div>
      </div>
      <div class="second-line">
        <div id="f2">
          <div class="inside">
            <span></span>
            <h3>BEDROOM INTERIOR</h3>
            <h4>
              Watch ideas!
            </h4>
          </div>
        </div>
        <div id="f3">
          <div class="inside">
            <span></span>
            <h3>BATHROOM INTERIER</h3>
            <h4>
              Watch ideas!
            </h4>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="slidep">
    <!-- .slider>.slide*5{$} -->


    <div class="slider" style="--total: 5">
      <div id="slide-1" class="slide" style="--i:1" tabindex="0"><img...

CSS

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  
}

.topnav {
  overflow: hidden;
  z-index: 90;
  position: relative;
  width: 100%;
  background-color: rgba(0, 0, 0, .3);
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  min-width: 20px;
  transition: box-shadow 1s ease;
}

/* .topnav a:hover {
  background-color: #ddd;
  color: #2b2422;
  border-bottom: 1px solid #ddd;
} */

.topnav a:hover {
  box-shadow: inset 0 0 0 50px rgba(255, 255, 255, .2);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.topnav a.active {
  border-bottom: 1px solid gold;
}

.social {
  display: flex;
  width: 200px;
  background-color: #70665c;
}

.social a {
  flex: 1;
}

.topnav-right {
  float: right;
}

.main {
  margin-top: -49px;
  width: 100%;
  height: 100vh;
  flex-direction: row;
  display: flex;
}

.side {
  flex: 2;
  background: #70665c;
  display: flex;
  flex-direction: column;
}

.txt {
  flex: 1;
}

.header {
  position: absolute;
  z-index: 91;
  color: white;
  margin-left: 40px;
  margin-top: 100px;
  padding-left: 15px;
  border-left: 2px solid white;
  font-family: 'Mukta', sans-serif;
  letter-spacing: 1px;
}

.header h1 {
  font-size: 4vw;
  margin-top: -5px;
}

.header h2 {
  margin-top: -2vw;
  font-size: 80%;
  font-family: 'Montserrat', sans-serif;
}

.boxes {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.first-line {
  flex: 1;
  display: flex;
  flex-direction: row;
  width: 50%;
}

#f1 {
  background: #83726b;
  flex: 1;
  cursor: pointer;
  transition: box-shadow 1s ease;
}

#f1:hover {
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .4);
}

.second-line {
  flex: 1;
  display: flex;
  flex-direction: row;
}

#f2 {
  flex: 1;
  background: #7f636d;
  cursor: pointer;
  transition: box-shadow 1s ease;
}

#f2:hover {
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .4);
}

#f3 {
  flex: 1;
  background: #7d4850;
  cursor:...

JavaScript

var $slider = $(".slider"),
  $bullets = $(".bullets");

function calculateHeight() {
  var height = $(".slide.active").outerHeight();
  $slider.height(height);
}

$(window).resize(function() {
  calculateHeight();
  clearTimeout($.data(this, 'resizeTimer'));
});

function resetSlides() {
  $(".slide.inactive").removeClass("inactiveRight").removeClass("inactiveLeft");
}

function gotoSlide($activeSlide, $slide, className) {
  $activeSlide.removeClass("active").addClass("inactive " + className);
  $slide.removeClass("inactive").addClass("active");
  calculateHeight();
  resetBullets();
  setTimeout(resetSlides, 300);
}

$(".next").on("click", function() {
  var $activeSlide = $(".slide.active"),
    $nextSlide = $activeSlide.next(".slide").length != 0 ? $activeSlide.next(".slide") : $(".slide:first-child");
  console.log($nextSlide);
  gotoSlide($activeSlide, $nextSlide, "inactiveLeft");
});
$(".previous").on("click", function() {
  var $activeSlide = $(".slide.active"),
    $prevSlide = $activeSlide.prev(".slide").length != 0 ? $activeSlide.prev(".slide") : $(".slide:last-child");

  gotoSlide($activeSlide, $prevSlide, "inactiveRight");
});
$(document).on("click", ".bullet", function() {
  if ($(this).hasClass("active")) {
    return;
  }
  var $activeSlide = $(".slide.active");
  var currentIndex = $activeSlide.index();
  var targetIndex = $(this).index();
  console.log(currentIndex, targetIndex);
  var $theSlide = $(".slide:nth-child(" + (targetIndex + 1) + ")");
  gotoSlide($activeSlide, $theSlide, currentIndex > targetIndex ? "inactiveRight" : "inactiveLeft");
})

function addBullets() {
  var total = $(".slide").length,
    index = $(".slide.active").index();
  for (var i = 0; i < total; i++) {
    var $bullet = $("<div>").addClass("bullet");
    if (i == index) {
      $bullet.addClass("active");
    }
    $bullets.append($bullet);
  }
}

function resetBullets() {
  $(".bullet.active").removeClass("active");
  var index = $(".slide.active").index() + 1;
 ...