Home
Abdul Baset Bappy
NFT Header with Hero

NFT Header with Hero

This tailwind example is contributed by Abdul Baset Bappy, on 19-Jun-2025. Component is made with Tailwind CSS v3. It is responsive.

Header Hero Navigations Other

Author Abdul Baset Bappy

234

Fork Fullscreen

<div class="hidden lg:flex lg:justify-start lg:ml-16 lg:space-x-8 xl:space-x-14">
                    <a href="#" title="" class="text-base font-medium text-gray-900 transition-all duration-200 rounded focus:outline-none hover:text-gray-700 focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"> All Artworks </a>

<a href="#" title="" class="text-base font-medium text-gray-900 transition-all duration-200 rounded hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"> All Artists </a>

<div class="flex items-center justify-end ml-auto">
                    <div class="hidden lg:flex lg:items-center lg:space-x-8">
                        <a href="#" title="" class="text-base font-medium text-gray-900 transition-all duration-200 rounded hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"> Create Free Account </a>

<div class="relative py-12 overflow-hidden bg-gray-100 sm:py-16 lg:py-20 xl:py-24">
        <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
            <div class="flex flex-col">
                <div class="max-w-md mx-auto text-center xl:max-w-lg lg:mx-0 lg:text-left">
                    <h1 class="text-3xl font-bold text-gray-900 sm:text-4xl md:text-5xl lg:leading-tight xl:text-6xl">Collect rare ✨ digital artworks</h1>
                    <p class="mt-5 text-lg font-medium text-gray-900 lg:mt-8">Buy & sell NFTs from world’s top artist</p>

<div class="mt-8 lg:mt-10">
                        <a
                            href="#"
                            title=""
                            class="inline-flex items-center justify-center px-8 py-3 text-base font-bold leading-7 text-white transition-all duration-200 bg-gray-900 border border-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 font-pj hover:bg-gray-600"
                            role="button"
                        >
                            Explore all artwork
                        </a>
                    </div>

<div class="inline-grid grid-cols-2 mt-8 gap-x-8">
                        <div>
                            <p class="text-4xl font-bold text-gray-900">50k+</p>
                            <p class="mt-2 text-base font-medium text-gray-500">Artwork</p>
                        </div>

<div>
                            <p class="text-4xl font-bold text-gray-900">17k+</p>
                            <p class="mt-2 text-base font-medium text-gray-500">Artists</p>
                        </div>
                    </div>
                </div>

<div class="relative mt-12 lg:mt-0 lg:absolute lg:-translate-y-1/2 lg:translate-x-1/2 lg:top-1/2">
                    <div class="relative w-full overflow-auto">
                        <div class="flex gap-8 flex-nowrap">
                            <div class="flex-none w-full sm:w-2/3 lg:w-full lg:flex-1 whitespace-nowrap">
                                <div class="overflow-hidden bg-white rounded shadow-xl">
                                    <div class="aspect-w-4 aspect-h-3">
                                        <img class="object-cover w-full h-full" src="https://cdn.rareblocks.xyz/collection/clarity-ecommerce/images/hero/2/artwork-1.png" alt="" />
                                    </div>
                                    <div class="p-8">
                                        <p class="text-lg font-bold text-gray-900">Ely-The Angry Girl</p>
                                        <p class="mt-6 text-xs font-medium tracking-widest text-gray-500 uppercase">Reserved Price</p>
                                        <div class="flex items-end mt-1">
                                            <p class="text-lg font-bold text-gray-900">2.00 ETH</p>
                                            <p class="ml-2 text-sm font-medium text-gray-500">($9,394)</p>
                                        </div>
                                        <div class="grid grid-cols-2 mt-7 gap-x-4">
                                            <a
                                                href="#"
                                                title=""
                                                class="inline-flex items-center justify-center px-4 py-4 text-sm font-bold text-white transition-all duration-200 bg-gray-900 border border-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 hover:bg-gray-700"
                                                role="button"
                                            >
                                                Place a bid
                                            </a>

<a
                                                href="#"
                                                title=""
                                                class="inline-flex items-center justify-center px-4 py-4 text-sm font-bold text-gray-900 transition-all duration-200 bg-transparent border border-gray-300 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
                                                role="button"
                                            >
                                                View artwork
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

<div class="flex-none w-full sm:w-2/3 lg:w-full lg:flex-1 whitespace-nowrap">
                                <div class="overflow-hidden bg-white rounded shadow-xl">
                                    <div class="aspect-w-4 aspect-h-3">
                                        <img class="object-cover w-full h-full" src="https://cdn.rareblocks.xyz/collection/clarity-ecommerce/images/hero/2/artwork-2.png" alt="" />
                                    </div>
                                    <div class="p-8">
                                        <p class="text-lg font-bold text-gray-900">Jenny-Retro Art</p>
                                        <p class="mt-6 text-xs font-medium tracking-widest text-gray-500 uppercase">Reserved Price</p>
                                        <div class="flex items-end mt-1">
                                            <p class="text-lg font-bold text-gray-900">1.67 ETH</p>
                                            <p class="ml-2 text-sm font-medium text-gray-500">($7,627)</p>
                                        </div>
                                        <div class="grid grid-cols-2 mt-7 gap-x-4">
                                            <a
                                                href="#"
                                                title=""
                                                class="inline-flex items-center justify-center px-4 py-4 text-sm font-bold text-white transition-all duration-200 bg-gray-900 border border-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 hover:bg-gray-700"
                                                role="button"
                                            >
                                                Place a bid
                                            </a>

<div class="flex-none w-full sm:w-2/3 lg:w-full lg:flex-1 whitespace-nowrap">
                                <div class="overflow-hidden bg-white rounded shadow-xl">
                                    <div class="aspect-w-4 aspect-h-3">
                                        <img class="object-cover w-full h-full" src="https://cdn.rareblocks.xyz/collection/clarity-ecommerce/images/hero/2/artwork-3.png" alt="" />
                                    </div>
                                    <div class="p-8">
                                        <p class="text-lg font-bold text-gray-900">Naila-The Angry Girl</p>
                                        <p class="mt-6 text-xs font-medium tracking-widest text-gray-500 uppercase">Reserved Price</p>
                                        <div class="flex items-end mt-1">
                                            <p class="text-lg font-bold text-gray-900">2.40 ETH</p>
                                        </div>
                                        <div class="grid grid-cols-2 mt-7 gap-x-4">
                                            <a
                                                href="#"
                                                title=""
                                                class="inline-flex items-center justify-center px-4 py-4 text-sm font-bold text-white transition-all duration-200 bg-gray-900 border border-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 hover:bg-gray-700"
                                                role="button"
                                            >
                                                Place a bid
                                            </a>

Related Examples