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 442 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

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

10 months ago

1.1k
Minimalistic hero section

Sophia Baker

3 years ago

12k
flower
by salvator

Baraka Salvator

1 year ago

1.8k
Hero section for website

Anonymous

2 years ago

2.5k
Header + simple Hero Section

ABDO-SY

1 year ago

2.9k
chair
by salvator

Baraka Salvator

1 year ago

1.5k
Modern SAAS HERO Section
A hero section for your SAAS application

Emdadul Islam

2 years ago

3.4k
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

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

2 years ago

6.4k
home
html , css

Hacker Development

1 year ago

2.3k
Extra large hero

Gbenga Adegoke

3 years ago

10.9k
Yoga Coach Hero Section

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

2 years ago

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