JSFiddle - React, Tailwind, and code Playground

by Sean Coker

HTML

<header>
    <div class="Header-left">
      <p class="Header-merchantName">Bug bash</p>
    </div>
    <div class="Header-right">
      <ul class="Header-links">
        <li><a href="https://coker-payment_links_ingress-mydev.dev.stripe.me/test_4gw01SaQm9oVa76144">Payment link</a>
      </ul>
      <ul class="Header-icons">
        <li class="cart">
          <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 2H2.216L3.22 9.55C3.27063 10.081 3.72915 10.4788 4.262 10.454L13.495 10.03C13.8893 10.0118 14.236 9.76346 14.38 9.396C15.502 6.513 15.995 5.038 16 4.97C16.041 4.42 15.697 3.94 15.147 3.9L4.366 3.102L4.107 0.992C4.07666 0.742845 3.95346 0.514301 3.762 0.352C3.57192 0.128586 3.29333 -0.000105291 3 6.46385e-08H1C0.447715 6.46385e-08 0 0.447715 0 1C0 1.55229 0.447715 2 1 2ZM5 16C3.89543 16 3 15.1046 3 14C3 12.8954 3.89543 12 5 12C6.10457 12 7 12.8954 7 14C7 15.1046 6.10457 16 5 16ZM13 16C11.8954 16 11 15.1046 11 14C11 12.8954 11.8954 12 13 12C14.1046 12 15 12.8954 15 14C15 15.1046 14.1046 16 13 16Z" fill="#4F566B"/>
          </svg>
      </li>
      <li>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.1962 0H7.8038C7.70679 0 7.60982 0.00403343 7.51314 0.0120898C5.58682 0.172616 4.15536 1.86434 4.31589 3.79066L4.4801 5.76123C4.63266 7.59189 6.163 9 8 9C9.837 9 11.3673 7.59189 11.5199 5.76123L11.6841 3.79066C11.6922 3.69398 11.6962 3.59701 11.6962 3.5C11.6962 1.567 10.1292 0 8.1962 0Z" fill="#4F566B"/>
<path d="M11.9001 9.46256C10.8772 10.4176 9.50449 11 8 11C6.49551 11 5.12276 10.4176 4.09985 9.46256L2.34082 10.1222C0.932802 10.6502 0 11.9962 0 13.5V15C0 15.5523 0.447715 16 1 16H15C15.5523 16 16 15.5523 16 15V13.5C16 11.9962 15.0672 10.6502 13.6592 10.1222L11.9001 9.46256Z" fill="#4F566B"/>
</svg>
      </li>
    </ul>
  </div>
</header>
<div class="container">
  
  <!-- Paste your embed here! -->
 ...

CSS

/* Feel free to change the colors of the variables below to play around with customization w/ your Pricing Table */
:root {
  --black: #1a1a1a;
  --text-color: #DC9A9C;
  --background-color: #fef8f5;
  --header-background-color: #ffffff;
}

body {
  margin: 0 auto;
  font-family: 'PT Serif', 'Apple Garamond', 'Droid Serif', 'Times New Roman',
    serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  color: var(--black);
}

.container {
  width: 100vw;
  height: 100vh;
  margin-top: 60px;
  background-color: var(--background-color);
  position: fixed;
  z-index: -1;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  background-color: var(--header-background-color);
  position: fixed;
  top: 0px;
  height: 60px;
  width: 100vw;
  z-index: 1;
}

.Header-left,
.Header-right {
  padding: 0px 24px;
}

h1 {
  font-size: 40px;
  text-align: center;
  color: var(--text-color);
  padding: 24px;
}

.Header-left .Header-merchantName {
  font-size: 24px;
  font-weight: 500;
  cursor: default;
  margin: 0px;
}

.Header-links a {
  color: var(--black);
  text-decoration: none;
  padding: 0px 2px;
}

.Header-merchantName,
.Header-links a {
  overflow: hidden;
  background: linear-gradient(to right, var(--text-color), var(--text-color) 50%, var(--black) 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 0.3s ease-in-out;
}

.Header-merchantName:hover,
.Header-links a:hover {
  background-position: 0 100%;
}

.Header-right,
.Header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/*  On initial load, no animations */
body.preload .Header-merchantName,
body.preload .Header-links a,
body.preload .Header-right {
  transition: none !important;
}

/* Window resize animation (fade in/out) */
.Header-right {
  transition: opacity 0.2s linear, transform...