JSFiddle - React, Tailwind, and code Playground

by dsummersl

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<header
  class="row region region-top-header top-header up"
  data-scroll-listener="true"
>
  <div class="top-header-container">
    <div class="top-header-container__row">
      <div class="top-header__phone">
        <a
          href="https://youtube.com/XXX"
          target="_blank"
          rel="noreferer noopener"
          class="rounded-circle mr-1 d-inline-block position-relative"
          ><img
            src="https://mktgyodleedev.prod.acquia-sites.com/themes/custom/yodlee/images/Icon/phone-regular.svg"
            alt="World"
          />
          1 866-374-0948</a
        >
      </div>
      <div class="top-header__menu">
        <ul class="top-header__menu__list">
          <li>
            <a
              href="https://youtube.com/XXX"
              target="_blank"
              rel="noreferer noopener"
              class="rounded-circle mr-1 d-inline-block position-relative"
              >Blog</a
            >
          </li>
          <li>
            <nav
              role="navigation"
              aria-labelledby="block-regionselector-menu"
              id="block-regionselector"
              class="block block-menu navigation menu--region-selector"
            >
              <div class="region-selector">
                <a
                  class="btn dropdown-toggle region-selector__title"
                  href="#"
                  role="button"
                  id="region-menu"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  North America
                </a>
                <div
                  class="dropdown-menu dropdown-menu-right region-selector__menu"
                  aria-labelledby="region-menu"
                >
                  <h6>Select Location</h6>
                  <ol>
                    <li><a href="/">North...

CSS

@import url("https://fonts.googleapis.com/css?family=Montserrat:400|Montserrat:500|Montserrat:600|Montserrat:700|Muli&display=swap");
h1,
h2,
h3,
h4,
h5,
h6, .header .megamenu-content .content_left .field--name-field-title, .header .megamenu-content .content_right .field--name-field-featured-links-title, .header .megamenu-content .optional-cta .field--name-field-optional-cta a {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; }

.region-selector__title {
  font-family: "Montserrat", sans-serif; }

.header .megamenu-content .content_left .field--name-field-title p {
  font-family: "Muli", sans-serif; }

/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #ffffff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #f37321;
  --secondary: #0178c9;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 768px;
  --breakpoint-md: 992px;
  --breakpoint-lg: 1440px;
  --breakpoint-xl: 1720px;
  --font-family-sans-serif: "Muli", arial, sans-serif;
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block; }

body {
  margin: 0;
  font-family: "Muli", arial, sans-serif;
  font-size:...