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>
<div class="container">

  <div class="row">
    <div class="col-4">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.  
      </div>
    </div>
    <div class="col-4">
      <div class="card card-body">
        Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>  
    </div>
    <div class="col-4">
      <div class="card card-body">
        Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>

</div>

SCSS

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

BODY {
  background: url('https://i.imgur.com/gywUcTN.png');
}

.container {
  padding: 30px;
}

.card {
  background: red;
  border: {
    radius: 0;
    width: 0;
  }
  
  /* mask css */
  
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 calc(100% - 30px);
  -webkit-mask-size: 100% 30px;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(#000000, 1)), to(rgba(#000000, 0)));
  -webkit-mask-composite: initial;
  
}

.card-body {
  padding: 30px;
}

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');

  // delay by 1 second before changing to next slide (not working)
  setTimeout(function() {
    // got nothing but time - 1 second
  }, 1000);

}).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();

});