Hero

This tailwind example is contributed by Aman kumar, on 31-Jan-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Front page,CV template

Header Hero Landing Page Resume template

Author Aman kumar

Tailwind v3.4 7.7k 6

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

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.

Vikram Choudhary

2 years ago

11.8k
Modern resume template
modern resume template with data

Amit Pachange

3 years ago

23.3k
Landing page

Freja Jensen

3 years ago

14k
Resume template for tech field
IT industry resume layout

Nishant Trivedi

3 years ago

10.6k
Landing Page Template
source https://github.com/gary149/tailwindcss-landing-gradients/blob/master/index.html

Conan Hilton

4 years ago

16.9k
My Personal Landing page
This HTML document showcases Aydin Vesali Moghaddam's personal portfolio, highlighting his journey in web development. The page features a responsive design that adapts to various screen sizes, ensuring a seamless user experience across devices. It includes a personal introduction, a brief overview of Aydin's tech journey, and a contact form for visitors to subscribe to updates. Additionally, the page provides links to Aydin's Discord, website, and Twitter, offering multiple avenues for connecting and staying updated on his projects.

AyDin VM

2 years ago

6.7k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Junclarkaizen Pagu

3 years ago

12.2k
A Fullscreen Hero Section

Brandon D

4 years ago

23.3k
Simple landing page

Lîmåã M

3 years ago

20.4k
Hero Banner
visually striking banner section It features pattern background with using SVG

Cosimo Fazio

2 years ago

6.9k
Hero Section
Home hero section search bar

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

2 years ago

8.4k
Basic landing page template

Anonymous

3 years ago

12.4k
Simple resume card

Anonymous

3 years ago

10.9k
tailwind one page resume cv template
tailwind one page resume cv template

Geoffrey Callaghan

2 years ago

5.5k
Responsive Navbar
Tailwind Navbar

Md. Tofayel islam

2 years ago

8.5k
Animated Title
App Logo or Main Title

khalidrootdevs

2 years ago

7.5k