Hero

This tailwind example is contributed by Anonymous, on 06-Oct-2026. Component is made with Tailwind v3.4. It is responsive.

Other

Author Anonymous

Tailwind v3.4 29

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">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

Neon container

Anonymous

2 years ago

4.4k
walletp2p

Anonymous

1 year ago

2.2k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Hamza Atig

1 year ago

1.7k
Share button

Maxim

1 year ago

2.2k
card
card products.

Lisa

3 months ago

111
App Hero Section With header

Abdul Baset Bappy

1 year ago

1.5k
Concert ticket

Elijah Davis

3 years ago

14.1k
Table
Table with image and status with pagination buttons

Abhiraj

1 year ago

3k
Coffee & Tea
Coffee: A brewed drink prepared from roasted seeds, called coffee beans, of the coffee plant. Tea: An agricultural product of the leaves, leaf buds, and internodes of various cultivars and sub-varieties of the Camellia sinensis plant, processed and cured using various methods.

Augustin

1 year ago

1.5k
tab3
table

Anonymous

1 month ago

84
super admin
super admin

Tanvir Hasan Bappy (Tanvir)

1 year ago

2.3k
Apple Dock Navigation Bar

Cristian

1 year ago

3.1k