JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="seatsLeft">
  <div class="leftPane leftSection1 leftSectionOpen"> 
    <div><h3 class="leftPaneTitle">Onboard</h3>test
    </div>
  </div>
  <div class="leftPane leftSection2"> 
    <div><h3 class="leftPaneTitle">Tenure</h3>test
    </div>
  </div>
  <div class="leftPane leftSection3"> 
    <div><h3 class="leftPaneTitle">Offboard</h3>test
    </div>
  </div>
</div>

CSS

.seatsLeft {
    height: 220px;
    width: calc(100% - 16px);
    display: block;
    display: inline-block;
    vertical-align: top;
    position: absolute;
    color: white;
    font-family: kalinga;
}
.leftPane {
  width: 100px;
  height: calc(100% - 4px);
  cursor: pointer;
  margin: 2px;
  transition: .3s;
  overflow: hidden;
  display: inline-block;
  box-shadow: inset 0 0 30px #444;
  background-size:100%;
}
.leftPane:hover {
  box-shadow: inset 0 0 30px #fff;
}
    
.leftSection1 {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(22,105,91,1), 
      rgba(22,105,91,1)
    ),
    /* bottom, image */
    url(http://www.klove.com/uploadedImages/K-LOVE_New/Content/Family/Articles/New%20Believer%20Eternity.jpg); 
  background-size: 100% auto;
  background-position: 65%;
}
.leftSection2 {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(49,116,129,1), 
      rgba(49,116,129,1)
    ),
    /* bottom, image */
    url(http://www.klove.com/uploadedImages/K-LOVE_New/Content/Family/Articles/New%20Believer%20Eternity.jpg); 
  background-size: 100% auto;
  background-position: 65%;
}
.leftSection3 {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(129,49,49,1), 
      rgba(129,49,49,1)
    ),
    /* bottom, image */
    url(http://www.klove.com/uploadedImages/K-LOVE_New/Content/Family/Articles/New%20Believer%20Eternity.jpg); 
  background-size: 100% auto;
  background-position: 65%;
}
.leftSection1.leftSectionOpen {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(22,105,91,.95), 
      rgba(22,105,91,.95)
    ),
    /* bottom, image */
    url(http://www.klove.com/uploadedImages/K-LOVE_New/Content/Family/Articles/New%20Believer%20Eternity.jpg); 
  background-size: 100% auto;
  background-position: 65%;
}
.leftSection2.leftSectionOpen {
  background: 
    /* top,...

JavaScript

$(document).ready(function() {
    $('.leftSection1').click(function() {
        $('.leftSection1').addClass('leftSectionOpen');
        $('.leftSection2').removeClass('leftSectionOpen');
        $('.leftSection3').removeClass('leftSectionOpen');
    });
    $('.leftSection2').click(function() {
        $('.leftSection2').addClass('leftSectionOpen');
        $('.leftSection1').removeClass('leftSectionOpen');
        $('.leftSection3').removeClass('leftSectionOpen');
    });
    $('.leftSection3').click(function() {
        $('.leftSection3').addClass('leftSectionOpen');
        $('.leftSection1').removeClass('leftSectionOpen');
        $('.leftSection2').removeClass('leftSectionOpen');
    });
});