JSFiddle - React, Tailwind, and code Playground

by hlim188

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="mapBackground3"></div> 
  <p id="tutorialTab">You can tap where you feel unsafe.</p>
</body>
</html>

CSS

#mapBackground3 {
  background: black;
  opacity: 0.8;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 110;
}

/* page 3 */
#tutorialTab{
  color: white;
  font-weight: bold;
  font-size: 22px;
  z-index: 111;
  background: transparent;
  white-space: nowrap;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}