Home
zobaidul kaziex
Hero Section

Hero Section

I created a unique and dynamic hero section using TailwindCSS and HTML5. The design features an animated gradient background that smoothly transitions colors, creating a visually appealing backdrop. Additionally, animated blurry blobs add a fluid and modern touch. The centered content includes a bold welcome message, a brief description, and a clear call-to-action button, all styled for responsiveness and a seamless user experience.

This tailwind example is contributed by zobaidul kaziex, on 11-Jun-2024. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author zobaidul kaziex

279

Fork Fullscreen

<body class="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 animate-gradientBG flex items-center justify-center min-h-screen overflow-hidden relative">
    <div class="absolute top-0 left-0 w-96 h-96 bg-white opacity-30 rounded-full filter blur-3xl animate-blob animation-delay-2000"></div>
    <div class="absolute top-0 right-0 w-96 h-96 bg-white opacity-30 rounded-full filter blur-3xl animate-blob animation-delay-4000"></div>
    <div class="absolute bottom-0 left-0 w-96 h-96 bg-white opacity-30 rounded-full filter blur-3xl animate-blob animation-delay-6000"></div>
    <div class="relative z-10 text-center p-8">
        <h1 class="text-6xl font-bold text-white mb-4">Welcome to the Future</h1>
        <p class="text-xl text-white mb-8">Experience innovation and technology like never before.</p>
        <a href="#learn-more" class="inline-block bg-blue-500 text-white font-semibold py-3 px-6 rounded-lg shadow-lg hover:bg-blue-600 transition duration-300">Learn More</a>
    </div>
</body>

Related Examples