Home
Akram Khan
Advance Designed hero section

Advance Designed hero section

We create a Advance animated hero section using tailwindcss and custom css

This tailwind example is contributed by Akram Khan, on 06-Jul-2024. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author Akram Khan

1.7k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Extreme Hero Section</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @keyframes neon-pulse {
            0%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00ffff, 0 0 35px #00ffff, 0 0 40px #00ffff, 0 0 50px #00ffff, 0 0 75px #00ffff; }
            50% { text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff, 0 0 10px #00ffff, 0 0 17px #00ffff, 0 0 20px #00ffff, 0 0 25px #00ffff, 0 0 37px #00ffff; }
        }

.neon-text {
            animation: neon-pulse 1.5s infinite alternate;
        }

.bg-animated {
            background: linear-gradient(-45deg, #000000, #1a1a1a, #000033, #003366);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }

@keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

.glitch {
            position: relative;
        }

.glitch::before,
        .glitch::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

.glitch::before {
            left: 2px;
            text-shadow: -2px 0 #ff00de;
            clip: rect(24px, 550px, 90px, 0);
            animation: glitch-anim 3s infinite linear alternate-reverse;
        }

.glitch::after {
            left: -2px;
            text-shadow: -2px 0 #00ffff;
            clip: rect(85px, 550px, 140px, 0);
            animation: glitch-anim 2s infinite linear alternate-reverse;
        }

@keyframes glitch-anim {
            0% { clip: rect(39px, 9999px, 71px, 0); }
            5% { clip: rect(76px, 9999px, 53px, 0); }
            10% { clip: rect(42px, 9999px, 16px, 0); }
            15% { clip: rect(94px, 9999px, 33px, 0); }
            20% { clip: rect(3px, 9999px, 5px, 0); }
            25% { clip: rect(21px, 9999px, 100px, 0); }
            30% { clip: rect(79px, 9999px, 82px, 0); }
            35% { clip: rect(56px, 9999px, 18px, 0); }
            40% { clip: rect(6px, 9999px, 38px, 0); }
            45% { clip: rect(65px, 9999px, 91px, 0); }
            50% { clip: rect(31px, 9999px, 56px, 0); }
            55% { clip: rect(88px, 9999px, 71px, 0); }
            60% { clip: rect(13px, 9999px, 43px, 0); }
            65% { clip: rect(50px, 9999px, 9px, 0); }
            70% { clip: rect(27px, 9999px, 68px, 0); }
            75% { clip: rect(85px, 9999px, 25px, 0); }
            80% { clip: rect(44px, 9999px, 93px, 0); }
            85% { clip: rect(19px, 9999px, 39px, 0); }
            90% { clip: rect(71px, 9999px, 86px, 0); }
            95% { clip: rect(2px, 9999px, 62px, 0); }
            100% { clip: rect(54px, 9999px, 47px, 0); }
        }

.hover-3d {
            transition: transform 0.3s;
        }

.hover-3d:hover {
            transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) rotateZ(2deg);
        }

.particle {
            position: absolute;
            border-radius: 50%;
        }

@keyframes float-up {
            to {
                transform: translateY(-100vh) rotate(360deg);
                opacity: 0;
            }
        }
    </style>
</head>
<body class="bg-animated min-h-screen flex items-center justify-center p-4 overflow-hidden">
    <div id="particles"></div>
    <div class="text-center z-10">
        <h1 class="text-6xl font-bold mb-4 text-white neon-text glitch hover-3d" data-text="CYBERSPACE">CYBERSPACE</h1>
        <p class="text-xl text-cyan-300 mb-8">Enter the digital realm of infinite possibilities</p>
        <button class="bg-gradient-to-r from-cyan-500 to-blue-500 text-white font-bold py-3 px-8 rounded-full hover:from-cyan-600 hover:to-blue-600 transition-all duration-300 hover:scale-110 inline-block">
            <i class="fas fa-rocket mr-2"></i>Launch Now
        </button>
    </div>

setInterval(createParticle, 50);
    </script>
</body>
</html>

Related Examples

Welcome banner for developers portfolio
A hero section welcoming visitors to a portfolio or website. It features a large, visually appealing title and an image.

Author:
Vikram Choudhary

1 year ago

10k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

6 months ago

1.2k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

3 months ago

820
SHOES SHOP
all categories of shoes like women ,men ,and children

Author:
ineza aime stella

2 months ago

290
Portfolio Hero Section 4

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

8 months ago

3.1k
Responsive Hero Section
Key features of this hero section: 1. Responsive layout: Uses a column layout on mobile and switches to a row layout on medium screens and larger. 2. Left side: - Company name as a large heading - Brief description - "Learn More" button 3. Right side: - "Why Choose Us?" section with bullet points - Two call-to-action buttons: "Get Started" and "Contact Sales" 4. Styling: - Uses Tailwind's utility classes for responsive design, colors, spacing, and typography - Incorporates a shadow and rounded corners for the right-side content box - Includes hover effects on buttons for better interactivity This hero section will be fully responsive: - On mobile devices, it will stack vertically with the company info on top and the details below. - On larger screens, it will display in a two-column layout. The use of Tailwind CSS classes ensures that the design is consistent and easily adjustable. You can further customize the colors, fonts, and spacing to match your brand's specific design guidelines. Would you like me to explain any part of this code or make any adjustments?

Author:
zobaidul kaziex

1 year ago

2.1k
Very simple hero

Author:
Laurits

2 years ago

8.6k
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Author:
Abdul Baset Bappy

4 months ago

651
Macbook Air 13" Mockup
A gorgeous component that can be used for landing pages, hero statements and more. Interested in our UI library? Check out the discord link in my bio.

Author:
Coastal UI

9 months ago

1.9k
Minimalistic Hero Section with Radial Gradient for E-Commerce
This hero section features a modern radial gradient background where the center remains white and fades into a soft blue at the edges. Designed for an e-commerce website, it provides a clean, elegant, and visually appealing layout with a bold headline, a call-to-action button, and a seamless user experience. The responsive design ensures a great appearance on all screen sizes.

Author:
SHARIFUL ISLAM

5 months ago

863
Hero banner

Author:
Piet Vriend

2 years ago

16.1k
Modern CV Template - Stylish HTML and Tailwind CSS Design for Professionals
Download this modern CV template crafted with HTML and Tailwind CSS. Featuring a clean, stylish design and easy customization, this CV template is perfect for professionals looking to make a strong impression. Showcase your skills, experience, and education with a visually appealing and responsive layout.

Author:
Hezron Okoko

11 months ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components