JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div id="modal--container" class="modal--container active">
  <div class="modal--inner-container">
    <span class="h2">
    Coming In <b>November</b>
    </span>
    <span class="h1">
    <b>The Brunch Bag</b>
    </span>
    <span class="h4">
      Brought to you by <b>Mamalagel’s Bagels</b> and <b>Forestview Farmhouse of Vienna, Ohio</b>
    </span>

    <div class="hr-group">
      <hr />
      <span class="h4">Two Sizes</span>
      <hr />
    </div>

    <span class="h4"><b>Small $15</b> - 3 (assorted) bagels, half-dozen eggs, 1 pack Microgreens</span>

<span class="h4"><b>Large $20</b> - 6 (assorted) bagels, dozen eggs, 2 packs of Microgreens</span>

    <span class="h3">Ordering will be available online here at <a href="https://mamalagels.com">mamalagels.com</a> </span>

    <span class="h4">Stay tuned for more information</span>
    <button id="close" aria-label="close button" class="close">X</button>
  </div>
</div>

CSS

.modal--container {
  display: none;
}

.modal--container.active {
  width: 100vw;
  height: 100vh;
  border: 5px solid #fff;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  margin: 0;
  padding:;
}

.modal--inner-container {
  background-color: #f8d24a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 5px solid #fff;
  margin: 0 auto;
  max-width: 750px;
  padding: 40px;
  position: relative;
}

.hr-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: self-end;
  width: 100%;
}

.hr-group span {
  flex: 1;
  display: block;
  text-align: center;
}

.hr-group hr {
  color: #000;
  flex: 1;
  border-style: solid;
}

.close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 20px;
  margin: 10px;
  font-size: 15px;
  background: none;
  border: none;
  font-weight: 900;
  cursor: pointer;
}

.close:hover,
.close:focus,
.close:active {
  background: #000;
  color: #f8d24a;
  border: ;
}

:root {
  --nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --nc-font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;

  /* Light theme */
  --nc-tx-1: #000000;
  --nc-tx-2: #1A1A1A;
  --nc-bg-1: #FFFFFF;
  --nc-bg-2: #F6F8FA;
  --nc-bg-3: #E5E7EB;
  --nc-lk-1: #0070F3;
  --nc-lk-2: #0366D6;
  --nc-lk-tx: #FFFFFF;
  --nc-ac-1: #79FFE1;
  --nc-ac-tx: #0C4047;

  /* Dark theme */
  --nc-d-tx-1: #ffffff;
  --nc-d-tx-2: #eeeeee;
  --nc-d-bg-1: #000000;
  --nc-d-bg-2: #111111;
  --nc-d-bg-3: #222222;
  --nc-d-lk-1: #3291FF;
  --nc-d-lk-2: #0070F3;
  --nc-d-lk-tx: #FFFFFF;
  --nc-d-ac-1: #7928CA;
  --nc-d-ac-tx: #FFFFFF;
}

@media (prefers-color-scheme: light) {
  :root {
    --nc-tx-1: var(--nc-d-tx-1);
    --nc-tx-2: var(--nc-d-tx-2);
    --nc-bg-1: var(--nc-d-bg-1);
   ...

JavaScript

document.getElementById('close').addEventListener('click', function(e) {
  e.preventDefault();
  document.getElementById('modal--container').classList.remove('active')
})