JSFiddle - React, Tailwind, and code Playground

by Andrey Izman

HTML

<div id="body">
  <div id="SITE_HEADERinlineContent">
    <div id="SITE_HEADERinlineContent-gridContainer">
      <nav id="TINY_MENU" class="_1FTe_ _3lk1M _2hkBM" aria-label="Site">
        <div class="fullScreenOverlay _1E9Q7">
          <div class="fullScreenOverlayContent _2VVt7">
            <div class="_3LYag">
              <div class="_1L65K">
                <ul id="menuItemsTINY_MENU" class="_3elSW _3lk1M _16r5z">
                  <li class="_9Nyvz" data-testid="tinymenu-item-0-selected"><a data-testid="linkElement" href="https://www.maimanelectronics.com/production" target="_self" class="_2MiEb _1Tkl_">PRODUCTION</a></li>
                  <li class="_9Nyvz" data-testid="tinymenu-item-1"><a data-testid="linkElement" href="https://www.maimanelectronics.com/where-to-buy" target="_self" class="_2MiEb">WHERE TO BUY</a></li>
                  <li class="_9Nyvz" data-testid="tinymenu-item-2"><a data-testid="linkElement" href="https://www.maimanelectronics.com/about-us" target="_self" class="_2MiEb">ABOUT US</a></li>
                  <li class="_9Nyvz" data-testid="tinymenu-item-3"><a data-testid="linkElement" href="https://www.maimanelectronics.com/news" target="_self" class="_2MiEb">NEWS</a></li>
                  <li class="_9Nyvz" data-testid="tinymenu-item-4"><a data-testid="linkElement" href="https://www.maimanelectronics.com/contacts" target="_self" class="_2MiEb">CONTACTS</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <ul aria-hidden="true" style="display: none;">
          <li data-testid="tinymenu-seolist-item"><a data-testid="linkElement" href="https://www.maimanelectronics.com/production" target="_self" class="" tabindex="-1">PRODUCTION</a></li>
          <li data-testid="tinymenu-seolist-item"><a data-testid="linkElement" href="https://www.maimanelectronics.com/where-to-buy" target="_self" class="" tabindex="-1">WHERE TO BUY</a></li>
          <li...

SCSS

#SITE_HEADERinlineContent {
  position: relative;
  pointer-events: none;
  height: auto;
  width: 100%;
}

#SITE_HEADERinlineContent-gridContainer {
  position: static;
  display: grid;
  height: auto;
  width: 100%;
  min-height: auto;
  grid-template-rows: 1fr;
  grid-template-columns: 100%;
}

TINY_MENU {
    --rd: 0px;
    --borderWidthSelected: 2px;
    --bg: var(--color_11);
    --borderwidth: 1px;
    --bordercolor: var(--color_13);
    --linewidth: 20px;
    --strokewidth: 2px;
    --iconcolor: var(--color_15);
    --alpha-iconcolor: 1;
    --iconcolorSelected: 0,0,0;
    --textAlignment: left;
    --alpha-iconcolorSelected: 1;
    --bgDrop: 255,255,255;
    --alpha-bgDrop: 1;
    --borderColorSelected: var(--color_12);
    --fnt: normal normal normal 16px/1.4em helvetica-w01-roman,helvetica-w02-roman,helvetica-lt-w10-roman,sans-serif;
    --txt: null;
    --alpha-txt: null;
    --txts: var(--color_33);
    --alpha-txts: 1;
    --separatorHeight: 1px;
    --separatorWidth: 115px;
    --separatorColor: var(--color_12);
    --fixStrokeBlur: 2px;
    --counterColor: null;
    --alpha-counterColor: null;
    --bgMembers: 0,0,0;
    --alpha-bgMembers: 1;
    --badge-bg: 226,28,33;
    --alpha-badge-bg: 1;
    --badge-txt: var(--color_11);
    --alpha-badge-txt: 1;
    --fillcolor: var(--color_18);
    --alpha-fillcolor: 1;
    --alpha-borderColorSelected: 0;
    --alpha-bordercolor: 0;
    --alpha-separatorColor: 0.5;
    --alpha-bg: 0;
    --alpha-bgOpen: 0;
    --counter-color-mutated-brightness: 0,0,0;
    --bgOpen: var(--color_11);
    --btn-padding-top: 0.5px;
}
// https://www.maimanelectronics.com/production
// https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay

#TINY_MENU {
    --rd: 0px;
    --borderWidthSelected: 2px;
    --darkreader-bg--bg: var(--darkreader-bg--color_11);
    --darkreader-border--borderwidth: 1px;
    --darkreader-border--bordercolor: var(--darkreader-border--color_13);
    --linewidth: 20px;
    --strokewidth:...