Mobile Developer Hero

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

Hero

Author Reuben Enahoro

Tailwind v3.4 1.2k 1

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

DevPort
modern portifolio by salvator

Baraka Salvator

1 year ago

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

Sahil Sasapara

2 years ago

5.7k
mobil navigation
mobil navigation

Omer fils ELENGA

11 months ago

1.2k
Minimalistic hero section

Sophia Baker

3 years ago

12k
Scooby’s Hello – A Tailwind CSS Cartoon Animation
A playful animation built with Tailwind CSS and minimal custom CSS, featuring a cartoon-style Scooby-inspired dog sliding in from the left, wagging its tail, and cheerfully saying "Hello!"—perfect for adding personality to a fun web project.

Bonimater

1 year ago

1.3k
pasta
by salvator

Baraka Salvator

1 year ago

1.4k
landi page template

Raul antonio de la cruz hernandez

10 months ago

647
Hero Section
Home hero section search bar

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

2 years ago

8.5k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Ayyamperumal S

1 year ago

2.9k
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.

Rathanak Phan

1 year ago

1.8k
Hero template

Leon Bachmann

3 years ago

14.7k
Single Page Portfolio

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

1 year ago

3.2k