I'm facing a challenge with my current project, which is a React project integrated with Tailwind CSS. I'm attempting to style the main elements (navbar and hero) to fit the entire screen height when the user lands on the page. If you have a solution using pure CSS, I'm open to that as well since I can later convert it to Tailwind.
Below is my existing code:
Main element (not sure if useful)
import Header from "./header";
import Hero from "./hero";
export default function OnBoardingMain() {
return (
<div className="flex flex-col w-full h-full min-h-full ">
<Header />
<Hero />
</div>
);
}
Hero element
/* eslint-disable @next/next/no-img-element */
"use client";
import { useState } from "react";
import { Dialog } from "@headlessui/react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
import Image from "next/image";
import CtaMainButton from "./CtaMainButton";
export default function Hero() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return (
<div className="bg-gray-900 height-full top-0 left-0">
<div className="relative isolate overflow-hidden pt-14">
<img
src="image"
alt=""
className="absolute inset-0 -z-30 h-full w-full object-cover"
/>
<div
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
aria-hidden="true"
></div>
<div className="ml-4 max-w-3xl py-32 sm:py-48 lg:py-56 animate-slide-in">
<div className="text-center">
<h1 className="text-4xl font-bold tracking-tight text-sky-800 sm:text-6xl">
text
</h1>
<div className="mt-10 flex items-center justify-center gap-x-6 ">
<CtaMainButton />
</div>
</div>
</div>
4
<div className="absolute inset-0 bg-gradient-to-r from-slate-400 from-30% to-transparent opacity-50 -z-20"></div>
</div>
</div>
);
}
Header:
/* eslint-disable @next/next/no-img-element */
"use client";
import { useState } from "react";
import { Dialog } from "@headlessui/react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
import Image from "next/image";
import CtaMainButton from "./CtaMainButton";
const navigation = [
{ name: "À propos", href: "#" }
];
export default function Header() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return (
<header className="bg-white ">
<nav
className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
aria-label="Global"
>
<div className="flex lg:flex-1">
<a href="#" className="-m-1.5 p-1.5">
<span className="sr-only">Your Company</span>
<img
className="h-8 w-auto"
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
alt=""
/>
</a>
</div>
<div className="flex lg:hidden">
<button
type="button"
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
onClick={() => setMobileMenuOpen(true)}
>
<span className="sr-only">Open main menu</span>
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="hidden lg:flex lg:gap-x-12">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className="text-sm font-semibold leading-6 text-gray-900"
>
{item.name}
</a>
))}
</div>
<div className="hidden lg:flex lg:flex-1 lg:justify-end">
<CtaMainButton />
</div>
</nav>
<Dialog
as="div"
className="lg:hidden"
open={mobileMenuOpen}
onClose={setMobileMenuOpen}
>
<div className="fixed inset-0 z-10" />
<Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div className="flex items-center justify-between">
<a href="#" className="-m-1.5 p-1.5">
<span className="sr-only">Your Company</span>
<img
className="h-8 w-auto"
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
alt=""
/>
</a>
<button
type="button"
className="-m-2.5 rounded-md p-2.5 text-gray-700"
onClick={() => setMobileMenuOpen(false)}
>
<span className="sr-only">Close menu</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="mt-6 flow-root">
<div className="-my-6 divide-y divide-gray-500/10">
<div className="space-y-2 py-6">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
>
{item.name}
</a>
))}
</div>
<div className="py-6">
<CtaMainButton />
</div>
</div>
</div>
</Dialog.Panel>
</Dialog>
</header>
);
}
I've experimented with various Tailwind classes like "flex flex-col h-screen" or "h-full" on different elements, but unfortunately, none of them seemed to work as intended.