JSFiddle - React, Tailwind, and code Playground

by sungsoonz

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<section id="persona">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <h1>
          Identify your growth levers
        </h1>
        <p>
          Automate the reporting of MRR, ARR, churn, LTV and more, so your team can spend their time analyzing, segmenting and optimizing for growth from one single source of truth.
        </p>
      </div>
      <div class="col-sm-7 offset-sm-1">
        <div class="grid">
          <a class="item">
            <i>1</i>
            <p>
              One sentence highlighting the thing we love the most.
            </p>
            <button>for Founders and CEOs</button>
          </a>
          <a class="item">
            <i>2</i>
            <p>
              One sentence highlighting the thing we love the most.
            </p>
            <button>for Go-to-Market Leaders</button>
          </a>
          <a class="item">
            <i>3</i>
            <p>
              One sentence highlighting the thing we love the most.
            </p>
            <button>for Data Engineers</button>
          </a>
          <a class="item">
            <i>4</i>
            <p>
              One sentence highlighting the thing we love the most.
            </p>
            <button>for Financial Analysts</button>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="data">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h1>
          Built to fit seamlessly into your tech stack
        </h1>
        <p>
          Longer subtitle targeting the Data Engineering and Analyst personas explaining that ChartMogul sits within your revenue data stack to normalize data coming from billing platforms, which can be enriched with customer attributes, then piped further into key data destinations depending on your tech stack.
       ...

CSS

body {
  /* background: #dbfdff; */
}

a {
  text-decoration: none;
  color: initial;
}

h1 {
  margin-top: 5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  font-size: 50px;
}

section {
  padding-top: 4rem;
  padding-bottom: 4rem;
  margin-bottom: 4rem;
}

#persona {
  background: radial-gradient(ellipse at 70% 50%, #b7bdff, #b6d9ff, transparent 70%, #fff);
}

#data {
  background: #091121;
}

#data h1 {
  color: #fff;
  text-align: center;
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
}

#data p {
  color: #CFDAFF;
  text-align: center;
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}

#data h1 {
  background: linear-gradient(45deg, #fff 50%, #00fff4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



#persona h1 {
  background: linear-gradient(45deg, #000, #001bff 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2rem;
}

.item {
  display: block;
  background: #fff;
  border-radius: 10px;
  padding: 1.5rem;
  height: 240px;
  transition: all .2s linear;
  cursor: pointer;
}

.item:hover {
  filter: drop-shadow(0px 2px 14px #78acff);
}

.item:nth-child(1) button {
  color: #3828FF;
}

.item:nth-child(2) button {
  color: #F025F4;
}

.item:nth-child(3) button {
  color: #00A3FF;
}

.item:nth-child(4) button {
  color: #00C27C;
}

.item button {
  background: none;
  border: none;
  text-align: left;
  font-weight: 600;
}

i {
  width: 80px;
  height: 80px;
  display: block;
}

.tab-container {
  margin-top: 4rem;
  text-align: center;
}

.tab {
  padding: 20px;
  display: none;
  color: #fff;
}

.tab-content {
  min-height: 200px;
}

.tab.active {
  display: block;
}

.tab button {
  background: #0057FF;
  border: none;
  color: #fff;
  border-radius: 4px;
  padding: 1rem 2rem;
  
}

.nav-tab {
  display: inline-block;
  padding: 20px 20px 14px;
  color: #CFDAFF;
  cursor: pointer;
  border-bottom: 2px...

JavaScript

'use strict';

function Tabs() {
  let bindAll = function() {
    let menuElements = document.querySelectorAll('[data-tab]');
    for(let i = 0; i < menuElements.length ; i++) {
      menuElements[i].addEventListener('click', change, false);
    }
  }

  let clear = function() {
    let menuElements = document.querySelectorAll('[data-tab]');
    for(let i = 0; i < menuElements.length ; i++) {
      menuElements[i].classList.remove('active');
      let id = menuElements[i].getAttribute('data-tab');
      document.getElementById(id).classList.remove('active');
    }
  }

  let change = function(e) {
    clear();
    e.target.classList.add('active');
    let id = e.currentTarget.getAttribute('data-tab');
    document.getElementById(id).classList.add('active');
    
  }

  bindAll();
}

let connectTabs = new Tabs();