JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="break20"></div>
<h1 class="center">Our Top Solutions</h1>
<p class="center 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="break40"></div>

<div class="carouselContainer carouselSheet1">
  <div class="carouselControl carouselControlLeft center greyText"> &lsaquo; </div>
  <div class="carouselControl carouselControlRight center greyText"> &rsaquo; </div>
  <div class="fContainer carouselOverflow">
    <div class="fItem x5 center"></div>
    <div class="fItem x12 center">logo<h3>Solution #1</h3>Lorem ipsum<div class="centerButton"><button class="outline">View Details</button></div></div>
    <div class="fItem x12 center">logo<h3>Solution #2</h3>Lorem ipsum<div class="centerButton"><button class="outline">View Details</button></div></div>
    <div class="fItem x12 center">logo<h3>Solution #3</h3>Lorem ipsum.<div class="centerButton"><button class="outline">View Details</button></div></div>
    <div class="fItem x5 center"></div>
    <div class="fItem x5 center"></div>
    <div class="fItem x12 center">logo<h3>Solution #4</h3>Lorem ipsum.<div class="centerButton"><button class="outline">View Details</button></div></div>
    <div class="fItem x12 center">logo<h3>Solution #5</h3>Lorem ipsum.<div class="centerButton"><button class="outline">View Details</button></div></div>
    <div class="fItem x12 center">logo<h3>Solution #6</h3>Lorem ipsum.<div class="centerButton"><button class="outline">View Details</button></div></div>
    <div class="fItem x5 center"></div>
  </div>
  <div class="break40"></div>

  <div class="centerButton"><button class="solid">View All Solutions</button></div>

CSS

.carouselContainer {
    width: 100%;
    overflow: hidden;
}
.carouselOverflow {
    width: 200%;
    transition: .5s;
    transform: translateX(0%);
}
.carouselControl {
    position: absolute;
    width: 100px;
    height: 280px;
    z-index: 2;
    line-height: 200px;
    font-size: 60px;
    user-select: none;
}
.carouselControlLeft {
  background: linear-gradient(to left, transparent 25%, white);
}
.carouselControlRight {
  right: 0;
  background: linear-gradient(to right, transparent 25%, white);
}
.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 */
.break10 {display: block; height: 10px;}
.break20 {display: block; height: 20px;}
.break40 {display: block; height: 40px;}
.break60 {display: block; height: 60px;}

.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;
    text-align: center;
}

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

.y100 {height: 100%;}
.y80 {height: 80%;}
.y75 {height: 75%;}
.y50 {height: 50%;}
.y33 {height: 33.3%;}
.y25 {height: 25%;}
.y20 {height: 20%;}
.y17 {height: 16.6%;}
.y10 {height: 10%;}

.x100 {width: calc(100% - 20px);}
.x90 {width: calc(90% - 20px);}
.x80 {width: calc(80% - 20px);}
.x75 {width: calc(75% - 20px);}
.x70 {width: calc(70% - 20px);}
.x50 {width: calc(50% - 20px);}
.x33...

JavaScript

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

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