JSFiddle - React, Tailwind, and code Playground

by ryanwfiorini

HTML

<div class="example1 js-menu-container">
  <a href="javascript:;" class="js-menu-target">Tags</a>

  <div class="js-menu-content">
    <p>1.0</p>
    <p>1.1</p>
    <p>1.2</p>
  </div>
</div>



<div class="example1 js-menu-container">
  <a href="javascript:;" class="js-menu-target">Tags</a>

  <div class="js-menu-content">
    <p>1.0</p>
    <p>1.1</p>
    <p>1.2</p>
  </div>
</div>

CSS

.example1.js-menu-container .js-menu-content {
  display: none;
}
.example1.js-menu-container.active .js-menu-content {
  display: block;
  position: absolute;
  background: white;
  border: 1px solid grey;
  width: 50px;
  padding: 2px 10px;
}

.example1.js-menu-container .js-menu-content {
  display: none;
}
.example1.js-menu-container.active .js-menu-content {
  display: block;
  position: absolute;
  background: white;
  border: 1px solid grey;
  width: 50px;
  padding: 2px 10px;
}