Home
iamlos
Hero section

Hero section

This tailwind example is contributed by iamlos, on 27-Feb-2025. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author iamlos

1.3k

Fork Fullscreen

<section class="w-full flex items-center justify-center min-h-screen overflow-hidden bg-gradient-to-b from-[#10111D] to-green-300">
  
  <div class="absolute inset-0 bg-black bg-opacity-50"></div>

<div class="relative z-10 container mx-auto px-4 text-center text-white">
    <h1 class="mb-6 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl" style="line-height: 1.2">
      We Make <span class="relative whitespace-nowrap text-green-300 dark:text-green-400">
        <svg aria-hidden="true" viewBox="0 0 418 42" class="absolute top-2/3 left-0 h-[0.58em] w-full fill-pink-400/70 dark:fill-pink-300/60" preserveAspectRatio="none">
          <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.780 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.540-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.810 23.239-7.825 27.934-10.149 28.304-14.005 .417-4.348-3.529-6-16.878-7.066Z"></path>
        </svg>
        <span class="relative ">Connecting with Coaches</span>
      </span> Easier with Jetson AI
    </h1>
    <p class="mx-auto mb-8 max-w-2xl text-lg">
      Professional photography services for weddings, events, portraits, and commercial shoots. Let us tell your story through our lens.
    </p>

<div class="flex justify-center items-center mt-8" data-aos="fade-up" data-aos-delay="400">
      <a href="#pricing" rel="noopener noreferrer"
        class="relative flex items-center justify-center px-6 py-3 bg-green-600 hover:bg-green-700 text-white text-lg font-semibold rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200">
        <span class="absolute inset-0 rounded-full bg-green-600 opacity-50 animate-pulse"></span>
        <span class="relative z-10 pr-2">Book Now</span>
      </a>
    </div>
  </div>

<div class="absolute sm:bottom-14 bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
    <a href="#about" class="cursor-pointer">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
      </svg>
    </a>
  </div>
</section>

Related Examples

opulent
this a page didicated for laptops,phones using tailwindcss

Author:
ishimwe shadad

5 months ago

731
Portfolio Hero Section 5

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

7 months ago

1.7k
PortfoClean & Colorful Hero Section for Developer Portfolios (Tailwind CSS + Dark Mode)

Author:
SAI BENDE

3 months ago

369
flower
by salvator

Author:
Baraka Salvator

5 months ago

868
Hero

Author:
ABDO-SY

8 months ago

1.2k
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)

4 months ago

771
Hero section with Big Heading
Hero banner with a gradient background, ideal for showcasing products or services. I also support dark mode.

Author:
Mereani Waqa

2 years ago

8.3k
Hero Section

Author:
Gbenga Adegoke

2 years ago

9.8k
Magic Sound
by salvator

Author:
Baraka Salvator

5 months ago

733
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

1 year ago

4.8k
Hero section with search

Author:
TailwindFlex

3 years ago

11.7k
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

1 year ago

2.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components