JSFiddle - React, Tailwind, and code Playground

by lunar1a

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
  
  <ul class="nav nav-tabs c-tabs__wrapper" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active tab-label" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link tab-label" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link tab-label" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
  
  
  
  
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>

CSS

.c-tabs {
    font-size: 1.5rem;
}

.c-tabs__wrapper{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.c-tabs__wrapper .c-tabs__item,
.c-tabs__wrapper input{
    display: none;
}
.c-tabs__item{
    width: 100%;
    max-width: 100%;
    padding: 3.75rem 0;
    order: 1;
}
.tab-label{
    background-color: transparent;
    padding: 1.5rem;
    text-align: center;
    flex-grow: 1;
    color: #BDBDBD;
    border-bottom: 3px solid #BDBDBD;
}

.c-tabs__wrapper input:checked + .tab-label{
    border-bottom: 3px solid #F7931D;
    color: #412300;
}
.c-tabs__wrapper input:checked + .tab-label + .c-tabs__item{
    display: block;
}

.c-tabs__item-header {
    display: grid;
    grid-template-columns: 1fr 2fr;
}
.c-tabs__text {
    align-self: center;
}
.c-tabs__text-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}
.c-tabs__text-sub {
    font-weight: 400;
}
.c-tabs__item-bottom {
    margin-top: 3.75rem;
    display: grid;
    grid-template-columns: 2fr 1fr;
}
.c-tabs__left {
    display: flex;
    flex-wrap: wrap;
}
.c-tabs__left-item {
    font-size: 1.25rem;
    flex: 0 0 50%;
}
.c-tabs__left-links {
    display: flex;
    flex-direction: column;
}
.c-tabs__left-item-link {
    font-weight: 400;
    font-size: 1.25rem;
}
.c-tabs__left-item-link:not(:last-child) {
    margin-bottom: .75rem;
}
.c-tabs__left-item-title {
    font-weight: 600;
    margin-bottom: 1rem;
}

.c-tabs__right {
    background: #FAF7F1;
    border-radius: 1rem;   
    padding: 2rem;
    font-size: 1.25rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}
.c-tabs__right-title {
    font-weight: 600;
    margin-bottom: 1.5rem;
}
.c-tabs__right-item:not(:last-child) {
    margin-bottom: 1.8rem;
}
.c-tabs__right-num {
    font-size: 2.25rem;
}