JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<header>
  <nav class="navbar">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

    <a class="navbar-brand mr-auto" href="#">master of none</a>

    <a class="nav-link text-muted" href="#">hire me</a>

    <a class="nav-link" href="#">07970232432</a>

    <div class="collapse navbar-collapse" id="navbar">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Hello</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Profile</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Interests</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Resume</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Stuff</a>
        </li>
      </ul>
    </div>

  </nav>
</header>

<main>

  <div id="page-slider">

    <div class="slide" data-page="01">
      <div class="container">
        <div class="row align-items-center">
          <div class="col">
            <header>
              Time wasted here 00:03
            </header>
            <main>
              <div...

SCSS

/* vars
-------------*/

$grey : darken(#fff,75);

@import "https://fonts.googleapis.com/css?family=Inconsolata";


/* type
-------------------------------------------------- */

HTML,
BODY {
  min-height: 100%;
  height: 100%;
  position: relative;
}

BODY {
  font-family: 'Inconsolata', monospace;
  font-size: .8em;
  background: #000;
  color: $grey;

  & :not(INPUT) {
    user-select: none;
  }
}

HEADER {
  position: absolute;
  width: 100%;
}

NAV {
  height: 78px;

  .navbar-toggler {
    padding: 23px 1rem;
    background: transparent;
    border-radius: 0;
    width: 60px;

    .icon-bar {
      height: 2px;
      display: block;
      background: #fff;
      transition: width .1s ease-in-out;

      &:first-child {
        width: 30px;
        margin-bottom: 10px;
      }

      &:last-child {
        width: 20px;
      }

    }

    &:hover .icon-bar {

      &:first-child {
        width: 20px;
      }

      &:last-child {
        width: 30px;
      }
    }

    &:focus {
      outline: 0;
    }
  }

  .navbar-brand {
    font-size: 0.9rem;
    @extend .nav-link;
  }

  HEADER & {

    .navbar-nav {
      display: block;

      .nav-item {
        display: block;
        float: left;
        clear: left;

        .nav-link {
          float: left;

        }
      }
    }
  }

  .nav-link {
    color: #fff;

    .fas, .fab {
      font-size: 1rem;
      position: relative;
      bottom: -1px;
    }
  }
}

MAIN {
  height: 100%;
  padding: 78px 0;

  .container {
    height: 100%;

    > .row {
      height: 100%;
    }
  }
}

FOOTER {
  position: absolute;
  width: 100%;
  bottom: 0;
}

#page-slider {
  height: 100%;

  .page-dots {
    position: relative;

    UL {
      padding: 0;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      margin-right: -15px;
      margin-left: -15px;

      LI {
        flex: 0 0 25%;
        max-width: 25%;
      }
    }

  }

  .slick-list {
    height: 100%;

    .slick-track {
      height:...

JavaScript

// page slider
$('#page-slider').slick({
  draggable: false,
  infinite: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  arrows: false,
  speed: 0,
  customPaging: function(slider, i) {
    var page_number = $(slider.$slides[i]).data('page');
    return '<button>.' + page_number + '</button>';
  },
  appendDots: $('.page-dots')

}).on('beforeChange', function(event, slick, currentSlide) {

  // add closed class
  $('#page-slider .slick-slide[data-slick-index="' + currentSlide + '"] .card').addClass('closed');

  setTimeout(function() {
    // delay by four seconds before changing to next slide (not working)
  }, 4000);

}).on('afterChange', function(event, slick, currentSlide) {

  // remove closed class
  $('#page-slider .slick-slide[data-slick-index="' + currentSlide + '"] .card').removeClass('closed');

});

// this sets a height in pixels for each .card
function page_heights() {
  $('#page-slider .card').each(function() {
    var h = $('.card-wrapper', this).outerHeight();
    $(this).css('height', h);
  });
}

// run page heights
page_heights();

// resize functions
$(window).resize(function() {

  // run page heights when resized
  page_heights();

});