Home
Ravi.Kumar Kumar
Hero Section

Hero Section

Created a good and responsive web Hero Page

This tailwind example is contributed by Ravi.Kumar Kumar, on 12-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Hero

Author Ravi.Kumar Kumar

1.9k

Fork Fullscreen

<section class="relative  text-white overflow-hidden  ">
      <div class="absolute inset-0 bg-black opacity-50"></div>
      <div
        class="absolute inset-0 bg-cover bg-center "
               style="background-image: url('https://www.leadsnextech.com/_next/static/media/bg.153fe1e6.jpg'); filter: brightness(0.4);"

></div>

<div class="container mx-auto lg:px-12 px-5 py-24 md:py-32 relative z-10 lg:h-[90vh]">
        <div class="flex flex-col md:flex-row items-center justify-around">
          <div class="w-full md:w-1/2 mb-12 md:mb-0 relative">
            <h1 class="text-5xl md:text-8xl font-bold mb-6 leading-tight ">
              Leads
              <br />
              <span class="bg-gradient-to-r from-blue-700 via-green-400 to-indigo-400 inline-block text-transparent bg-clip-text">
                NexTech
              </span>
            </h1>

<p class="text-xl mb-5 text-gray-300 ">
              Harnessing Research for developing Sustainable, Scalable, &
              Impactful Solutions.
            </p>
            <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 ">
              <button class="group relative w-full sm:w-auto px-6 py-3 min-w-[160px]">
                <div class="absolute inset-0 bg-gradient-to-r from-violet-600 to-cyan-600 rounded-lg"></div>
                <div class="absolute inset-0 bg-gradient-to-r from-violet-600 to-cyan-600 rounded-lg lg:blur-md blur-0 group-hover:opacity-60 transition-opacity duration-500"></div>
                <div class="relative flex items-center justify-center gap-2">
                  <span class="text-white font-medium">Get Started</span>
                  <svg
                    class="w-5 h-5 text-white transform group-hover:translate-x-1 transition-transform"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M13 7l5 5m0 0l-5 5m5-5H6"
                    />
                  </svg>
                </div>
              </button>

<button class="w-full sm:w-auto px-6 py-3 rounded-lg border border-white/10 bg-white/5 backdrop-blur-lg text-white/70 hover:bg-white/10 hover:text-white transition-all min-w-[160px]">
                Documentation
              </button>
            </div>
           
          </div>

<div class="w-full md:w-2/5 md:pl-12 ">
            <div class="bg-white bg-opacity-10 backdrop-filter md:backdrop-blur-lg relative  rounded-xl p-8 shadow-2xl">
              <h2 class="text-2xl font-semibold mb-6">Why Choose Us?</h2>
              <img
                src="img/leadsNexTech-logo-transparent.png"
                alt="Logo"
                class="h-16 right-2 top-2 drop_shadow lg:block md:block hidden  absolute"
              />
              <ul class="space-y-4">
                <li class="flex items-center">
                  <svg
                    class="w-6 h-6 mr-3 text-yellow-400"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M13 10V3L4 14h7v7l9-11h-7z"
                    ></path>
                  </svg>
                  <span>Data-Driven EarthTech Solutions</span>
                </li>
                <li class="flex items-center">
                  <svg
                    class="w-6 h-6 mr-3 text-green-400"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
                    ></path>
                  </svg>
                  <span>Human-Centric AI & Analytics</span>
                </li>
                <li class="flex items-center">
                  <svg
                    class="w-6 h-6 mr-3 text-purple-400"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
                    ></path>
                  </svg>
                  <span>NextGen Technology for a Sustainable Future</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

Related Examples

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.

Author:
SHARIFUL ISLAM

7 months ago

1.1k
Responsive Header and Hero Section Design
Responsive Header and Hero Section Design provides flexible adaptability across all screen sizes and devices.

Author:
ABDO-SY

7 months ago

2.2k
Hero section in react js
hero portfolio section in react js

Author:
SAI BENDE

1 year ago

4.8k
Animated Hero Slider, different images for mobile
A hero with 2 images alternating each other every 7 seconds, zoom on scroll

Author:
Gianluca Secondo

7 months ago

815
Basic hero section

Author:
Lîmåã M

2 years ago

16.2k
Home
html , css

Author:
Hacker Development

4 months ago

328
Smooth Slide-in Animation for Text in Tailwind CSS
Learn how to create a smooth slide-in animation for text using Tailwind CSS. This guide covers defining custom animations in tailwind.config.js and applying them to elements for a modern and engaging UI effect. 🚀

Author:
Vikas Kushwah

6 months ago

1.1k
Drinkware landing page

Author:
Maxim

6 months ago

1.1k
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

3 months ago

629
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)

3 months ago

367
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Author:
Muhammad Umair Arshad

5 months ago

361
animated hero

Author:
Crimson

8 months ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components