JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<section class="carouselSection">
  <div class="fContainer triggerControllerContainer">
    <div class="fItem center cardSelect pad20 alignTop triggerController">
    <div class="clickServices clickSection clickSelected">Services</div>
    <div class="clickNTA clickSection">NTA</div>
    <div class="clickTraining clickSection">Training</div>
    </div>
  </div>
  <div class="carouselItem carousel1 carouselSelected">
    <div class="h2 whiteText padTop20 shift100 shadowText">Solutions to migrate your team to the cloud.</div>
    <div id="contTrigger1" class="fContainer">
      <div class="fItem x25 center cardSelect pad0 alignTop"><div id="carda1">
        <div class="cardImage padTop20">
          <img src="https://dummyimage.com/120x120/f5f5f5/822121.png&text=image+here" width="120" height="120">
        </div>
        <div class="h5 blackText centerText pad20 padBottom0">Amazon Web Services</div>
        <div class="lText centerText pad20 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div><div class="lightgreyLineThin"></div>
        <div class="sText pad10 f7faffBackground cursorPointer addChevronRight"><div>NavAir AWS GovCloud IaaS IL 2/4/5</div></div><div class="lightgreyLineThin"></div>
        <div class="sText pad10 f7faffBackground cursorPointer addChevronRight"><div>this is a test of long words so test the long word here</div></div><div class="lightgreyLineThin"></div>
        <div class="sText pad10 f7faffBackground cursorPointer addChevronRight"><div>AWS CloudTrail</div></div><div class="lightgreyLineThin"></div>
        <div class="blueText h5 bold cursorPointer addChevron pad20" onclick="window.location.href='/csm?id=cloud_cost_comparison';">Learn more</div>
      </div></div>
      <div class="fItem x25 center cardSelect pad0 alignTop"><div id="carda2">
        <div class="cardImage padTop20">
          <img src="https://dummyimage.com/120x120/f5f5f5/822121.png&text=image+here" width="120"...

CSS

/* ------------------------------------ fix sn */

.container-fluid .col-xs-1,
.container-fluid .col-sm-1,
.container-fluid .col-md-1,
.container-fluid .col-lg-1,
.container-fluid .col-xs-1,
.container-fluid .col-sm-1,
.container-fluid .col-md-1,
.container-fluid .col-lg-1,
.container-fluid .col-xs-2,
.container-fluid .col-sm-2,
.container-fluid .col-md-2,
.container-fluid .col-lg-2,
.container-fluid .col-xs-3,
.container-fluid .col-sm-3,
.container-fluid .col-md-3,
.container-fluid .col-lg-3,
.container-fluid .col-xs-4,
.container-fluid .col-sm-4,
.container-fluid .col-md-4,
.container-fluid .col-lg-4,
.container-fluid .col-xs-5,
.container-fluid .col-sm-5,
.container-fluid .col-md-5,
.container-fluid .col-lg-5,
.container-fluid .col-xs-6,
.container-fluid .col-sm-6,
.container-fluid .col-md-6,
.container-fluid .col-lg-6,
.container-fluid .col-xs-7,
.container-fluid .col-sm-7,
.container-fluid .col-md-7,
.container-fluid .col-lg-7,
.container-fluid .col-xs-8,
.container-fluid .col-sm-8,
.container-fluid .col-md-8,
.container-fluid .col-lg-8,
.container-fluid .col-xs-9,
.container-fluid .col-sm-9,
.container-fluid .col-md-9,
.container-fluid .col-lg-9,
.container-fluid .col-xs-10,
.container-fluid .col-sm-10,
.container-fluid .col-md-10,
.container-fluid .col-lg-10,
.container-fluid .col-xs-11,
.container-fluid .col-sm-11,
.container-fluid .col-md-11,
.container-fluid .col-lg-11,
.container-fluid .col-xs-12,
.container-fluid .col-sm-12,
.container-fluid .col-md-12,
.container-fluid .col-lg-12 {
    padding-left: 0;
    padding-right: 0;
}


a {cursor: pointer; color: #3775D8;}
a:active {opacity: .8;}

a.lightgreyText.hoverUnderline:hover {
    text-decoration: underline !important;
    text-decoration-color: white !important;
}

.cursorPointer {
	cursor: pointer;
}
/* ----------------------------------- page spacing */
.break5 {display: block; height: 5px;}
.break10 {display: block; height: 10px; flex-basis: 100%;}
.break15 {display: block; height: 15px;...

JavaScript

$(function() {

  $(".clickServices").click(function() { 
    $('.carouselItem').removeClass("carouselSelected"); 
    $('.clickSection').removeClass("clickSelected"); 
    $('.carousel1').addClass("carouselSelected");
    $('.clickServices').addClass("clickSelected");
  });
  
  $(".clickNTA").click(function() { 
    $('.carouselItem').removeClass("carouselSelected"); 
    $('.clickSection').removeClass("clickSelected"); 
    $('.carousel2').addClass("carouselSelected");
    $('.clickNTA').addClass("clickSelected");
  });
  
  $(".clickTraining").click(function() { 
    $('.carouselItem').removeClass("carouselSelected"); 
    $('.clickSection').removeClass("clickSelected"); 
    $('.carousel3').addClass("carouselSelected");
    $('.clickTraining').addClass("clickSelected");
  });
});

//console.log($('#carda1').height())
//var test = $('#cardb1').height();
//$('.x25').animate({height:test},400);