JSFiddle - React, Tailwind, and code Playground

by Chintan Upadhayay

HTML

<section>
    <div class="tabs-demo-style">
      <nav>
        <ul>
          <li class="tab-demo-current"> <a href="#section-shape-1" data-tab="section-shape-1">Design 1</a></li>
          <li> <a href="#section-shape-2" data-tab="section-shape-2">Specs 2</a></li>
          <li> <a href="#section-shape-2" data-tab="section-shape-3">Price</a></li>
          <li> <a href="#section-shape-2" data-tab="section-shape-4">Release Date</a> </li>
        </ul>
      </nav>

      <div class="sh-demo-content-wrap">
        <section class="sh-demo-content current-demo" data-section="section-shape-1">
        <div class="row">
        	<div class="col-sm-6">
        		 <h4 class="sh-demo-title">iPhone LiquidMetal Concept</h4>
                 <p class="sh-demo-intro">At this stage no official price has been unveiled but we expect the iPhone 5 to be the same price than the iPhone 4S when it was released. There are also some romours claiming 					that iPhone 5 well be in the range of $699 and $899.</p>
        	</div>
            <div class="col-sm-6">
            	<a class="sh-demo-video icon-play">
                	<img class="features-xs-img" alt="storefront shopping cart" src="https://www.cs-cart.com/design/themes/cs-cart.com/media/images/addons/static_pages/cscart/features/design_2.jpg" height="300">
                </a>
        		<button class="sh-demo-btn">View demo</button>
        	</div>
            <div class="clearfix"></div>
        </div>
        </section>

        <section class="sh-demo-content" data-section="section-shape-2">
        	<div class="row">.
            <div class="col-sm-6">
                  <a class="sh-demo-video icon-play">
                	<img class="features-xs-img" alt="storefront shopping cart" src="https://www.cs-cart.com/design/themes/cs-cart.com/media/images/addons/static_pages/cscart/features/design_2.jpg" height="300">
                </a>
        		<button class="sh-demo-btn">View demo</button>
              </div>
             ...

CSS

.tabs-demo-style {
   height: 100%;
   margin: auto;
   color: #333;
 }
 
 .tabs-demo-style ul {
   float: left;
   width: 210px;
   display: block;
   position: relative;
   top: 0;
   border: 1px solid #DDD;
   border-right-width: 0;
   margin: auto 0;
   padding: 0;
 }
 
 .tabs-demo-style ul li.tab-demo-current {
   color: black;
   border-right: none;
   z-index: 10;
   background: #fff;
   position: relative;
   /* moz-box-shadow: inset 0 0 35px 5px #fafbfd;
                -webkit-box-shadow: inset 0 0 35px 5px #fafbfd;
                box-shadow: inset 0 0 35px 5px #fafbfd;*/
 }
 
 .tabs-demo-style .sh-demo-content {
   margin-left: 210px;
   border: 1px solid #ddd;
   background-color: #FFF;
   min-height: 400px;
   position: relative;
   z-index: 9;
   /*  moz-box-shadow: inset 0 0 35px 5px #fafbfd;
                -webkit-box-shadow: inset 0 0 35px 5px #fafbfd;
                box-shadow: inset 0 0 35px 5px #fafbfd;*/
   display: none;
   padding: 25px;
   background-color: #fff;
 }
 
 .tabs-demo-style .sh-demo-content.current-demo {
   display: block;
 }
 
 .tabs-demo-style ul li {
   list-style-type: none;
   display: block;
   text-shadow: 0px 1px 1px #F2F1F0;
   font-size: 1.11em;
   position: relative;
   border-right-width: 0;
   border-bottom: 1px solid #DDD;
   margin: auto;
   padding: 0;
   background: whiteSmoke;
 }
 
 .tabs-demo-style nav li a {
   position: relative;
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   line-height: 2.5;
   margin: 0;
   padding: 20px;
   font-weight: 500;
   text-decoration: none;
    color: #74777b;
 }
 
 .tabs-demo-style nav li.tab-demo-current {
   border-right: none;
   z-index: 10;
   background-color: #fff;
   position: relative;
 }
 
 .tabs-demo-style nav li.tab-demo-current a {
   color: #74777b;
 }
 
 .tabs-demo-style .sh-demo-content-wrap {
   background: #fff;
 }
 .sh-demo-content .sh-demo-title{
    margin: 0 0 15px;
    font-size: 38px;
    line-height:...

JavaScript

$("body").delegate(".tabs-demo-style ul li a", "click", function(e) {
  		e.preventDefault();
      $('.tab-demo-current').removeClass('tab-demo-current');
      $(this).parent().addClass('tab-demo-current');
      var dataTab = $(this).attr('data-tab');

      $('.current-demo').removeClass('current-demo');
      $(".sh-demo-content-wrap .sh-demo-content[data-section=" + dataTab + "]").addClass('current-demo');
	});