How to Create a Hero Image with Tailwind CSS

Updated: December 7, 2023 By: Khue 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 some text and a button in the foreground) by using Tailwind CSS.


The code:

        class="w-full h-96 bg-[url('')] 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">SLING ACADEMY</span>
            <p class="mt-5 text-center text-lg text-white opacity-70">This webiste is about programming and things like
            <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 class="container p-20">
        <h1 class="text-4xl">Other Content</h1>

That’s it. Happy coding & have fun with Tailwind CSS.

Newest Most Voted
Inline Feedbacks
View all comments