Home
Riaz Uddin Masum
Tailwind flex Hero

Tailwind flex Hero

Show Image with flex image gallery

This tailwind example is contributed by Riaz Uddin Masum, on 17-Jan-2026. Component is made with Tailwind CSS v3. It is responsive.

Card Hero Team

Author Riaz Uddin Masum

Fork Fullscreen

<div class="container mx-auto flex flex-col md:flex-row items-stretch justify-center gap-5 py-10">
  <div
    class="relative flex md:flex-1 aspect-[1.08/1] overflow-hidden sm:[clip-path:polygon(40%_0,_100%_0,_60%_100%,_0_100%)] md:[clip-path:polygon(40%_0,_100%_0,_60%_100%,_0%_100%)] [&:not(:first-child)]:ml-[-13%]">
    <div class="w-full h-full">
      <a class="flex-1 cursor-pointer text-inherit no-underline outline-none outline-2 outline-transparent outline-offset-2 transition duration-150 ease-out"
        href="#">
        <img
            alt="data.name"
            src="https://images.unsplash.com/photo-1761839256951-10c4468c3621?q=80&w=1742&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            class="block w-full h-full hover:scale-105 object-cover brightness-50 hover:brightness-100 transition-[filter,transform] duration-[200ms,750ms] ease-in-out origin-center will-change-[transform,filter] [backface-visibility:hidden] [transform:translateZ(0)]"
          />
        <div class="absolute left-[50%] top-[50%] z-[2] -translate-x-1/2 -translate-y-1/2">
          <p class="chakra-text css-1vxj0b9">
            <span class="text-white hover-color-teal text-3xl css-1vxj0b9">
                Photo Name
              </span>
          </p>
        </div>
      </a>
    </div>
  </div>
  <div
    class="relative flex md:flex-1 aspect-[1.08/1] overflow-hidden sm:[clip-path:polygon(40%_0,_100%_0,_60%_100%,_0_100%)] md:[clip-path:polygon(40%_0,_100%_0,_60%_100%,_0%_100%)] [&:not(:first-child)]:ml-[-13%]">
    <div class="w-full h-full">
      <a class="flex-1 cursor-pointer text-inherit no-underline outline-none outline-2 outline-transparent outline-offset-2 transition duration-150 ease-out"
        href="#">
        <img
            alt="data.name"
            src="https://images.unsplash.com/photo-1761839258045-6ef373ab82a7?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            class="block w-full h-full hover:scale-105 object-cover brightness-50 hover:brightness-100 transition-[filter,transform] duration-[200ms,750ms] ease-in-out origin-center will-change-[transform,filter] [backface-visibility:hidden] [transform:translateZ(0)]"
          />
        <div class="absolute left-[50%] top-[50%] z-[2] -translate-x-1/2 -translate-y-1/2">
          <p class="chakra-text css-1vxj0b9">
            <span class="text-white hover-color-teal text-3xl css-1vxj0b9">
                Photo Name
              </span>
          </p>
        </div>
      </a>
    </div>
  </div>
  <div
    class="relative flex md:flex-1 aspect-[1.08/1] overflow-hidden sm:[clip-path:polygon(40%_0,_100%_0,_60%_100%,_0_100%)] md:[clip-path:polygon(40%_0,_100%_0,_60%_100%,_0%_100%)] [&:not(:first-child)]:ml-[-13%]">
    <div class="w-full h-full">
      <a class="flex-1 cursor-pointer text-inherit no-underline outline-none outline-2 outline-transparent outline-offset-2 transition duration-150 ease-out"
        href="#">
        <img
            alt="data.name"
            src="https://images.unsplash.com/photo-1768326205103-0ad658551cea?q=80&w=774&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            class="block w-full h-full hover:scale-105 object-cover brightness-50 hover:brightness-100 transition-[filter,transform] duration-[200ms,750ms] ease-in-out origin-center will-change-[transform,filter] [backface-visibility:hidden] [transform:translateZ(0)]"
          />
        <div class="absolute left-[50%] top-[50%] z-[2] -translate-x-1/2 -translate-y-1/2">
          <p class="chakra-text css-1vxj0b9">
            <span class="text-white hover-color-teal text-3xl css-1vxj0b9">
                Photo Name
              </span>
          </p>
        </div>
      </a>
    </div>
  </div>
  <div
    class="relative flex md:flex-1 aspect-[1.08/1] overflow-hidden sm:[clip-path:polygon(40%_0,_100%_0,_60%_100%,_0_100%)] md:[clip-path:polygon(40%_0,_100%_0,_60%_100%,_0%_100%)] [&:not(:first-child)]:ml-[-13%]">
    <div class="w-full h-full">
      <a class="flex-1 cursor-pointer text-inherit no-underline outline-none outline-2 outline-transparent outline-offset-2 transition duration-150 ease-out"
        href="#">
        <img
            alt="data.name"
            src="https://images.unsplash.com/photo-1767719243883-5d6e8d61c403?q=80&w=654&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            class="block w-full h-full hover:scale-105 object-cover brightness-50 hover:brightness-100 transition-[filter,transform] duration-[200ms,750ms] ease-in-out origin-center will-change-[transform,filter] [backface-visibility:hidden] [transform:translateZ(0)]"
          />
        <div class="absolute left-[50%] top-[50%] z-[2] -translate-x-1/2 -translate-y-1/2">
          <p class="chakra-text css-1vxj0b9">
            <span class="text-white hover-color-teal text-3xl css-1vxj0b9">
                Photo Name
              </span>
          </p>
        </div>
      </a>
    </div>
  </div>
</div>

Related Examples

Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

1 year ago

4.3k
Profile, Team or Testimonial
Profile, Team or Testimonial

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

1 year ago

3.7k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

1 year ago

1.9k
Team Section

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

1 year ago

2.3k
Team Members Showcase with Portfolio Backlink
Showcase your team's talent with this beautifully designed and responsive team members grid. Each card includes the member's photo, name, role, and social links. A special portfolio backlink is included to highlight your personal contributions as a developer. Supports light and dark modes.

Author:
Abhiraj

1 year ago

1.7k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

11 months ago

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

Author:
Ameth Galarcio

11 months ago

1.8k
Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

Author:
ABDO-SY

11 months ago

2.3k
Team section
beautiful responsive our team section

Author:
Rajesh Maheshwari

10 months ago

1.2k
Food App Web design

Author:
Aitrik Saha

10 months ago

1.7k
Travel Landing Page: Australia

Author:
Maxim

10 months ago

2.2k
Drinkware landing page

Author:
Maxim

10 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components