JSFiddle - React, Tailwind, and code Playground

by Jerome

HTML

<html>

  <head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o=" crossorigin="anonymous"></script>
  </head>

  <body style='background-color: #000;'>

    <div id='admin-header_container'>
      <div class='grid-x grid-padding-x'>
        <div class='cell small-2'>
          <button>en</button>
          <nav class='dd_menu'>
            <ul class='ul_dd_menu_lang'>
              <li class='dd_item'><a class="locale" href="/shops/product?locale=fr&amp;sl=spark-2up-90">fr</a>
              </li>
              <li class='dd_item'><a class="locale" href="/shops/product?locale=it&amp;sl=spark-2up-90">it</a>
              </li>
              <li class='dd_item'><a class="locale" href="/shops/product?locale=cz&amp;sl=spark-2up-90">cz</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
    <div>
      <a href='https://so.com/'>Get this link</a>
    </div>
  </body>

</html>

CSS

.dd_menu {
/*     visibility: hidden; */
 display: none;
}
button + .dd_menu:active,
button:focus + .dd_menu {
/*    visibility: visible; */
  display: inline; 
}
.ul_dd_menu_lang {
  background-color: rgba(255,255,255,0.89); 
  min-width: 30px; 
  border: 1px solid rgba(169,156,156,0.45);
}  
.dd_item {
  list-style-type: none;
}