Hero section

A hero section for a landing page for a university tech conference.

This tailwind example is contributed by Robert Chunga, on 13-May-2026. Component is made with Tailwind v3.4. It is responsive.

Hero

Author Robert Chunga

Tailwind v3.4 451 2

Fork Fullscreen

<section id="hero" class="relative min-h-screen flex items-center justify-center text-center overflow-hidden">
  <img src="https://images.unsplash.com/photo-1606761568499-6d2451b23c66?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHx1bml2ZXJzaXR5JTIwc3R1ZGVudHN8ZW58MHwwfHx8MTc3ODcwMzgxNnww&ixlib=rb-4.1.0&q=80&w=1080" alt="Tech conference background"
        class="absolute inset-0 w-full h-full object-cover" />
  <div class="absolute inset-0 bg-gradient-to-b from-[hsl(228,60%,10%)]/80  to-[hsl(228,60%,8%)]/80">
    <div class="absolute z-50 top-2 right-4 text-white text-xs">
      Photo by '@domlafou' on Unsplash
    </div>
  </div>

<div class="relative z-10 max-w-7xl mx-auto px-6 py-32 flex flex-col items-center">
    <h1 class="text-4xl sm:text-5xl md:text-7xl font-extrabold text-white leading-tight mb-4 tracking-tight">
      University Tech
      <br />
      <span class="bg-gradient-to-r from-blue-300 to-blue-600 bg-clip-text text-transparent">
            Conference 2026
          </span>
    </h1>

<p class="text-white/70 text-xl md:text-2xl max-w-2xl mb-4 font-light">
      Innovating the Future Through Technology
    </p>

<div class="flex flex-wrap items-center justify-center gap-6 text-white/60 text-sm mb-12 mt-2">
      <div class="flex items-center gap-2">
        <i data-lucide="calendar" class="w-4 h-4 text-blue-600"></i>
        <span>March 14–15, 2026</span>
      </div>
      <div class="w-px h-4 bg-white/70"></div>
      <div class="flex items-center gap-2">
        <i data-lucide="map-pin" class="w-4 h-4 text-blue-600"></i>
        <span>Main Campus Auditorium, Mzuni</span>
      </div>
    </div>

<div class="flex flex-col sm:flex-row gap-4">
      <a href="#register"
        class="text-white bg-blue-600 font-semibold rounded-full transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105 inline-block px-5 py-2 text-lg">Register
        Now</a>
      <a href="#about"
        class="border-2 border-white/70 text-white font-semibold px-5 py-2 text-lg rounded-full transition-all duration-300 hover:bg-white hover:text-blue-600 inline-block">Learn
        More</a>
    </div>

<div class="mt-20 grid grid-cols-3 gap-8 text-center">
      <div>
        <div class="text-3xl md:text-4xl font-bold text-white">100+</div>
        <div class="text-white/50 text-sm mt-1 tracking-wide uppercase">
          Attendees
        </div>
      </div>
      <div>
        <div class="text-3xl md:text-4xl font-bold text-white">5+</div>
        <div class="text-white/50 text-sm mt-1 tracking-wide uppercase">
          Speakers
        </div>
      </div>
      <div>
        <div class="text-3xl md:text-4xl font-bold text-white">10+</div>
        <div class="text-white/50 text-sm mt-1 tracking-wide uppercase">
          Labs
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples

Hero template

Leon Bachmann

3 years ago

14.7k
Responsive Hero Section
Get this professional hero section for your website. Includes a gradient text effect, stylish background blurs, and a perfectly aligned image section. Easy to integrate and fully customizable for any project.

Homayoun

1 year ago

739
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.

SHARIFUL ISLAM

1 year ago

2k
template hero

Raul antonio de la cruz hernandez

10 months ago

707
Inventory
management

Ramkesh Gupta

1 year ago

900
3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

10.1k
Single Page Portfolio

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

3.2k
A Fullscreen Hero Section

Brandon D

4 years ago

23.4k
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.

Abdul Baset Bappy

1 year ago

1.4k
Product Page
Showcase for the product.

muhamadrofii911

2 years ago

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

Akram Khan

2 years ago

3.1k
Hero Section>> visually striking and incorporates some different elements.
Key features of this alternative hero section: 1. Background: - Uses a gradient overlay on top of a background image for depth. - Incorporates a semi-transparent dark overlay for better text contrast. 2. Layout: - Maintains a two-column layout on larger screens, stacking on mobile. - Left side focuses on a bold, three-line tagline and concise description. - Right side features a glassmorphic card with key selling points. 3. Design Elements: - Uses a custom Google Font (Poppins) for a modern look. - Incorporates rounded buttons with hover effects. - Features colorful icons for the selling points. - Adds a decorative wave SVG at the bottom for visual interest. 4. Responsiveness: - Adjusts padding, font sizes, and layout for different screen sizes. - Stacks buttons vertically on very small screens. 5. Interactivity: - Includes hover effects on buttons and links. This design aims to create a more visually impactful first impression while still maintaining clarity and focus on the key messages and call-to-action elements. The use of a background image with overlays adds depth, while the glassmorphic card on the right adds a modern touch. You can further customize this by: - Changing the background image URL to one that fits your brand. - Adjusting colors in the gradient, buttons, and icons to match your brand colors. - Modifying the tagline, description, and selling points to fit your company's message. Would you like me to explain any part of this code or make any further adjustments?

zobaidul kaziex

2 years ago

6.1k