JSFiddle - React, Tailwind, and code Playground

by mreee

HTML

<div class="slider">
                                <div class="slide">
                                    <div class="slide-text">
                                        <h3>Ideation</h3>
                                        <p>We need to get to know you. Our goal is to to improve your business with our help. To do this, 
                                            we need to understand your biggest challenges and obtain a clear picture of the results you’d like to achieve. 
                                            This is also a great opportunity to understand how you would like your brand to be perceived and how we can best 
                                            connect you with your audience.</p> 
                                        <p>Additionally, you have a chance to get to know us! </p>
                                        <p>After this we’re off to the Label Creative labs to create a proposal outlining our strategy for the partnership.</p>
                                    </div>
                                </div>
                                <div class="slide">
                                    <div class="slide-text">
                                        <h3>Plan</h3>
                                        <p>Drumstick t-bone pork, shoulder ham chicken capicola pork chop meatloaf jerky short ribs brisket. T-bone beef ribs flank 
                                            short ribs tenderloin turkey sirloin short loin venison. Meatball pastrami rump, sausage tenderloin turkey fatback ham 
                                            hock capicola bacon chicken flank pork belly. Boudin tail meatball, tongue leberkas beef pork chop shankle swine hamburger 
                                            ribs. Boudin sirloin jerky brisket pastrami.</p>
                                    </div>
                                </div>
                                <div class="slide">
                                   ...

CSS

.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 26%;
  margin-top: -16px;
  outline: 0;
  width: 47px;
  height: 164px;
  z-index: 9999;
}
.bx-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 9;
}
.bx-wrapper .bx-next {
  right: 1%;
}
.bx-wrapper .bx-prev {
  left: 1%;
}
.bx-prev.disabled, .bx-next.disabled{
  visibility: hidden;
}
 /********  slides general style *******/
.slide {
  padding: 0 1% 0 0.8%;
}
.slide * {
  display: inline-block;
  vertical-align: top;
  font-family: Raleway;
}

.slide-text h3{
  font-size: 43px;
  font-family: Exo;
  margin-bottom: 0;
}
.slide img{
  height: auto;
}
/******** for indiv slides *******/

/******** for the slide nav *******/
.bx-pager {
  float: right;
  width: 50%;
}
.bx-pager-item {
  display: inline-block;
  margin-left: 6%;
}
.bx-pager-item:first-child {
  margin-left: 0;
}
.bx-pager .bx-pager-item a{
  font-size: 0px;
  text-indent: -9999px;
  z-index: 9999;
  position: relative;
  display: block;
  height: 50px;
  width: 50px;
  background-size: 30px;
  background-repeat: no-repeat;
  background-color: #E9E9EA;
  background-position: center;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border: 6px solid #E9E9EA;
  transition:border 0.2s;
  -webkit-transition:border 0.2s;
}

.bx-wrapper .bx-pager.bx-default-pager a.active, .blueylooey{
  border: 6px solid #77B7C6 !important;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover {
  border-color: #C7C7C9;
}

JavaScript

(function(t){var e={},n={mode:"horizontal",slideSelector:"",infiniteLoop:!0,hideControlOnEnd:!1,speed:500,easing:null,slideMargin:0,startSlide:0,randomStart:!1,captions:!1,ticker:!1,tickerHover:!1,adaptiveHeight:!1,adaptiveHeightSpeed:500,touchEnabled:!0,swipeThreshold:50,video:!1,useCSS:!0,pager:!0,pagerType:"full",pagerShortSeparator:" / ",pagerSelector:null,buildPager:null,pagerCustom:null,controls:!0,nextText:"Next",prevText:"Prev",nextSelector:null,prevSelector:null,autoControls:!1,startText:"Start",stopText:"Stop",autoControlsCombine:!1,autoControlsSelector:null,auto:!1,pause:4e3,autoStart:!0,autoDirection:"next",autoHover:!1,autoDelay:0,minSlides:1,maxSlides:1,moveSlides:0,slideWidth:0,onSliderLoad:function(){},onSlideBefore:function(){},onSlideAfter:function(){},onSlideNext:function(){},onSlidePrev:function(){}};t.fn.bxSlider=function(s){if(0!=this.length){if(this.length>1)return this.each(function(){t(this).bxSlider(s)}),this;var o={},r=this;e.el=this;var a=t(window).width(),l=t(window).height(),d=function(){o.settings=t.extend({},n,s),o.children=r.children(o.settings.slideSelector),o.children.length<o.settings.minSlides&&(o.settings.minSlides=o.children.length),o.children.length<o.settings.maxSlides&&(o.settings.maxSlides=o.children.length),o.settings.randomStart&&(o.settings.startSlide=Math.floor(Math.random()*o.children.length)),o.active={index:o.settings.startSlide},o.carousel=o.settings.minSlides>1||o.settings.maxSlides>1,o.minThreshold=o.settings.minSlides*o.settings.slideWidth+(o.settings.minSlides-1)*o.settings.slideMargin,o.maxThreshold=o.settings.maxSlides*o.settings.slideWidth+(o.settings.maxSlides-1)*o.settings.slideMargin,o.working=!1,o.controls={},o.interval=null,o.animProp="vertical"==o.settings.mode?"top":"left",o.usingCSS=o.settings.useCSS&&"fade"!=o.settings.mode&&function(){var t=document.createElement("div"),e=["WebkitPerspective","MozPerspective","OPerspective","msPerspective"];for(var i in e)if(void 0!==t.style[e[i]])return...