JSFiddle - React, Tailwind, and code Playground

by justinwinter

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Bootstrap CSS Linked in Settings -->

<div class="container-fluid container-a">
  <div class="row">
    <div class="col-sm-12 col-md-10 col-lg-6 col-a">
            
      <ul class="box-tabs">
        <li class="tab active"><a href="#resume">Resume</a></li>
        <li class="tab"><a href="#portfolio">Portfolio</a></li>
      </ul>
      
      <div class="box-content">
        <div class="col-content" id="resume">   
          <img src="https://i.imgur.com/vVCcehm.png" alt="resume placeholder">
        </div>
        <div class="col-content hideBlock" id="portfolio"> 
          <img src="https://i.imgur.com/GVceez8.png" alt="portfolio placeholder"> 
        </div>
      </div>

    </div>
  </div>
</div>

<!-- jQuery Linked in Settings  -->

<!-- Bootstrap js Linked in Settings -->

CSS

@import url(https://fonts.googleapis.com/css?family=Work+Sans:200,300,400,500);

*{font-family:'Work Sans', sans-serif;}

*:focus{outline:1px dotted rgba(0,0,0,0.3) !important}

h1, h2, h3, label {font-weight:400; margin:0;}
p, a {font-weight:300; margin:0; text-decoration: none;}

h1, h2, h3, p, label {color: #555;}
a {color:#537CB4; text-decoration:none;}
a:hover {color:#4180D7; text-decoration:none;}

h1 {font-size:32px;}
h2 {font-size:22px;}
h3 {font-size:18px;}
p, a {font-size:14px;}

body{background:#f5f5f5; min-height:102vh}

.container-a {
  position:relative;
  overflow:hidden !important;
  padding: 30px; 
  border:1px solid #aaa;}

.col-a {
  margin:0 auto;
}

/* ---------------------------------- */
/* -------- Main Pen Content -------- */
/* ---------------------------------- */

/* --- Tab Switcher Styles --- */
.box-tabs {
  display:flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.box-tabs li {
  position:relative;
  width:25%;
}

.box-tabs li a{
  position:relative;
  display:inline-block;
  z-index:1;
  width: 100%;
  height: 50px;
  line-height:50px;
  color: #fff;
  font-size: 20px;
  font-weight:400;
  text-align: center;
  text-decoration: none;
  background: rgba(100, 100, 100, 1);
   transition: .8s ease background;
}

.box-tabs li.active a {
  background: rgba(56, 95, 148, 1.0);
   transition:.3s ease background;
}

.box-tabs li a:after{
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border-style:solid;
  border-width:25px 20px 25px 20px;
  border-top-color: transparent;
  border-bottom-color: transparent;
   transition: .8s ease border-color;
}

.box-tabs li:first-child a:after {
  left: -20px;
  border-left:none;
  border-right-color: rgba(100, 100, 100, 1);
}

.box-tabs li:last-child a:after {
  right: -20px;
  border-right:none;
  border-left-color: rgba(100, 100, 100, 1);
}

/* --- Tab Active Styles --- */
.box-tabs li.active a:after{
   transition:.3s ease...

JavaScript

$('.tab a').on('click', function (e) {
        
  e.preventDefault();
  
  $(this).parent().addClass('active');
  $(this).parent().siblings().removeClass('active');
    
  target = $(this).attr('href');
   $(target).siblings().addClass('hideBlock').delay(300).fadeOut(300);
   $(target).fadeIn(200).removeClass('hideBlock');
});