JSFiddle - React, Tailwind, and code Playground

by Che Sampat

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css">
<!DOCTYPE html>
<html lang='en'>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />

  <head>
    <title>SuperPay | Accept payments the easy way</title>
    <meta charSet="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="A new and fast way to get paid, recurring and one-time payments made frictionless and fast.">
    <meta http-equiv="content-language" content="ll-cc">
    <meta property="og:title" content="SuperPay | Accept payments the easy way">
    <meta property="og:site_name" content="SuperPay">
    <meta property="og:url" content="https://superpay.it">
    <meta property="og:description" content="A new and fast way to get paid, recurring and one-time payments made frictionless and fast.">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://superpay.it/media/images/SuperPay%20og%20image.png">
    <meta name="theme-color" content="#297afb" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="canonical" href="https://www.superpay.it">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "Organization",
        "name": "SuperPay",
        "alternateName": "SuperPay Technologies Ltd",
        "url": "https://superpay.it/",
        "logo": "https://superpay.it/favicon.ico",
        "sameAs": [
          "https://twitter.com/SuperPayIt",
          "https://www.linkedin.com/company/superpayit/"
        ]
      }

    </script>
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,600" rel="stylesheet">



    <style>
      .dashboard-button {
    ...

CSS

#headerPopup {
  width: 75%;
  margin: 0 auto;
}

#headerPopup iframe {
  width: 100%;
  margin: 0 auto;
}

h1,
h3,
.heading {
  font-weight: 600 !important;
}

.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 {
...

JavaScript

$(document).ready(function() {
  $('#headerVideoLink').magnificPopup({
    type: 'inline',
    midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
  });

});