Tailwind CSS Avatars
There are 10 available components in this category, preview them all!
Default
Fully responsive design
Supports dark mode
HTML code snippet
React code snippet
Vue.js code snippet
Screenshot
![Screenshot preview of Default](https://cdn.tailkit.com/media/screenshots/application-ui/components/avatars/default.jpg)
Rounded
Fully responsive design
Supports dark mode
HTML code snippet
React code snippet
Vue.js code snippet
Screenshot
![Screenshot preview of Rounded](https://cdn.tailkit.com/media/screenshots/application-ui/components/avatars/rounded.jpg)
Default with Indicators
Fully responsive design
Supports dark mode
HTML code snippet
React code snippet
Vue.js code snippet
Screenshot
![Screenshot preview of Default with Indicators](https://cdn.tailkit.com/media/screenshots/application-ui/components/avatars/default-with-indicators.jpg)
Rounded with Indicators
Fully responsive design
Supports dark mode
HTML code snippet
React code snippet
Vue.js code snippet
Screenshot
![Screenshot preview of Rounded with Indicators](https://cdn.tailkit.com/media/screenshots/application-ui/components/avatars/rounded-with-indicators.jpg)
Default Stacked
Fully responsive design
Supports dark mode
HTML code snippet
React code snippet
Vue.js code snippet
Screenshot
![Screenshot preview of Default Stacked](https://cdn.tailkit.com/media/screenshots/application-ui/components/avatars/default-stacked.jpg)
Rounded Stacked
Fully responsive design
Supports dark mode
HTML code snippet
React code snippet
Vue.js code snippet
Screenshot
![Screenshot preview of Rounded Stacked](https://cdn.tailkit.com/media/screenshots/application-ui/components/avatars/rounded-stacked.jpg)
Default Placeholder
Fully responsive design
Supports dark mode
HTML code snippet
React code snippet
Vue.js code snippet
Screenshot
![Screenshot preview of Default Placeholder](https://cdn.tailkit.com/media/screenshots/application-ui/components/avatars/default-placeholder.png)
Rounded Placeholder
Fully responsive design
Supports dark mode
HTML code snippet
React code snippet
Vue.js code snippet
Screenshot
![Screenshot preview of Rounded Placeholder](https://cdn.tailkit.com/media/screenshots/application-ui/components/avatars/rounded-placeholder.png)
Default Placeholder Text
Fully responsive design
Supports dark mode
HTML code snippet
React code snippet
Vue.js code snippet
Screenshot
![Screenshot preview of Default Placeholder Text](https://cdn.tailkit.com/media/screenshots/application-ui/components/avatars/default-placeholder-text.png)
Rounded Placeholder Text
Fully responsive design
Supports dark mode
HTML code snippet
React code snippet
Vue.js code snippet
Screenshot
![Screenshot preview of Rounded Placeholder Text](https://cdn.tailkit.com/media/screenshots/application-ui/components/avatars/rounded-placeholder-text.png)
![Background image with component grid](https://cdn.tailkit.com/media/landing/components-hero@0.5x.png)
Level up your design today