Home
Muhammad Umair Arshad
Responsive Hero Section with Typewriter Effect

Responsive Hero Section with Typewriter Effect

A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

This tailwind example is contributed by Muhammad Umair Arshad, on 29-Mar-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Author box, User information

Hero Profile Other Grid

Author Muhammad Umair Arshad

690

Fork Fullscreen

<section id="home" class="flex flex-col lg:flex-row items-center justify-center text-center py-16 px-6 bg-gradient-to-b from-[#0f172a] to-[#1e293b] text-white min-h-screen">
  <div class="w-full sm:w-full lg:w-1/2 flex flex-col justify-center items-center">
    <h1 class="text-4xl md:text-5xl font-bold leading-tight mt-20 pb-4">
      Hello!
      <div class="py-2"></div>
      <span class="text-blue-400 whitespace-nowrap">
        <span class="typewriter">M Umair Arshad</span>
      </span>
    </h1>
    
    <div class="lg:hidden p-10">
      <div class="w-40 h-40 rounded-full border-4 border-gray-600 shadow-lg bg-gray-700 flex items-center justify-center overflow-hidden">
        <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" fill="#9ca3af" viewBox="0 0 16 16">
          <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z"/>
        </svg>
      </div>
    </div>
    
    <p class="max-w-xl text-gray-300 text-lg leading-relaxed text-center">
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum euismod, nisl sit amet convallis gravida, lectus justo suscipit nulla, non ultrices purus nulla id ex. Nulla facilisi. Donec auctor urna eu odio facilisis, nec fringilla metus facilisis. Proin et libero eu justo interdum sagittis vel id arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.    </p>

Related Examples

delivery
It will help us get our stuff delivered to your home in a way that your ordered items are delivered to your home.

Author:
Nishimwe Jeanine

9 months ago

490
invoice 02
product invoice

Author:
Tanvir Hasan Bappy (Tanvir)

11 months ago

930
landi page template

Author:
Raul antonio de la cruz hernandez

2 months ago

219
Very simple hero

Author:
Laurits

3 years ago

9.1k
dreams
hero page by salvator

Author:
Baraka Salvator

10 months ago

1k
Login page

Author:
Reuben Enahoro

1 year ago

2.3k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

11 months ago

873
Background image section

Author:
Marc

2 years ago

6.7k
Responsive Multi-Step Registration
Responsive Multi-Step Registration

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.7k
pages / slides

Author:
MD Fardous Alom

1 year ago

1.5k
Infinity Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN, responsif via mobile and tablet

Author:
Alif Bima Pradana

1 month ago

468
Your upside-down text

Author:
Isabella Kowalski

3 years ago

13.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components