Embarking on my first website project using React and Tailwind has been an exciting learning experience.
My vision is to showcase a Hero Section prominently at the top, with a Nav bar situated elegantly at the bottom of the screen.
To bring this concept to life, I plan to divide the layout into two distinct sections: The hero section occupying 80vh and the Navbar taking up the remaining 20vh to ensure full-page coverage.
In attempting to implement this design, I have structured my Hero Component as follows:
const HeroSection = () => (
<div className="h-4/5 bg-green border-nft-gray-1">Hero Section</div>
);
export default HeroSection;
I have relied on the guidance provided in the documentation for achieving 80% screenspace, indicated by h-4/5:
https://tailwindcss.com/docs/height
Despite my efforts, the frontend displays a different outcome than expected. The Hero Section, represented by the green div, does not adhere to the specified 80%vh but rather adjusts its size based on content height.
https://i.sstatic.net/Bcg5d.png
The app compilation occurs as shown below:
const Marketplace = ({ Component, pageProps }) => (
<NFTProvider>
<HeroSection />
<Navbar />
</NFTProvider>
);
export default Marketplace;
Furthermore, the Provider utilized for data transfer encapsulates both components and defines their output:
return (
<NFTContext.Provider value={{ nftCurrency, buyNft, createSale, fetchNFTs, fetchMyNFTsOrCreatedNFTs, connectWallet, currentAccount, isLoadingNFT }}>
{children}
</NFTContext.Provider>
);
Upon inspection, it seems that there are no conflicts between the CSS and the setup. What am I missing in terms of utilizing Tailwind effectively to achieve the desired composition?
Your insights and assistance are greatly appreciated.