JSFiddle - React, Tailwind, and code Playground

by Che Sampat

CSS

.font-elegant * {
  font-family: Montserrat, sans-serif
}

.font-elegant .bold,
.font-elegant .heading,
.font-elegant .heading-lrg,
.font-elegant .heading-sml {
  font-family: Spectral, serif
}

.font-friendly * {
  font-family: Montserrat, sans-serif
}

.font-hacker * {
  font-family: 'Roboto Mono', monospace
}

.font-hacker .heading,
.font-hacker .heading-lrg,
.font-hacker .heading-sml {
  font-family: Roboto, sans-serif
}

.font-modern * {
  font-family: Poppins, sans-serif
}

.font-modern .heading,
.font-modern .heading-lrg,
.font-modern .heading-sml {
  font-weight: 300
}

.font-neutral * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
}

.font-serious * {
  font-family: Montserrat, sans-serif
}

.font-serious .bold,
.font-serious .heading,
.font-serious .heading-lrg,
.font-serious .heading-sml {
  font-family: Eczar, serif
}

*,
:after,
:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility
}

.header {
  padding-top: 40px
}

.logo {
  font-size: calc(120% + 1vw);
  line-height: 44px;
  font-weight: 700
}

.nav-link {
  font-size: 19px;
  line-height: 44px;
  text-decoration: none;
  color: inherit;
  display: inline-block;
  margin: 0 15px
}

.logo img {
  height: 44px;
  display: inherit
}

.heading {
  font-size: 42px;
  line-height: 1.5
}

.heading-sml {
  font-size: 36px;
  line-height: 1.38;
  font-weight: 700
}

.heading-lrg {
  font-size: 56px;
  line-height: 1.38
}

.subheading {
  font-size: 22px;
  line-height: 1.8;
  font-weight: 400
}

.paragraph {
  font-size: 19px;
  line-height: 1.8;
  font-weight: 400
}

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

.span {
  font-size: 15px;
  line-height: 1.5
}

.bold {
  font-size: 22px;
  line-height: 1.5
}

.text-center {
  text-align: center
}

img {
  max-width:...