Home
pablitodgb
Components

Components

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

Avatar

Author pablitodgb

152

1

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

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

Author:
Ameth Galarcio

7 months ago

1.4k
User Avatars

Author:
Sophia Baker

2 years ago

10.8k
Elegant Avatars
Useful Tailwind classes for constructing avatars with status markers. Comes with an example edit/preview avatar for the user to choose an image with the file chooser.

Author:
Nick Girga

4 months ago

258
Basic user avatar box with text

Author:
Shakti

2 years ago

10.1k
Profile Card
Show more details on hover

Author:
Tamani Phiri

2 years ago

14.2k
Avatar
Avatar

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

1 year ago

4.6k
Flex Profile
Tailwind Flex User Profile

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

1 year ago

4.4k
Divine Shree Ram Hero Section | Tailwind CSS Responsive UI for Devotional |Hero section |Hero
Explore a stunning and responsive Hero Section dedicated to Lord Ram, crafted with Tailwind CSS. Perfect for spiritual brands, Ramayana-inspired products, or devotional e-commerce platforms. Fully responsive, dark mode compatible, and animation-rich UI.

Author:
Rajesh Pandey

4 months ago

685
Avatar Initial placeholder

Author:
Mr Robot

2 years ago

11.3k
Responsive Pricing Table
can be used when you want to price

Author:
Bonimater

4 months ago

173
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

4 months ago

597
User Avatar
Rounded user avatar component

Author:
Krishna Gudpalle

3 years ago

10k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1