'div not displaying in nextjs project

I have a very basic NextJS app that has a fullscreen video playing and some text overlaid on it.

Here is the index.js:

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import React, { useState, useRef } from "react";
import dynamic from "next/dynamic";

// https://docs.referlist.co/#/?id=install-in-react-or-nextjs-via-npm

export default function Home() {
  const Referlist = dynamic(
    () =>
      import("referlist").then((referlist) =>
        referlist.initialize({ domain: "tokenchamplaunch" })
      ),
    { ssr: false }
  );
  return (
    <div className={styles.container}>
      <Head>
        <title>TokenChamp</title>
        <meta name="description" content="Casual web3 games" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

    <div className="bg-video-wrap">
    <video autoPlay muted loop className={styles.video}>         
      <source src={`/CABINETS_BG.mp4`} type="video/mp4"/>       
    </video>
    <div className="overlay">
    </div>
    <h1>Join the waitlist
    </h1>
    <div className="waitlist">
          <Referlist />
          <div>
            <input type="text" id="referlistemail" />
            <input className="waitlistbutton" type="button" id="referlistbutton" value="LFG" />
          </div>
        </div>
  </div>
    </div>
  )
}

Here is the global.css:

html,
body {
  background-image: url(/bg.png);
  padding: 0;
  margin: 0;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

.bg-video-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background: url(https://designsupply-web.com/samplecontent/vender/codepen/20181014.png) no-repeat center center/cover;
}
video {
  min-width: 100%;
  min-height: 100vh;
  z-index: 1;
}
.overlay {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  /* background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%); */
  background-size: 3px 3px;
  z-index: 2;
}
h1 {
  text-align: center;
  color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3;
  max-width: 400px;
  width: 100%;
  height: 50px;
}

.waitlistbutton {
  background-color: gold;
  padding: 1.3em 3em 1.3em 3em;
  border-radius: 5px;
  margin-left: 1em;
}

input[type=text] {
  border: 2px solid white;
  border-radius: 4px;
  background-color: black;
  color: white;
  padding: 1em;
  font-size: 1em;
}

input[type=text]:focus {
  border: 2px solid white;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
  width: 100%; 
  /* remove the above to offset the animation */
}

The waitlist input fields are not visible and I don't understand why. The h1 text is visible, but the waitlist/input fields are not.

When I have tried nesting the waitlist div in other places, it's always either stuck at the absolute top of the page or it completely disappears.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'div not displaying in nextjs project

Sources

Related Questions