JSFiddle - React, Tailwind, and code Playground

by sagar Bhanushali

HTML

<div class="wrapper">
<div class="left section"></div>
<button class="bt1">click me 1</button>
<button class="bt2">click me 2</button>
<div class="mask">
</div>

CSS

.wrapper {
  background: #fff;
  width: 600px;
  height: 180px;
  position: relative;
}

.bt1, .bt2 {
  position: absolute;
  width: 100px;
  height: 32px;
  cursor: pointer;
}

.bt1 {
   top: calc(50% - 16px);
   left: 20%;
}

.bt2 {
   top: calc(50% - 16px);
   left: 60%;
}

.el-mask {
  pointer-events: none;
}

.el-sel {
   border: 2px solid #dadada;
   outline: none;
   border-color: #9ecaed;
   box-shadow: 0 0 10px #9ecaed;
   position: absolute;
   z-index: 1000;
}

.mask {
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.2;
  position: absolute;
  z-index: 999;
  display: none;
  top: 0;
  left: 0;
}

.visible {
  display: block !important;
}

JavaScript

var bt1 = document.querySelector(".bt1");
var mask = document.querySelector(".mask");
var bt2 = document.querySelector(".bt2");
bt1.addEventListener("click", enableElMask);
bt2.addEventListener("click", enableMask);

function enableElMask(elMask) {
  if (bt1) {
     bt1.classList.add("el-mask", "el-sel");
  }
  if (mask) {
   	mask.classList.add("visible");
  }
}

function enableMask() {
  if (bt2) {
     bt2.classList.add("el-sel");
  }
  if (mask) {
   	mask.classList.add("visible");
  }
}


function disableMask() {
	if (mask) {
   	mask.classList.remove("visible");
  }
}