Hero

Forked from> @Aman300/header-page

This tailwind example is contributed by Hasan AlDoy (McDoy), on 19-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Front page,CV template

Header Hero Landing Page Resume template

Author Hasan AlDoy (McDoy)

1.6k

Fork Fullscreen

<div>
  <div class="flex h-screen items-center justify-center bg-gray-900 p-5">
    <div class="grid md:grid-cols-2 grid-cols-1 items-center gap-10 md:px-10">
      <div>
        <h1 class="mb-2 text-3xl font-bold text-white"><span class="text-green-500">Hi,</span> I'm Full Stack Developer</h1>
        <p class="mb-6 text-white">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut excepturi magnam enim officiis facilis numquam corporis quos accusantium tempora, dolores quod cum facere architecto soluta atque corrupti a alias perferendis.</p>
        <div class="flex justify-center space-x-5">
          <button class="flex w-full items-center justify-center gap-1 rounded-2xl bg-rose-500 p-5 py-3 font-semibold text-white hover:bg-rose-700">
            Follow
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
            </svg>
          </button>
          <button class="flex w-full items-center justify-center gap-2 rounded-2xl bg-white p-5 py-3 font-semibold">
            Resume
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="m9 12.75 3 3m0 0 3-3m-3 3v-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
            </svg>
          </button>
        </div>
      </div>
      <div>
        <img src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=600" alt="" class="md:size-96 size-72 rounded-full " />
      </div>
    </div>
  </div>
</div>

Related Examples

animated hero

Author:
Crimson

1 year ago

3.6k
Hero section with bold heading

Author:
Abigail

3 years ago

11.7k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

1 year ago

1.9k
Animated Hero Slider, different images for mobile
A hero with 2 images alternating each other every 7 seconds, zoom on scroll

Author:
Gianluca Secondo

1 year ago

1.5k
Hero

Author:
ABDO-SY

1 year ago

2k
Welcome banner for developers portfolio
A hero section welcoming visitors to a portfolio or website. It features a large, visually appealing title and an image.

Author:
Vikram Choudhary

2 years ago

11.2k
Bongo IT Company — Innovate. Transform. Succeed.
Bongo IT Company — Innovate. Transform. Succeed.

Author:
Tanvir Hasan Bappy (Tanvir)

1 week ago

144
Hero Section
Home hero section search bar

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

2 years ago

8k
Organize your work, master your flow
Organize your work, master your flow

Author:
Tanvir Hasan Bappy (Tanvir)

2 months ago

130
Hero section with call to action buttons

Author:
Prashant

3 years ago

15.4k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

1 year ago

2.2k
Pro Camera System
The Action Mode on iPhone 15 is a camera feature that provides extreme stabilization for shooting smooth, shake-free videos—ideal for fast movement or handheld filming. 🔍 Key Features: Super Stabilized Videos – Great for running, walking, or action shots. High Quality – Captures in up to 2.8K at 60fps while staying stable. Improved Low-Light Performance – Better than iPhone 14’s version. Automatic Adjustments – Detects motion and adapts accordingly.

Author:
ishimwe prince

10 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components