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

217

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