Hero simple

hero design simple

This tailwind example is contributed by QQ-VVN, on 11-May-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Hero Navbar

Author QQ-VVN

Tailwind v3.4 1.9k 3

Fork Fullscreen

<div class="relative min-h-screen overflow-hidden bg-gradient-to-br from-gray-900 via-purple-900 to-violet-900">
  
  <div class="absolute inset-0 overflow-hidden">
    <div class="absolute -top-40 -left-40 w-80 h-80 bg-purple-500/30 rounded-full filter blur-3xl animate-blob"></div>
    <div class="absolute top-0 -right-20 w-80 h-80 bg-indigo-500/20 rounded-full filter blur-3xl animate-blob animation-delay-2000"></div>
    <div class="absolute bottom-40 left-20 w-80 h-80 bg-blue-500/20 rounded-full filter blur-3xl animate-blob animation-delay-4000"></div>
    <div class="absolute -bottom-40 right-40 w-80 h-80 bg-pink-500/20 rounded-full filter blur-3xl animate-blob animation-delay-3000"></div>
  </div>
  
  
  <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ4MCIgaGVpZ2h0PSI2NTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik03MzkuNSAzOTguNWwtNi41LTEgNi41LTEgMS02LjUgMS02LjUgMS02LjUgMS02LjUgNi41LTEgNi41LTEgNi41LTEgNi41LTEgMS02LjUgMS02LjUgMS02LjUgMS02LjUgNi41LTEgNi41LTEgNi41LTEgNi41LTEgMS02LjUgMS02LjUgMS02LjUgMS02LjUgNi41LTEgNi41LTEgNi41LTEgNi41LTEgMS02LjUgMS02LjUgMS02LjUgMS02LjUgNi41LTEgNi41LTEgNi41LTEgNi41LTEiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjIpIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiLz48L3N2Zz4=')] opacity-10"></div>
  
  
  <nav class="relative z-10 px-6 py-6 flex justify-between items-center">
    <div class="flex items-center space-x-2">
      <div class="w-10 h-10 bg-gradient-to-tr from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center shadow-lg shadow-indigo-500/30">
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
        </svg>
      </div>
      <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-300">NexusFlow</span>
    </div>
    
    <div class="hidden md:flex items-center space-x-8">
      <a href="#" class="text-gray-300 hover:text-white transition-colors duration-300">Ana Sayfa</a>
      <a href="#" class="text-gray-300 hover:text-white transition-colors duration-300">Özellikler</a>
      <a href="#" class="text-gray-300 hover:text-white transition-colors duration-300">Fiyatlandırma</a>
      <a href="#" class="text-gray-300 hover:text-white transition-colors duration-300">Hakkımızda</a>
      <a href="#" class="text-gray-300 hover:text-white transition-colors duration-300">İletişim</a>
    </div>
    
    <div class="flex items-center space-x-4">
      <a href="#" class="px-4 py-2 text-sm text-white bg-transparent border border-indigo-400/30 rounded-lg hover:bg-indigo-500/10 transition-all duration-300">Giriş Yap</a>
      <a href="#" class="px-4 py-2 text-sm text-white bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:from-indigo-500 hover:to-purple-500 shadow-lg shadow-indigo-600/30 transition-all duration-300">Ücretsiz Başla</a>
    </div>
  </nav>
  
  
  <div class="relative z-10 container mx-auto px-6 py-16 md:py-24 flex flex-col md:flex-row items-center">
    
    <div class="md:w-1/2 space-y-8 text-center md:text-left">
      <div class="inline-block px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-300 text-sm font-medium">
        <span class="flex items-center">
          <span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse mr-2"></span>
          Yeni Nesil Teknoloji Platformu
        </span>
      </div>
      
      <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight">
        <span class="block text-white">Geleceğin Teknolojisi</span>
        <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400">Bugün Elinizde</span>
      </h1>
      
      <p class="text-gray-300 text-lg md:text-xl max-w-xl">
        Dijital dönüşümünüzü hızlandırın. Yapay zeka destekli çözümlerimizle işletmenizi geleceğe taşıyın ve rekabet avantajı elde edin.
      </p>
      
      <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center md:justify-start">
        <a href="#" class="px-8 py-4 text-white bg-gradient-to-r from-indigo-600 to-purple-600 rounded-xl hover:from-indigo-500 hover:to-purple-500 shadow-lg shadow-indigo-600/30 transition-all duration-300 transform hover:-translate-y-1 flex items-center justify-center space-x-2">
          <span>Hemen Başla</span>
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
          </svg>
        </a>
        
        <a href="#" class="px-8 py-4 text-white bg-transparent border border-indigo-400/30 rounded-xl hover:bg-indigo-500/10 transition-all duration-300 transform hover:-translate-y-1 flex items-center justify-center space-x-2">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span>Demo İzle</span>
        </a>
      </div>
      
      <div class="pt-8">
        <p class="text-gray-400 text-sm mb-4">Güvendikleri için teşekkürler</p>
        <div class="flex flex-wrap items-center justify-center md:justify-start gap-6">
          <img src="https://tailwindui.com/img/logos/tuple-logo-gray-300.svg" alt="Tuple" class="h-8 opacity-50 hover:opacity-100 transition-opacity duration-300">
          <img src="https://tailwindui.com/img/logos/mirage-logo-gray-300.svg" alt="Mirage" class="h-8 opacity-50 hover:opacity-100 transition-opacity duration-300">
          <img src="https://tailwindui.com/img/logos/statickit-logo-gray-300.svg" alt="StaticKit" class="h-8 opacity-50 hover:opacity-100 transition-opacity duration-300">
          <img src="https://tailwindui.com/img/logos/transistor-logo-gray-300.svg" alt="Transistor" class="h-8 opacity-50 hover:opacity-100 transition-opacity duration-300">
        </div>
      </div>
    </div>
    
    
    <div class="md:w-1/2 mt-12 md:mt-0 flex justify-center">
      <div class="relative">
        
        <div class="relative z-10 bg-gradient-to-br from-indigo-500/10 to-purple-500/10 backdrop-blur-xl border border-indigo-500/10 rounded-2xl p-1 shadow-2xl shadow-indigo-500/20">
          <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1965&q=80" alt="Dashboard" class="rounded-xl w-full max-w-lg">
        </div>
        
        
        <div class="absolute -top-6 -right-6 w-20 h-20 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full filter blur-xl opacity-50 animate-pulse"></div>
        <div class="absolute -bottom-6 -left-6 w-20 h-20 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full filter blur-xl opacity-50 animate-pulse animation-delay-2000"></div>
        
        
        <div class="absolute -left-16 top-1/4 bg-gradient-to-br from-gray-900 to-gray-800 border border-indigo-500/20 rounded-lg p-4 shadow-lg shadow-indigo-500/10 backdrop-blur-xl w-48 transform -rotate-6 hover:rotate-0 transition-all duration-300">
          <div class="flex items-center space-x-3">
            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
              <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
              </svg>
            </div>
            <span class="text-white font-medium">Analitik</span>
          </div>
          <div class="mt-3 text-gray-300 text-sm">Gerçek zamanlı veri analitiği ile işletmenizi izleyin</div>
        </div>
        
        <div class="absolute -right-16 bottom-1/4 bg-gradient-to-br from-gray-900 to-gray-800 border border-indigo-500/20 rounded-lg p-4 shadow-lg shadow-indigo-500/10 backdrop-blur-xl w-48 transform rotate-6 hover:rotate-0 transition-all duration-300">
          <div class="flex items-center space-x-3">
            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center">
              <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
              </svg>
            </div>
            <span class="text-white font-medium">Performans</span>
          </div>
          <div class="mt-3 text-gray-300 text-sm">%300 daha hızlı yükleme süreleri ve optimizasyon</div>
        </div>
      </div>
    </div>
  </div>
  
  
  <div class="absolute bottom-0 left-0 right-0">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="w-full h-auto">
      <path fill="rgba(255,255,255,0.03)" fill-opacity="1" d="M0,288L48,272C96,256,192,224,288,197.3C384,171,480,149,576,165.3C672,181,768,235,864,250.7C960,267,1056,245,1152,224C1248,203,1344,181,1392,170.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
    </svg>
  </div>
</div>

</div>

Related Examples

Hero w/ navbar
the modern and clean hero section

Carla Hoffman

2 years ago

5.9k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

16k
beautifull web page
I create a web page using cloude ai its amazing.

Akram Khan

2 years ago

3.5k
Portfolio Hero Section 5

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

1 year ago

2.9k
Garden
by salvator

Baraka Salvator

1 year ago

2.3k
Life Tree
by salvator

Baraka Salvator

1 year ago

1.3k
portifolio
skills

ishimwe prince

1 year ago

1.6k
DevPort
modern portifolio by salvator

Baraka Salvator

1 year ago

1.5k
Modern page
hero page by salvator

Baraka Salvator

1 year ago

1.9k
flower
by salvator

Baraka Salvator

1 year ago

1.8k
modern portifolio
by salvator

Baraka Salvator

1 year ago

1.1k
chair
by salvator

Baraka Salvator

1 year ago

1.5k