JSFiddle - React, Tailwind, and code Playground

by vaheed akhtar

HTML

<div class="overlay" style="width: 200px; height: 200px; border: 1px solid red;margin: 3px;" >
  <div style="width: 150px; height: 100px; border: 3px solid greenyellow;background-color: indianred; margin: 30px;" >
    <input type="text" value="this is box"/>
    <button>This is button</button>
  </div>
</div>

<div class="overlay" style="width: 150px; height: 100px; border: 3px solid greenyellow; margin: 30px;" >
  <input type="text" value="this is box"/>
  <button>This is button</button>
</div>

CSS

.overlay:before {
   content: "";
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.6);
   position: absolute;
   top: 0;
   left: 0;
}