JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<nav class='main-nav'>
  <div class='main-nav-width-constraint'>
    <ul class='main-nav-left'>
      <li class='main-nav-item'>
        TherapyHub
      </li>
    </ul>
    <ul class='main-nav-right'>
      <!-- <li class='main-nav-item'>
        About
      </li>
      <li class='main-nav-item'>
        Team
      </li>
      <li class='main-nav-item'>
        For Therapists
      </li>
      <li class='main-nav-item'>
        For Patients
      </li> -->
      <li class='sign-up-nav-item'>
        Sign Up
      </li>
    </ul>
  </div>
</nav>

<header class='main-header'>
  <div class='main-header-width-constraint'>
    <h1 class='main-header-title'>
      TherapyHub is the smartest technology for video and text therapy
    </h1>
    <h2 class='main-header-sub-title'>
      Start therapy now, not next month
    </h2>
    <button class='main-header-sign-up-button'>
      Click here to start your free trial
    </button>
  </div>
</header>

<section class='what-is-therapyhub'>
  <div class='page-width'>
    <h3 class='section-title-primary'>
      What is TherapyHub?
    </h3>
    <h4 class='section-subtitle-primary'>
      Subtitle
    </h4>
    <p class='section-paragraph-primary'>
      Lorem ipsum dolor sit amet, tale conceptam definiebas ut eum, eu nec probatus dignissim efficiantur. Mei delectus conclusionemque an. Vide perfecto contentiones qui an. Assum nusquam no per. Vix offendit postulant an. Qui ei soluta animal, eam id quod meis liberavisse.
    </p>
  </div>
</section>

<section class='therapyhub-connects'>
  <div class='page-width'>
    <h3 class='section-title-primary'>
      How it works
    </h3>
    <p class='section-paragraph-primary'>
      Lorem ipsum dolor sit amet, tale conceptam definiebas ut eum, eu nec probatus dignissim efficiantur. Mei delectus conclusionemque an. Vide perfecto contentiones qui an. Assum nusquam no per. Vix offendit postulant an. Qui ei soluta animal, eam id quod meis liberavisse.
    </p>
 ...

SCSS

$purple: #c327d6;
$text-color: #444444;
$brand-green: #14ccad;

body {
  margin: 0;
  font-family: sans-serif;
  color: $text-color;
  background: white;
}

ul {
  margin: 0;
  padding: 0;
}

.page-width {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

.page-section {
  padding: 150px 0;
}

.section-title-primary {
  font-size: 30px;
  margin: 0;
}

.section-subtitle-primary {
  font-size: 24px;
  margin: 12px 0 0;
  font-weight: normal;
}

.section-paragraph-primary {
  font-size: 18px;
  margin: 12px 0 0;
  line-height: 30px;
  
  &:first-of-type {
    margin-top: 24px;
  }
}

.button {
  padding: 20px 30px;
  border-radius: 50px;
  // background: linear-gradient(45deg, #d66bb5, #6c3486);
  background: white;
  border: 0;
  color: $text-color;
  font-size: 20px;
  letter-spacing: 1px;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
  outline: none;
}

.sign-up-button {
  @extend .button;
  background: linear-gradient(90deg, #2e80d6, #3797ea);
  color: white;
}

.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: white;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
}

.main-nav-width-constraint {
  @extend .page-width;
  display: flex;
  align-items: center;
}

.main-nav-left {
  flex-shrink: 0;
  
  .main-nav-item:first-of-type {
    padding-left: 0;
  }
}

.main-nav-right {
  flex-grow: 1;
  text-align: right;
  
  .main-nav-item:last-of-type {
    padding-right: 0;
  }
}

.main-nav-item {
  display: inline-block;
  vertical-align: center;
  padding: 20px;
  
  &:hover {
    color: $purple;
  }
}

.sign-up-nav-item {
  @extend .main-nav-item;
  padding: 10px 20px !important;
  margin: 10px 0;
  border: 1px solid $purple;
  border-radius: 30px;
  
  &:hover {
    background: $purple;
    color: white;
  }
}

.main-header {
  @extend .page-section;
  background: linear-gradient(45deg, #e8ab6d, #d46383);
  padding: 200px 0 150px;
  color:...