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

271

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

composent clean
composent clean

Author:
Omer fils ELENGA

2 months ago

141
Hero section with big heading

Author:
Leon Bachmann

3 years ago

12k
Creative Hero Section

Author:
Ijila Itunu

9 months ago

1.4k
hero section fullpage

Author:
Leon Bachmann

3 years ago

11.7k
Drinkware landing page

Author:
Maxim

10 months ago

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

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

1 year ago

5.7k
Hero Slider with Alpine.js
This responsive hero slider features full-screen image backgrounds with elegant text overlays and smooth transitions.

Author:
Juraj

8 months ago

2k
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

11 months ago

1.4k
PortfoClean & Colorful Hero Section for Developer Portfolios (Tailwind CSS + Dark Mode)

Author:
SAI BENDE

6 months ago

750
Responsive Hero Section
Key features of this hero section: 1. Responsive layout: Uses a column layout on mobile and switches to a row layout on medium screens and larger. 2. Left side: - Company name as a large heading - Brief description - "Learn More" button 3. Right side: - "Why Choose Us?" section with bullet points - Two call-to-action buttons: "Get Started" and "Contact Sales" 4. Styling: - Uses Tailwind's utility classes for responsive design, colors, spacing, and typography - Incorporates a shadow and rounded corners for the right-side content box - Includes hover effects on buttons for better interactivity This hero section will be fully responsive: - On mobile devices, it will stack vertically with the company info on top and the details below. - On larger screens, it will display in a two-column layout. The use of Tailwind CSS classes ensures that the design is consistent and easily adjustable. You can further customize the colors, fonts, and spacing to match your brand's specific design guidelines. Would you like me to explain any part of this code or make any adjustments?

Author:
zobaidul kaziex

1 year ago

2.7k
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

1 year ago

1.3k
template hero

Author:
Raul antonio de la cruz hernandez

1 month ago

217

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components