JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Warning Overlay -->
  <div id="warning-overlay">
    <div class="warning-container">
      <h1>Adult Content Warning</h1>
      <p>This website contains explicit material and is only suitable for individuals aged 18 and older. Please verify your age before proceeding.</p>
      <div class="button-container">
        <a href="#" class="enter" onclick="enterSite()">Enter</a>
        <a href="https://google.com" class="leave">Leave</a>
      </div>
    </div>
  </div>

  <!-- Main Content -->
  <div id="main-content">
    <h1>Welcome to the Website</h1>
    <p>
      This is the content of the website that is hidden until the user confirms they are 18 or older by clicking "Enter."
    </p>
    <p>
      Feel free to add any additional text, images, or functionality here. This serves as your main page content.
    </p>
  </div>

CSS

body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background-color: #111;
      color: #fff;
    }

    /* Overlay styles */
    #warning-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.95);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    .warning-container {
      text-align: center;
      max-width: 400px;
      padding: 20px;
      border: 2px solid #ff5500;
      border-radius: 10px;
      background-color: #222;
    }

    .warning-container h1 {
      font-size: 24px;
      color: #ff5500;
    }

    .warning-container p {
      margin: 20px 0;
      line-height: 1.5;
    }

    .button-container {
      display: flex;
      justify-content: space-between;
      gap: 10px;
    }

    .button-container a {
      text-decoration: none;
      color: #fff;
      background-color: #ff5500;
      padding: 10px 20px;
      border-radius: 5px;
      font-weight: bold;
      transition: background-color 0.3s ease;
    }

    .button-container a:hover {
      background-color: #ff7733;
    }

    .button-container a.leave {
      background-color: #444;
    }

    .button-container a.leave:hover {
      background-color: #666;
    }

    /* Hidden content under the overlay */
    #main-content {
      display: none;
      padding: 20px;
    }

JavaScript

// Function to set a cookie
    function setCookie(name, value, days) {
      const date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
    }

    // Function to get a cookie
    function getCookie(name) {
      const cookies = document.cookie.split(';');
      for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i].trim();
        if (cookie.startsWith(name + '=')) {
          return cookie.substring(name.length + 1);
        }
      }
      return null;
    }

    // Function to handle entering the site
    function enterSite() {
      setCookie('ageVerified', 'true', 90); // Set a cookie for 3 months
      document.getElementById("warning-overlay").style.display = "none";
      document.getElementById("main-content").style.display = "block";
    }

    // Check if the cookie is already set
    window.onload = function() {
      if (getCookie('ageVerified')) {
        document.getElementById("warning-overlay").style.display = "none";
        document.getElementById("main-content").style.display = "block";
      }
    };