Home
Leon Bachmann
Hero section for website

Hero section for website

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

Hero

Author Leon Bachmann

11.9k

Fork Fullscreen

<div class="flex h-screen justify-center items-center dark:bg-gray-800">
    <div class="text-center max-w-6xl mx-10">
        <p class="my-3 text-sm tracking-widest text-indigo-500 uppercase">Fast &amp; SEO friendly</p>
        <h1 class="my-3 text-3xl font-bold tracking-tight text-gray-800 md:text-5xl dark:text-gray-100">
            Best Service
            Offered Here
        </h1>
        <div>
            <p class="max-w-2xl mx-auto my-2 text-base text-gray-500 md:leading-relaxed md:text-xl dark:text-gray-400">
                Introducing our latest service offering. Get started quickly and efficiently with our range of
                solutions.
                Designed to meet your needs using the latest technologies.
            </p>
        </div>
        <div class="flex flex-col items-center justify-center gap-5 mt-6 md:flex-row"><a
                class="inline-block w-auto text-center min-w-[200px] px-6 py-4 text-white transition-all rounded-md shadow-xl sm:w-auto bg-gradient-to-r from-blue-600 to-blue-500 hover:bg-gradient-to-b dark:shadow-blue-900 shadow-blue-200 hover:shadow-2xl hover:shadow-blue-400 hover:-tranneutral-y-px "
                href="">Browse All Examples
            </a>
            <a class="inline-block w-auto text-center min-w-[200px] px-6 py-4 text-white transition-all bg-gray-700 dark:bg-white dark:text-gray-800 rounded-md shadow-xl sm:w-auto hover:bg-gray-900 hover:text-white shadow-neutral-300 dark:shadow-neutral-700 hover:shadow-2xl hover:shadow-neutral-400 hover:-tranneutral-y-px"
                href="">Seach Examples
            </a>
        </div>
    </div>
</div>

Related Examples

Hero Section
Full width hero section for landing pages

Author:
Manon Daniel

3 years ago

13.8k
Hero section with big heading

Author:
Leon Bachmann

3 years ago

11.9k
Hero template

Author:
Leon Bachmann

3 years ago

13.6k
Hero with description

Author:
Laurits

3 years ago

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

Author:
Anonymous

2 years ago

20.2k
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

8 months ago

1.2k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Author:
Junclarkaizen Pagu

2 years ago

11.8k
Hero banner

Author:
Piet Vriend

3 years ago

16.8k
Tool Box
by salvator

Author:
Baraka Salvator

8 months ago

1.1k
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

11 months ago

1.3k
Rwandan farmers with Canadian markets through sustainable, fair trade practices.
Key Features of This Website: Professional Design: Clean, modern interface with orange/green color scheme representing mangoes and agriculture Fully responsive layout that works on all devices Comprehensive Sections: Hero section highlighting the Rwanda-Canada mango trade Product showcase with different mango varieties Current market pricing table Detailed farm-to-table process explanation Company information and impact metrics Testimonials from partners Contact form and information Trade-Specific Content: Focus on Rwandan mango varieties suitable for Canadian markets Pricing in both USD and kg units common in agricultural trade Information about certifications and compliance Shipping and logistics details User Experience: Clear calls-to-action for quotes and orders Easy navigation between sections Newsletter signup for market updates Contact information prominently displayed Trust Elements: Certifications and compliance badges Impact statistics showing benefits to Rwandan farmers Testimonials from Canadian partners

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1k
Product Page
Showcase for the product.

Author:
muhamadrofii911

1 year ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components