JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">
<div id="container">
    <div id="dragon_name">
        <h1 class="dragon_name">Dragon's Name</h1>
    </div>
  
    <div id="tab_button_container">
        <div class="tab_button active" data-tab='profile'>
            <i class="fa fa-user"></i>
        </div>
        <div class="tab_button" data-tab='payment'>
            <i class="fa fa-credit-card"></i>
        </div>
        <div class="tab_button" data-tab='subscription'>
            <i class="fa fa-tv"></i>
        </div>
        <div class="tab_button" data-tab='privacy'>
            <i class="fa fa-tasks"></i>
        </div>
        <div class="tab_button" data-tab='settings'>
            <i class="fa fa-cog"></i>
        </div>
    </div>
    <div id="tab_content_container">
    
        <div class="tab_content" id="tab_profile">
            <h1>Personal Info</h1>
            <h2>Full Name</h2>
            <p>Julie Park <button class="btn">update</button></p>
            <h2>Birthday</h2>
            <p>July 21</p>
            <h2>Gender</h2>
            <p>Female</p>
            <h2>Email</h2>
            <p>[email protected] <button class="btn">update</button></p>
            <h2>Password </h2>
            <p>••••••• <button class="btn">Change</button></p>
        </div>
    
        <div class="tab_content hidden" id="tab_payment">
            <h1>Payment Info</h1>
            <h2>Payment Method</h2>
            <p>Mastercard •••• •••• •••• 0000 <button class="btn">update</button></p>
            <h2>Billing Address</h2>
            <p>1234 Example Ave | Seattle, WA <button class="btn">change</button></p>
            <h2>Zipcode</h2>
            <p>999000</p>
            <h2>Billing History</h2>
            <p>2018<button class="btn">view</button></p>
            <h2>Redeem Gift Subscription </h2>
            <p><input type="text" placeholder="Enter Gift Code"> <button class="btn">Redeem</button></p>
         ...

CSS

:root {
    --logo: #3DBB3D;
    --gray: #777777;
    --black: #070707;
    --green: #7ED386;
    --aqua: #3FB6A8;
    --white: #FFFFFF;
    --hulu: 'Nunito Sans', sans-serif;
    --heading: 'Montserrat', sans-serif;
    --body: 'Roboto', sans-serif;
}


@import url('https://fonts.googleapis.com/css?family=Nunito:400,900|Montserrat|Roboto');


body {
  background: linear-gradient(to right, var(--aqua), var(--green));
}

#container {
  background: var(--white);
  width: 800px;
  height: 450px;
  margin: 0 auto;
  position: relative;
  margin-top: 10%;
  box-shadow: 2px 5px 20px rgba(var(--gray), 0.5);
}

#dragon_name .dragon_name {
  float: right;
  margin-right: 12px;
  margin-top: 12px;
  font-family: var(--hulu);
  color: var(--logo);
  font-weight: 900;
  font-size: 1.5em;
  letter-spacing: 1px;
}


#tab_button_container {
  float: left;
  top: -3%;
  left: 3%;
  position: absolute;
  width: 60px;
  height: 106%;
  background: skyblue;
  box-shadow: 3px 3px 10px rgba(var(--gray), 0.5);
  border-left: 4px solid gold;
  border-right: 4px solid gold;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

#tab_button_container .tab_button {
  list-style: none;
  padding: 35px;
  color: gold;
  font-size: 1.1em;
  display: block;
  transition: 0.3s;
  
  &:first-child {
    margin-top: 7px;
  }
}

#tab_button_container .active {
  color: white;
}

#tab_button_container .tab_button:hover {
  color: white;
  cursor: pointer;
  transition: 0.2s;
}

#tab_content_container {
  float: right;
  width: 60%;
  height: 100%;
}

#tab_content_container .tab_content {
  position: absolute;
  width: 70%;
}

h1 {
  font-family: var(--heading);
  color: var(--green);
  font-size: 1em;
  margin-top: 40px;
  margin-bottom: 35px;
}

h2 {
  color: var(--gray);
  font-family: var(--body);
  width: 80%;
  text-transform: uppercase;
  font-size: 8px;
  letter-spacing: 1px;
  margin-left: 2px;
}

p {
  border-width: 1px;
  border-style: solid;
  border-image:...

JavaScript

$('#tab_button_container .tab_button').click(function(e) {
  $('#tab_button_container .tab_button').removeClass('active');
  $(this).addClass('active');
  
  let tab = $(this).data("tab");
  
  $('#tab_content_container .tab_content').addClass('hidden');
  $("#tab_content_container #tab_" + tab).removeClass('hidden');
});