Tailwind Avatar Group
Tailwind avatar group component with Alpine.js
![Tailwind Avatar Group Image 1](/_ipx/_/tailwind-avatar-group.png)
Details About Tailwind Avatar Group
Key points:
- Open Source
- JavaScript Plugin
- Copy & Paste
- Tailwind CSS v3.0+
- Responsive Design
Contents
Code Example
<div class="flex min-h-screen items-center justify-center bg-gray-100">
<div class="inline-flex -space-x-4 overflow-hidden rounded-lg">
<img class="h-10 w-10 rounded-full border-2 border-white" src="https://tailkits.com/_ipx/s_100x100/yucel-faruk-sahan.jpg" alt="Avatar 1" />
<img class="h-10 w-10 rounded-full border-2 border-white" src="https://tailkits.com/_ipx/s_100x100/yucel-faruk-sahan.jpg" alt="Avatar 2" />
<img class="h-10 w-10 rounded-full border-2 border-white" src="https://tailkits.com/_ipx/s_100x100/yucel-faruk-sahan.jpg" alt="Avatar 3" />
<span class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-white bg-blue-100 text-sm font-medium">+3</span>
</div>
</div>
FAQ
Why aren't Alpine.js functions working?
Make sure you've correctly included Alpine.js and Tailwind CSS in your project. Check your browser's console for any error messages and verify that your scripts are loaded in the correct order.
How do I install Alpine.js into my project?
To install Alpine.js in your project, you can use a CDN by adding a script tag to your HTML file. Alternatively, you can install it via npm by running the appropriate command in your terminal and then importing it into your JavaScript file. Visit alpinejs.dev/essentials/installation for the official install gudie.