Extra large hero

This tailwind example is contributed by Gbenga Adegoke, on 14-Mar-2023. Component is made with Tailwind v3.4. It is responsive.

Hero

Author Gbenga Adegoke

Tailwind v3.4 10.9k 8

Fork Fullscreen

<div class="bg-gray-100 font-sans">
    <div class="container mx-auto px-4 py-8">
        <nav class="flex justify-between items-center">
            <a href="#" class="font-bold text-xl text-indigo-600">My Site</a>
            <div>
                <a href="#" class="text-gray-600 hover:text-gray-900 mx-4">Home</a>
                <a href="#" class="text-gray-600 hover:text-gray-900 mx-4">About</a>
                <a href="#" class="text-gray-600 hover:text-gray-900 mx-4">Contact</a>
                <a href="#" class="text-gray-600 hover:text-gray-900 mx-4">Blog</a>
            </div>
        </nav>
        <div class="flex flex-col justify-center items-center my-16">
            <h1 class="text-5xl font-bold text-gray-800 leading-tight">Welcome to My Site</h1>
            <p class="text-2xl text-gray-600 mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <button class="bg-indigo-600 hover:bg-indigo-700 text-white text-xl mt-8 py-4 px-8 rounded-lg">Get Started</button>
        </div>
    </div>
</div>