JSFiddle - React, Tailwind, and code Playground

by Augustus Yuan

HTML

<div class="virtual-happy-hour">
<img src="https://i.imgur.com/doWONo7.png" width="500"/>

          <h2 id="heading">We'll be hosting our very first live Virtual Happy Hour!</h2>
          <p>Ever since COVID-19 has taken effect, we've been doing our podcasts online. With our <a href="https://twitter.com/FrontEndHH/status/1245381749435228161">100th episode coming out soon</a>, we thought it would be nice to hear from the listeners (and share drinks with all of you too!).</p>
          <p>Please join us on Thursday, April 8th at 8:00 PM PST on <a href="https://twitch.tv/frontendhappyhour">Twitch</a>.</p>
          
          <p>
          We hope to see you there! And remember to stay safe.
          </p>

            <p class="cta"><a href="https://docs.google.com/document/d/1nUGtmAGsS1fk9guBWZbzrxQg6Ef6M2kRraujXoK4Xt8/edit#">For more details on the event</a></p>

SCSS

// File Name: _virtual-happy-hour.scss
// Description: styles for the ama page
// Used by: ama.scss,
// Dependencies:
// Date created: 05/30/2017
// SassySass v1.3.1
// ------------------------------------------------------------
.virtual-happy-hour{
  text-align: center;

  h2 {
    margin-top: 40px;
    font-size: 40px;
  }
  svg {
    max-width: 900px;
  }

  a{
    text-decoration: none;
    border-bottom: 1px solid $darkBlue;
    color: $darkBlue;

    &:hover, &:focus {
      border:none;
    }
  }
}
.cta {
  text-align: center;
  margin: 50px 0;
  a {
    background: $darkBlue;
    padding: 10px 15px;
    color: $chalk;
    border: none;
    text-decoration: none;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
        border-radius: 5px;

    &:hover, &:focus {
      border: none;
      color: white;
    }
  }
}

.legal-content{
  text-align: left;

  h3 {
    font-size: 16px;
    margin-top: 30px;
  }

  p{
    font-size: 12px;
  }
}