JSFiddle - React, Tailwind, and code Playground

by akash_payne

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css">
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">

  <div class="btn-group mr-2">
    <a class="navbar-brand" href="/">
      <img src="<?php /*echo get_template_directory_uri(); */ ?>/images/logo.png"
           alt="Award Winning Recruitment Platform" width="100%">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

  </div>

  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a target="_blank" class="nav-link" href="/?from_url=nav"> 
        <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item dropdown show">
        <a class="nav-link dropdown-toggle" href="/about-us/?from_url=nav" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">About Us</a>
        <div class="dropdown-menu" aria-labelledby="dropdown04">
          <a target="_blank" class="dropdown-item" href="/about-us/how-it-works/?from_url=nav">How SRO
            works</a>
          <a target="_blank" class="dropdown-item"...

CSS

header {
  position: relative;
  background-color: white;
  height: 75vh;
  min-height: 25rem;
  width: 100%;
  /** overflow: hidden;**/
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .container {
  position: relative;
  z-index: 2;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 125%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

@media (pointer: coarse) and (hover: none) {
  header {
    background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
  }
  header video {
    display: none;
  }
}

/* quick reset and base styles */

* {
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  font-family: helvetica, arial, sans-serif;
}

/* relevant styles */

.img__wrap {
  position: relative;
  height: 100%;
  width: 257px;
}

.img__description_layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgb(255, 255, 255);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 0 0%;
  flex: 1 0 0%;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-right: 1px;
  margin-bottom: 0;
  border-radius: 5px;
  margin-left: 1px;
  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description_layer {
  visibility: visible;
  opacity: 1;
}

.img__description {
  transition: .2s;
  transform: translateY(1em);
}

.img__wrap:hover .img__description {
  transform: translateY(0);
}

.carousel-padding-header {
  padding-top: 5vh;
}

.carousel-inner-pcustom...

JavaScript

(function($) {
  "use strict";
  // Auto-scroll
  $('#cardCarousel').carousel({
    interval: 5000
  });

  // Control buttons
  $('.next').click(function() {
    $('.carousel').carousel('next');
    return false;
  });
  $('.prev').click(function() {
    $('.carousel').carousel('prev');
    return false;
  });

  // On carousel scroll
  $("#cardCarousel").on("slide.bs.carousel", function(e) {
    var $e = $(e.relatedTarget);
    var idx = $e.index();
    var itemsPerSlide = 3;
    var totalItems = $(".carousel-item").length;
    if (idx >= totalItems - (itemsPerSlide - 1)) {
      var it = itemsPerSlide -
        (totalItems - idx);
      for (var i = 0; i < it; i++) {
        // append slides to end 
        if (e.direction == "left") {
          $(
            ".carousel-item").eq(i).appendTo(".carousel-inner");
        } else {
          $(".carousel-item").eq(0).appendTo(".carousel-inner");
        }
      }
    }
  });
})
(jQuery);

$(document).ready(function() {
  $('.quotes').slick({
    dots: true,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 6000,
    speed: 800,
    slidesToShow: 1,
    adaptiveHeight: true
  });
  $('.customer-logos').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1000,
    arrows: false,
    dots: false,
    pauseOnHover: false,
    responsive: [{
      breakpoint: 768,
      settings: {
        slidesToShow: 2
      }
    }, {
      breakpoint: 520,
      settings: {
        slidesToShow: 1
      }
    }]
  });
});

/* 4 carousel example with jumbotron */
$('#carousel-4').carousel({
  interval: 10000,
  wrap: true,
  keyboard: true
});

/* 10 carousel example */
$('#carousel-10').carousel({
  interval: 2000,
  wrap: true,
  keyboard: true
});

/* 11 carousel example */
$('#carousel-11').carousel({
  interval: 4000,
  wrap: true,
  keyboard: true
});

/* 12 carousel example */
$('#carousel-12').carousel({
  interval: 6000,
  wrap: true,
  keyboard: true
});

/* 13 carousel...