How to Create a Hero Image with Tailwind CSS

Last updated on July 15, 2022 Pennywise Loading... 2 comments

On many modern websites, there are usually one or several hero images. These are large photos and often take up space at the top of the page. The purpose of hero images is to highlight the website’s purpose in a concise way. The example below shows you how to create a typical hero image with Tailwind CSS.

Screenshot:

The code:

<body>
    <header
        class="w-full h-96 bg-[url('https://www.kindacode.com/wp-content/uploads/2022/06/hero-image-example.jpeg')] bg-cover bg-center flex justify-center items-center">
        <div class="flex flex-col justify-center items-center">
            <h1 class=" text-center text-5xl text-white font-bold drop-shadow-lg">WELCOME TO
            <span class="text-amber-500">KINDACODE.COM</span>
            </h1>
            <p class="mt-5 text-center text-lg text-white opacity-70">This webiste is about programming and things like
                that</p>
            <a class="mt-8 px-12 py-3 bg-gradient-to-r from-amber-500 to-red-600 hover:from-amber-600 hover:to-red-700 text-xl text-white/70 font-semibold drop-shadow-lg rounded-full"
                href="#">Get Started</a>
        </div>
    </header>
    <div class="container p-20">
        <h1 class="text-4xl">Other Content</h1>
    </div>
</body>

Further reading:

You can also check out our CSS category page for the latest tutorials and examples.

Subscribe
Notify of
guest
2 Comments
Inline Feedbacks
View all comments
Vivian
Vivian
26 days ago

Hello, thanks for sharing! There is a typo in the 2nd div tag. An extra ”

        <div class="flex flex-col justify-center items-center"">  
A Goodman
Admin
A Goodman
26 days ago
Reply to  Vivian

Thanks for pointing that out

You May Also Like