JSFiddle - React, Tailwind, and code Playground

by Vishnuprasad ps

HTML

<div class="ad-popup">
  <div class="ad-dialog">

    <div class="title">
      <h5>We're here for you.</h5>
      <button type="button" class="popup-close"><span>×</span></button>
    </div>

    <div class="body">
      <p>
        Here at shopBMWUSA.com your community is our community and we are committed to keeping people safe and support you in any way we can. While your local BMW center is committed to fulfilling your orders as quickly as possible, there may be longer than normal shipping times.
      </p>
      <p>
        Keeping our BMW community informed. <a style="text-decoration:underline;" href="https://www.bmwusa.com/coronavirus-info.html" target="_blank">Learn More.</a>
      </p>
    </div>

    <div class="footer">
      <button type="button" class="btn-blue">Close</button>
    </div>

  </div>
</div>

SCSS

.ad-popup {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

  .ad-dialog {
    background: #fff;
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    margin-top: 12%;

    .title {
      display: flex;
      align-items: center;
      padding: 1rem;

      h5 {
        /*font-size: $text-xregular;
        font-family: $font-regular;*/
        font-size: 1.375rem;
        font-family: sans-serif;
        margin: 0;
      }

      button {
        width: 50px;
        height: 50px;
        background: #fff;
        border: 0;
        font-size: 2rem;
        padding: 1rem 1rem;
        margin: -1rem -1rem -1rem auto;
        line-height: 0;
        cursor: pointer;
        outline: 0;
        -webkit-appearance: none;
      }
    }

    .body {
      padding: 0 1rem 1rem;

      p {
        margin: 0 0 10px;
      }

      a {
        color: #000;
      }
    }

    .footer {
      padding: 0 1rem 1rem;
      text-align: right;
    }

  }
}