JSFiddle - React, Tailwind, and code Playground

by Alen Doe

HTML

<div class="container">
  <div class="list-item">
    <a href="#">one</a>
    <a href="#">two</a>
    <a href="#">three</a>
    <a href="#">four</a>
    <a href="#">five</a>
  </div>
</div>
<div class="container block">
  <div class="list-item">
    <a href="#">one</a>
    <a href="#">two</a>
    <a href="#">three</a>
    <a href="#">four</a>
    <a href="#">five</a>
  </div>
</div>
<div class="wrapper"></div>

CSS

html,body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.wrapper {
  top: 0;
  right: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
.block {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
}
.list-item {
  padding: 20px;
}
.list-item > a {
  margin-left: 20px;
}

JavaScript

$(document).ready(function(){
	$('.block').find('a').click(function(){
  	var a = $(this).text();
    console.log(a);
  });
});