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

361

2

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

Responsive Pricing Table
can be used when you want to price

Author:
Bonimater

7 months ago

434
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

1 year ago

3.8k
Profit Card
Profit card with deatils

Author:
dongol heart

1 year ago

2.1k
Ripple Animation

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

8 months ago

1.8k
Avatar
This Avatar component includes: 1. Responsive design using Tailwind CSS classes 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. User avatar with hover effect and online status indicator 5. User name and role 6. Follow button with hover effect 7. Follower count 8. Subtle animations and transitions 9. Accessibility considerations (proper contrast, focus states) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The avatar card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - The avatar image has a border color that changes in dark mode - The avatar has a scale effect on hover and a ring appears around it - The Follow button uses Indigo-800 with a Blue-900 hover state - The card has a shadow effect that changes color on hover - Dark mode is automatically applied based on system preferences - The entire card has a subtle transition effect for smooth color changes - Proper focus states are implemented for the button This design provides a clean, interactive avatar component while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

1 year ago

2.3k
Food delivery ecommerce Card

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

11 months ago

1.7k
User avatar with name

Author:
Bunny

2 years ago

9.3k
CTA block
with user avatars and 2 buttons

Author:
Carla Hoffman

1 year ago

2.6k
Responsive user avatars grid

Author:
Lukas Müller

2 years ago

11.8k
Flex Profile
Tailwind Flex User Profile

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

1 year ago

4.4k
Shoe Card Grid
A responsive grid of three shoe cards with hover effects, featuring images, titles, descriptions, prices, and a "Shop Now" button.

Author:
Sudip chaudhary

6 months ago

427
User avatar with name

Author:
Prajwal Hallale

2 years ago

8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ 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.12