Hero

This tailwind example is contributed by Aman kumar, on 31-Jan-2024. 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 Aman kumar

5.9k

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.

Author:
Vikram Choudhary

1 year ago

9.4k
Modern resume template
modern resume template with data

Author:
Amit Pachange

1 year ago

20.1k
Landing page

Author:
Freja Jensen

2 years ago

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

Author:
Conan Hilton

2 years ago

14.2k
Resume template for tech field
IT industry resume layout

Author:
Nishant Trivedi

1 year ago

8.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.

Author:
AyDin VM

1 year ago

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

Author:
Junclarkaizen Pagu

1 year ago

10.6k
A Fullscreen Hero Section

Author:
Brandon D

2 years ago

18.8k
Simple landing page

Author:
Lîmåã M

2 years ago

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

Author:
Cosimo Fazio

1 year ago

5.6k
Hero Section
Home hero section search bar

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

1 year ago

6.5k
Basic landing page template

Author:
Anonymous

1 year ago

11.1k
Simple resume card

Author:
Anonymous

1 year ago

9.3k
tailwind one page resume cv template
tailwind one page resume cv template

Author:
Geoffrey Callaghan

1 year ago

4.3k
Animated Title
App Logo or Main Title

Author:
khalidrootdevs

1 year ago

6.4k
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

1 year ago

6.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components