JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<div class="wrapper">
  <div class="overlay">
    <form action="">
      <input type="text">
      <input type="text">
      <button>Submit</button>
    </form>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, inventore esse aliquam nostrum? Cupiditate provident, delectus, minus voluptatum natus fugiat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus temporibus vitae quibusdam maxime natus fugiat quis amet sed perferendis quod.</p>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nostrum consequatur animi quod rem eos nihil obcaecati repellat. At, accusamus.</p>
</div>

CSS

.wrapper {
  position: relative;
}

.overlay {
  position: absolute;
  width: 50vw;
  height: 50vh;
  margin: 25vw 40px;
  background-color: rgba(255,255,255,1);
  color: #fff;
  display: none;
  border:1px solid red;
}

JavaScript

$(document).ready(function() {

  function showOverlay() {
    $('.overlay').show()
  }

  setTimeout(showOverlay, 2000)

})