Home
Reuben Enahoro
Mobile Developer Hero

Mobile Developer Hero

This tailwind example is contributed by Reuben Enahoro, on 30-Sep-2025. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author Reuben Enahoro

345

Fork Fullscreen

<div class="my-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28 flex gap-8 lg:gap-12 items-center flex-col-reverse lg:flex-row">
      
      <div class="sm:text-center lg:text-left flex-1">
        <h1 id="hero-heading" class="text-4xl tracking-tight font-extrabold text-gray-800 sm:text-5xl md:text-6xl">
          <span class="block xl:inline dark:text-gray-800">Full Stack Mobile</span>
          <span class="block text-transparent bg-clip-text bg-[#066F6F] dark:from-[#066F6F] dark:to-purple-400 xl:inline">Developer</span>
        </h1>

<p class="mt-3 text-base text-gray-500 dark:text-gray-400 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
          Building mobile-first, full-stack solutions for modern applications.
        </p>

<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
          <div class="rounded-md shadow-lg transform transition-transform hover:scale-105 hover:-translate-y-1">
            <a href="#projects" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#066F6F] hover:border-2 hover:bg-none hover:text-[#066F6F] hover:border-[#066F6F] md:py-4 md:text-lg md:px-10 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
              View Projects
            </a>
          </div>
          <div class="mt-3 sm:mt-0 sm:ml-3 transform transition-transform hover:scale-105 hover:-translate-y-1">
            <a href="#contact" class="w-full flex items-center justify-center px-8 py-3 border-2 border-[#066F6F] dark:border-[#066F6F] text-base font-medium rounded-md text-[#066F6F] dark:text-[#066F6F] bg-transparent hover:bg-indigo-50 dark:hover:bg-indigo-900/20 md:py-4 md:text-lg md:px-10 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
              Get in Touch
            </a>
          </div>
        </div>
      </div>

<div class="flex-1 relative w-full lg:w-1/2">
        <div class="relative w-full h-full min-h-[400px] sm:min-h-[500px] lg:min-h-[600px] animate-bounce-slow">
          
          <div class="absolute inset-0 bg-gradient-to-br from-indigo-100 to-purple-100 dark:from-indigo-900/20 dark:to-purple-900/20 rounded-3xl blur-2xl opacity-50" aria-hidden="true"></div>

<img id="hero-image" src="https://cdn.pixabay.com/photo/2024/02/15/22/58/ai-generated-8576296_1280.jpg" class="relative w-full h-full object-cover rounded-2xl shadow-2xl" alt="Mobile development workspace with IDE and devices" loading="eager" />

<div class="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent rounded-2xl pointer-events-none" aria-hidden="true"></div>
        </div>

<div class="absolute -bottom-4 -left-4 bg-white dark:bg-gray-800 rounded-xl shadow-xl p-4 border border-gray-100 dark:border-gray-700">
          <div class="flex items-center gap-3">
            <div class="w-12 h-12 rounded-full bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
              </svg>
            </div>
            <div>
              <p class="text-sm font-semibold text-gray-900 dark:text-white">5+ Years</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Experience</p>
            </div>
          </div>
        </div>

<div class="absolute -top-4 -right-4 bg-white dark:bg-gray-800 rounded-xl shadow-xl p-4 border border-gray-100 dark:border-gray-700">
          <div class="flex items-center gap-3">
            <div class="w-12 h-12 rounded-full bg-gradient-to-br from-green-500 to-emerald-500 flex items-center justify-center">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <div>
              <p class="text-sm font-semibold text-gray-900 dark:text-white">200K+</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Downloads</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

Related Examples

super cube
complex landing page for super cube created by salvator

Author:
Baraka Salvator

9 months ago

1k
Hero Section
Created a good and responsive web Hero Page

Author:
Ravi.Kumar Kumar

1 year ago

2.7k
Drinkware 2

Author:
Maxim

11 months ago

1k
Slide
A slide component which could be used as hero section or in a slideshow

Author:
farid

1 year ago

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

1 year ago

1.7k
Summer Collection 2025
Summer Collection 2025

Author:
matoleo chance

9 months ago

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

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.7k
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

1 year ago

1.4k
Yoga Coach Hero Section

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

6k
test
test

Author:
Anonymous

8 months ago

700
Hero section responsive

Author:
Samuel Dawson

3 years ago

15.4k
Modern page
hero page by salvator

Author:
Baraka Salvator

9 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components