JSFiddle - React, Tailwind, and code Playground

by deadendstreet

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://idangero.us/swiper/dist/css/swiper.min.css&quot;"></script>
<script src="http://idangero.us/swiper/dist/js/swiper.min.js"></script>
<link rel="stylesheet" href="http://pbs.bento.storage.s3.amazonaws.com/hostedbento-prod/filer_public/FM90/css/style.css">


<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Amarillo College's FM90</title>
   <meta charset="utf-8"/>
      <meta name="viewport" content="user-scalable = yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><script type="text/javascript">window.NREUM||(NREUM={}),__nr_require=function(e,t,n){function r(n){if(!t[n]){var o=t[n]={exports:{}};e[n][0].call(o.exports,function(t){var o=e[n][1][t];return r(o||t)},o,o.exports)}return t[n].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<n.length;o++)r(n[o]);return r}({1:[function(e,t,n){function r(e,t){return function(){o(e,[(new Date).getTime()].concat(a(arguments)),null,t)}}var o=e("handle"),i=e(2),a=e(3);"undefined"==typeof window.newrelic&&(newrelic=NREUM);var u=["setPageViewName","setCustomAttribute","finished","addToTrace","inlineHit"],c=["addPageAction"],f="api-";i(u,function(e,t){newrelic[t]=r(f+t,"api")}),i(c,function(e,t){newrelic[t]=r(f+t)}),t.exports=newrelic,newrelic.noticeError=function(e){"string"==typeof e&&(e=new Error(e)),o("err",[e,(new Date).getTime()])}},{}],2:[function(e,t,n){function r(e,t){var n=[],r="",i=0;for(r in e)o.call(e,r)&&(n[i]=t(r,e[r]),i+=1);return n}var o=Object.prototype.hasOwnProperty;t.exports=r},{}],3:[function(e,t,n){function r(e,t,n){t||(t=0),"undefined"==typeof n&&(n=e?e.length:0);for(var r=-1,o=n-t||0,i=Array(0>o?0:o);++r<o;)i[r]=e[t+r];return i}t.exports=r},{}],ee:[function(e,t,n){function r(){}function o(e){function t(e){return e&&e instanceof r?e:e?u(e,a,i):i()}function n(n,r,o){e&&e(n,r,o);for(var...

CSS

#highlights {
	bottom: 200px;
		position: absolute !important;
		width: 100%;
		max-height: 200px;

}

 .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        max-height: 200px;
            font-size: 18px;
        color:#fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 40px 60px;
        
         Center slide text vertically 
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

     .swiper-slide .title {
        font-size: 41px;
        font-weight: 300;
    }
    .swiper-slide .subtitle {
        font-size: 21px;
    }
    .swiper-slide p {
        font-size: 50px;
        max-width: 400px;
        line-height: 1.3;
        color: red;
    }
    */

/** Feature Boxes **/

#highlights {
  width: 100%;
  max-height: 200px;
  background: rgba(0, 0, 0, 0.89);
  overflow: hidden;
  position: absolute;
  bottom: 200px;
}
#featured-boxes-light {
  width: 100%;
  max-height: 200px;
  background: rgba(255, 255, 255, 0.03)
}
#highlights .swiper-slide {
  position: relative;
  cursor: pointer; 
}
#highlights .title-top, #featured-boxes .title-bottom {
  background: rgba(0, 0, 0, 0.48);
  width: 100%;
  position: absolute;
  padding: 10px 20px 10px;
  color: white;
  font-size: 22px;
  text-align: left;
  /* margin-top: -36px; */
  left: 0%;
  /* margin-left: -35%; */
  line-height: 22px;
  bottom: 0px;
  height: auto;
  z-index: 1;
}
.swiper-wrapper {
  max-height: 200px;
}
.fb-header {
  display: block;
  font-size: 16px;
  color: rgb(255, 0, 0);
  font-weight: 600;
  letter-spacing: 2px;
 ...

JavaScript

var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 4,
        paginationClickable: true,
        spaceBetween: 0,


    });