JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<section class="carouselSection lightblueBackground">
  <div class="break40"></div>
  <h1 class="center centerText">Our Top Solutions</h1>
  <div class="break20"></div>
  <p class="center centerText mtext x70">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus massa nisi, faucibus a sapien ut, accumsan porttitor magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <div class="carouselContainer carouselSheet1">
    <div class="carouselControl carouselControlLeft centerText greyText"> &lsaquo;</div>
    <div class="carouselControl carouselControlRight centerText greyText"> &rsaquo;</div>
    <div class="fContainer carouselOverflow">
      <div class="fItem x5 center"></div>
      <div class="fItem x10 center cardSelect">logo<h4>Solution #1</h4>
        <span class="h1 tealText">2,048</span><span class="h5"> GB of Storage</span>
        <div class="lightgreyLine"></div>
        <span class="lText">Key Features</span><div class="break10"></div>
        <span class="lText tealText">&check; </span><span class="mText shift8"> 32GB of RAM</span><div class="break10"></div>
        <span class="lText tealText">&check; </span><span class="mText shift8"> 4 Instances/VMs</span><div class="break10"></div>
        <span class="lText tealText">&check; </span><span class="mText shift8"> 10 vCPU</span>
      </div>
      <div class="fItem x10 center cardSelect">logo<h4>Solution #2</h4>
        <span class="h1 tealText">2,048</span><span class="h5"> GB of Storage</span>
        <div class="lightgreyLine"></div>
        <span class="lText">Key Features</span><div class="break10"></div>
        <span class="lText tealText">&check; </span><span class="mText shift8"> 32GB of RAM</span><div class="break10"></div>
        <span class="lText tealText">&check; </span><span class="mText shift8"> 4 Instances/VMs</span><div class="break10"></div>
        <span class="lText tealText">&check; </span><span class="mText shift8"> 10 vCPU</span>
      </div>
     ...

CSS

.carouselContainer {
    width: 100%;
    overflow: hidden;
}
.carouselOverflow {
    width: 200%;
    transition: .5s;
    transform: translateX(0%);
}
.carouselControl {
    position: absolute;
    width: 140px;
    height: 400px;
    z-index: 2;
    line-height: 350px;
    font-size: 60px;
    user-select: none;
}
.carouselControlLeft {
  background: linear-gradient(to left, transparent 25%, #EBF1FB);
}
.carouselControlRight {
  right: 4px;
  background: linear-gradient(to right, transparent 25%, #EBF1FB);
}
.carouselControlRight, .carouselControlLeft {
  transition: .1s;
}

.carouselSheet1 .carouselControlRight:hover {transform: translatex(4px)}
.carouselSheet2 .carouselControlLeft:hover {transform: translatex(-4px)}

.carouselContainer.carouselSheet1 > .carouselOverflow {
    transform: translateX(0%);
}
.carouselContainer.carouselSheet2 > .carouselControlLeft {
  color: #3775d8;
  cursor: pointer;
}
.carouselContainer.carouselSheet2 > .carouselOverflow {
    transform: translateX(-50%);
}
.carouselContainer.carouselSheet1 > .carouselControlRight {
  color: #3775d8;
  cursor: pointer;
}

/* ----------------------------------- page spacing */
.break5 {display: block; height: 5px;}
.break10 {display: block; height: 10px;}
.break20 {display: block; height: 20px;}
.break40 {display: block; height: 40px;}
.break60 {display: block; height: 60px;}

.shift4 {padding-left: 4px;}
.shift8 {padding-left: 8px;}
.shift12 {padding-left: 12px;}
.shift16 {padding-left: 16px;}

.fContainer {
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: flex-start;
}
.fItem {
    padding: 5px;
    margin: 0;
    align-self: center;
    align-items: flex-start;
}

.center {
    justify-content: center;
    align-items: center;
    margin: auto;
}

.centerText {
    text-align: center;
}

.centerButton {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    text-align:...

JavaScript

$(".carouselControlLeft").click(function(){
  $(".carouselContainer").removeClass("carouselSheet2").addClass("carouselSheet1");
});

$(".carouselControlRight").click(function(){
  $(".carouselContainer").removeClass("carouselSheet1").addClass("carouselSheet2");
});