JSFiddle - React, Tailwind, and code Playground

by Aldrin Gauran

HTML

<div class="ancestor">
  <div class="father">
    
    <div class="row">
      <div class="col-sm-6">
        <a href="#" class="son" id="1"></a>
      </div>
      <div class="col-sm-6">
        <a href="#" class="son" id="2"></a>
      </div>
      <div class="col-sm-6">
        <a href="#" class="son" id="3"></a>
      </div>
    </div>
    
  </div>
  <div class="overlay"></div>
</div>

CSS

.ancestor {
  position: relative;
  height: 500px;
  width: 100%;
  background-color: blue;
}

.ancestor .father {
  position: relative;
  
  background-color: red;
  
  width:300px;
  height: 250px;
  top: 20px;
  left: 30px;
}

.son {
  display: inline-block;
  position: relative;
  color: red;
  width: 30px;
  height: 40px;
  background-color: yellow;
  float: left;
  margin: 0 10px 0 10px;
}


.ancestor .overlay {
  display: none;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: black;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

JavaScript

$('.son').on('click', function() {
  $(this).css({})
});