Home
Lukas Müller
Responsive user avatars grid

Responsive user avatars grid

This tailwind example is contributed by Lukas Müller, on 02-Mar-2023. Component is made with Tailwind CSS v3. It is responsive.

Avatar

Author Lukas Müller

10.8k

Fork Fullscreen

<div class="flex space-x-2 items-center animate-out zoom-in duration-200 delay-300">
    <div>
        <div class="font-semibold text-center md:text-left">Trusted by</div>
        <div class="flex space-x-2 items-center flex-col md:flex-row">
            <div class="flex -space-x-2 overflow-hidden p-2">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-gray-200 hover:scale-105 tranform duration-100" src="https://randomuser.me/api/portraits/men/51.jpg" alt="">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-gray-200 hover:scale-105 tranform duration-100" src="https://randomuser.me/api/portraits/women/4.jpg" alt="">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-gray-200 hover:scale-105 tranform duration-100" src="https://randomuser.me/api/portraits/men/34.jpg" alt="">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-gray-200 hover:scale-105 tranform duration-100" src="https://randomuser.me/api/portraits/women/6.jpg" alt="">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-gray-200 hover:scale-105 tranform duration-100" src="https://randomuser.me/api/portraits/men/9.jpg" alt="">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-gray-200 hover:scale-105 tranform duration-100" src="https://randomuser.me/api/portraits/women/9.jpg" alt="">
            </div>
            <div>Join 5,000+ other members</div>
        </div>
    </div>
</div>

Related Examples