Home
Leon Bachmann
hero section fullpage

hero section fullpage

This tailwind example is contributed by Leon Bachmann, on 24-Jan-2023. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author Leon Bachmann

10.4k

Fork Fullscreen

<div class="px-4 mx-auto mt-16 mb-16 max-w-7xl sm:mt-24">
        <div class="text-center">
            <h1 class="text-4xl font-extrabold tracking-tight text-gray-200 sm:text-5xl md:text-6xl font-title">
                <span class="block">Leading US-Based cycle maker</span>
                <span class="block pt-2">New Product Launch</span>
            </h1>
            <p class="max-w-md mx-auto mt-3 text-base text-gray-300 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
                Innovative technology to revolutionize industry standards,
                Available for pre-order now and shipping to customers in the coming months
            </p>
            <div class="max-w-md mx-auto mt-5 sm:flex sm:justify-center md:mt-8">

</div>

Related Examples

Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Author:
Brandon D

2 years ago

28.1k
Clean hero section
Hero template with buttons

Author:
Laurits

1 year ago

13.7k
Product Page
Showcase for the product.

Author:
Prem..

2 years ago

26.4k
Typical SAAS hero section

Author:
Eamon Carter

1 year ago

8.1k
Hero section with a gradient background
With text overlay, and a call-to-action button

Author:
Anonymous

1 year ago

16.2k
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

6 months ago

934
Digital banking hero
Create a professional and trustworthy hero section for a banking landing page using TailwindCSS. This section features a bold, confidence-inspiring headline, a clear subheading emphasizing security and ease of banking, and a call-to-action button for account sign-ups or exploring services. With a modern, clean design, a background that reflects stability and innovation, and visually appealing elements, this hero section establishes credibility and trust. Ideal for online banking, fintech startups, and financial institutions, ensuring a seamless and engaging user experience.

Author:
SHARIFUL ISLAM

1 week ago

73
Hero component

Author:
Freja Jensen

2 years ago

11.8k
Hero section with button

Author:
Samuel Dawson

2 years ago

11.3k
A Fullscreen Hero Section

Author:
Hasan AlDoy (McDoy)

4 weeks ago

95
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:
Vernon Francis

5 months ago

1k
Hero (with dark mode)
Full-width hero section with background image overlay. Includes headline, description text and CTA buttons. Supports dark mode and responsive design.

Author:
Maxim

1 month ago

151

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components