JSFiddle - React, Tailwind, and code Playground

by briggs_w

HTML

<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="overlay"></div>

<p>This is the song that never ends. Yes it goes on and on, my friend.
Some people started singing it not knowing what it was,
And then they kept on singing it forever just because
This is the song that never ends. Yes it goes on and on, my friend.
Some people started singing it not knowing what it was,
And then they kept on singing it forever just because
This is the song that never ends. Yes it goes on and on, my friend.
Some people started singing it not knowing what it was,
And then they kept on singing it forever just because
This is the song that never ends. Yes it goes on and on, my friend.
Some people started singing it not knowing what it was,
And then they kept on singing it forever just because
</p>

CSS

.overlay {
  position: fixed;
  top: 50px; 
  left: 50%; 
  transform: translateX(-50%);
  width: 200px; 
  height: 200px; 
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  z-index: 1000; /* Ensure it's above other content */
}