JSFiddle - React, Tailwind, and code Playground

by deathstalkersid

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  </head>

  <body>
    <div class="row" style="
    position: relative;
">
      <div class="col">
        1 of 3
      </div>
      <div class="col">
        2 of 3
      </div>
      <div class="col">
        3 of 3
      </div>
      <div class="overlay">
        Overlay
      </div>
    </div>
  </body>

</html>

CSS

.overlay {
  position: absolute;
  top: 40%;
  left: 33.3%;
  width: 67%;
  height: 20vh;
}