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 446 1

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

App Hero Section

Abdul Baset Bappy

1 year ago

1.4k
A hero component
It has a gradient background, a large title with a creative emphasis, and a call-to-action button.

Vikram Choudhary

3 years ago

10k
Product Page
Showcase for the product.

Prem..

4 years ago

34.8k
Intelligent AI tools built to help.
Unlock smarter workflows with AI tools designed to boost productivity, simplify tasks and help you do more with less effort.

Alif Bima Pradana

8 months ago

616
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

MD Mostafa Niloy

11 months ago

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

Hezron Okoko

2 years ago

3.7k
Life Tree
by salvator

Baraka Salvator

1 year ago

1.3k
Hero Section
Modern Gradient Color Scheme - Uses a professional purple-to-teal gradient for visual appeal Animated Elements: Floating decorative circles with subtle animation Fade-in effect for the main illustration Pulsing status indicator Engaging Typography: Gradient text for key phrases Responsive font sizing Clean Poppins font family Social Proof Elements: Client avatars Star ratings Trust indicators ("Trusted by 500+ businesses") Call-to-Action Buttons: Primary gradient button Secondary outlined button Hover effects and transitions Visual Hierarchy: Clear headline with emphasis on transformation Supporting subheading Balanced layout with image Performance Indicators: ROI badge Growth metric badge Responsive Design: Works on mobile and desktop Grid layout that adapts to screen size

KULDEEP

1 year ago

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

738
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Anonymous

3 years ago

10.4k
FLESH & BONE
Stranded in the heart of a cannibal-infested jungle, you must make unthinkable choices to survive. How far will you go to see another sunrise?

gidy

11 months ago

1.2k
Hero section

iamlos

1 year ago

2.2k