JSFiddle - React, Tailwind, and code Playground

by Tyler Brown

HTML

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Pricing Test</title>
    <meta charSet="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#E30084" />
    <meta name="msapplication-TileColor" content="#FFFFFF" />
    <meta name="theme-color" content="#FFFFFF" />
    <style>
      @font-face {
        font-family: 'Cerebri Sans';
        font-style: normal;
        font-weight: 300;
        src:
          url('/fonts/cerebri-sans/cerebrisans-light.woff2') format('woff2'),
          url('/fonts/cerebri-sans/cerebrisans-light.woff') format('woff'),
          url('/fonts/cerebri-sans/cerebrisans-light.ttf') format('truetype'),
          url('/fonts/cerebri-sans/cerebrisans-light.eot') format('embedded-opentype');
      }
      @font-face {
        font-family: 'Cerebri Sans';
        font-style: normal;
        font-weight: 400;
        src:
          url('/fonts/cerebri-sans/cerebrisans-regular.woff2') format('woff2'),
          url('/fonts/cerebri-sans/cerebrisans-regular.woff') format('woff'),
          url('/fonts/cerebri-sans/cerebrisans-regular.ttf') format('truetype'),
          url('/fonts/cerebri-sans/cerebrisans-regular.eot') format('embedded-opentype');
      }
      @font-face {
        font-family: 'Cerebri Sans';
        font-style: normal;
        font-weight: 700;
        src:
          url('/fonts/cerebri-sans/cerebrisans-bold.woff2') format('woff2'),
         ...

CSS

.tb-price-con {
  padding: 0 24px;
  color: #363636;
}
.tb-price-con2 {
  max-width: 988px;
  margin: 0 auto;
  container-type: inline-size;
}

.tb-price-tabs {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  position: relative;
}
.tb-price-tabs-tab.active::after {
  display: block;
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: white;
}
.tb-price-tabs-tab {
  padding: 24px;
  flex: 1;
  text-transform: uppercase;
  background-color: #F6F6F6;
  color: #979B9E;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  transition: all 200ms;
  cursor: pointer;
}
.tb-price-tabs-tab:hover {
  color: #363636;
}
.tb-price-tabs-tab.active {
  color: #363636;
  background-color: white;
  box-shadow: 2px 1px 10px 1px rgba(0,0,0,0.09);
  z-index: 2;
}

.tb-price-inputs {
  box-shadow: 2px 1px 10px 1px rgba(0,0,0,0.09);
  padding: 72px;
  font-size: 14px;
  position: relative;
  z-index: 1;
}

.tb-price-inputs-heading {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 14px;
  text-align: center;
  margin: 72px 0 36px 0;
}
.tb-price-inputs-heading:first-child {
  margin-top: 0;
}

.tb-price-inputs-p {
  max-width: 540px;
  margin: 24px auto;
  font-size: 16px;
}

.tb-price-inputs-demo-btn {
  background-color: #2C7ECE;
  color: white;
  outline: none;
  text-decoration: none;
  cursor: pointer;
  border-radius: 2px;
  padding: 17px;
  display: block;
  width: 240px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  margin: 72px auto 0;
  border: 1px solid #2C7ECE;
  transition: all 200ms;
}
.tb-price-inputs-demo-btn:hover {
  background-color: white;
  color: #2C7ECE;
}

.tb-price-inputs-emps {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-size: 19px;
...