Components

This tailwind example is contributed by pablitodgb, on 23-Jul-2025. Component is made with Tailwind v3.4. It is responsive.

Avatar

Author pablitodgb

Tailwind v3.4 1k 3

Fork Fullscreen

<div class="h-dvh w-dvh text-slate-100 bg-gradient-to-t from-slate-400 to-gray-300 flex justify-center items-center dark:text-slate-600 dark:from-cyan-700 dark:to-blue-200">
  <div class="p-1 m-1 space-y-2 h-auto min-w-xs w-full max-w-full bg-transparent grid grid-flow-col grid-rows-4 gap-4 outline outline-2 outline-slate-200 shadow-xl dark:outline-orange-300 dark:shadow-blue-500 rounded-xl">
    <img class="w-52 h-52 object-cover rounded-full outline outline-2 outline-slate-200 shadow-xl dark:outline-orange-300 dark:shadow-blue-500" src="https://images.unsplash.com/photo-1591475247035-5b01b01636b3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw3fHxsYW5kfGVufDB8MXx8fDE3NTEyMTY1Njh8MA&ixlib=rb-4.1.0&q=80&w=1080" alt="#"/>
    <img class="w-52 h-52 object-cover rounded-full outline outline-2 outline-slate-200 shadow-xl dark:outline-orange-300 dark:shadow-blue-500" src="https://images.unsplash.com/photo-1591475247035-5b01b01636b3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw3fHxsYW5kfGVufDB8MXx8fDE3NTEyMTY1Njh8MA&ixlib=rb-4.1.0&q=80&w=1080" alt="#"/>
    <img class="w-52 h-52 object-cover rounded-full outline outline-2 outline-slate-200 shadow-xl dark:outline-orange-300 dark:shadow-blue-500" src="https://images.unsplash.com/photo-1591475247035-5b01b01636b3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw3fHxsYW5kfGVufDB8MXx8fDE3NTEyMTY1Njh8MA&ixlib=rb-4.1.0&q=80&w=1080" alt="#"/>
    <div class="col-span-1 grid grid-cols-subgrid gap-2">
      <img class="w-52 h-52 object-cover rounded-full outline outline-2 outline-slate-200 shadow-xl col-start-2 dark:outline-orange-300 dark:shadow-blue-500" src="https://images.unsplash.com/photo-1591475247035-5b01b01636b3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw3fHxsYW5kfGVufDB8MXx8fDE3NTEyMTY1Njh8MA&ixlib=rb-4.1.0&q=80&w=1080" alt="#"/>
    </div>
  </div>
</div>

Related Examples

Profile Card
Show more details on hover

Tamani Phiri

3 years ago

15.2k
Profit Card
Profit card with deatils

dongol heart

1 year ago

3k
canvas fully covers
canvas fully covers

ABDESLAMI ACHRAF

1 year ago

5.1k
Chat UI
The Chat UI is a responsive and interactive component designed for building messaging interfaces. Ideal for applications like customer support, social media, or team collaboration tools, it provides a modern, user-friendly layout for real-time communication.

Abhiraj

1 year ago

4.4k
Avatar group

Laurits

3 years ago

10k
User Avatars

Sophia Baker

3 years ago

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

Ameth Galarcio

1 year ago

2.4k
CTA block
with user avatars and 2 buttons

Carla Hoffman

2 years ago

3.2k
User avatar group

JaxStone

3 years ago

15.6k
Intelligent AI tools built to help.
Unlock smarter workflows with AI tools designed to boost productivity, simplify tasks and help you do more with less effort.

Alif Bima Pradana

8 months ago

616
card

pablitodgb

1 year ago

1.1k
User list
User list

Anonymous

1 year ago

975

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.