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

416

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

pasta
by salvator

Author:
Baraka Salvator

9 months ago

981
template hero

Author:
Raul antonio de la cruz hernandez

3 months ago

462
hero modern
hero modern

Author:
Omer fils ELENGA

2 months ago

361
App Hero Section With header

Author:
Abdul Baset Bappy

9 months ago

1.2k
High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Author:
Ayyamperumal S

1 month ago

279
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

1 year ago

1.5k
Clean hero section

Author:
OmKar Mehta

1 year ago

3.4k
Template hero

Author:
Raul antonio de la cruz hernandez

3 months ago

391
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

1 year ago

5k
Tool Box
by salvator

Author:
Baraka Salvator

10 months ago

1.3k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

1 year ago

2.2k
template hero

Author:
Raul antonio de la cruz hernandez

3 months ago

553

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components