Home
Casimiro Rocha
Cards - Users Card

Cards - Users Card

Users card grid list

This tailwind example is contributed by Casimiro Rocha, on 29-Oct-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Author box, User information

Card Profile Team Grid

Author Casimiro Rocha

985

Fork Fullscreen

<!DOCTYPE html>
<html class="dark">

<div class="border-b dark:border-gray-600 mb-5 flex justify-between text-2xl">
            <div class="dark:text-white flex items-center pb-2 pr-2 border-primary-600 dark:border-primary-600">
                <svg xmlns="http://www.w3.org/2000/svg" height="25" fill="currentColor" class="bi bi-people-fill"
                    viewBox="0 0 16 16">
                    <path
                        d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5" />
                </svg>
                <a href="#" class="font-semibold inline-block ml-2">All Users</a>
            </div>
            <a href="#"
                class="transition-all duration-500 text-gray dark:text-gray-500 dark:hover:text-white flex items-center space-x-2">
                <span>More</span> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                    class="bi bi-arrow-right" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                        d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" />
                </svg>
            </a>
        </div>

<div
                class="transition-all duration-500 rounded overflow-hidden shadow-lg shadow-gray-900/50 flex flex-col bg-gray-100 dark:bg-gray-800 border dark:border-gray-600 hover:shadow-2xl hover:shadow-gray-500">
                <a href="#"></a>
                <div class="relative"><a href="#">
                        <img class="w-full" src="https://daddybrasil.s3-sa-east-1.amazonaws.com/Rainara/fotos/large/16936876831693517420.jpg"
                        alt="Sunset in the mountains">
                        <div
                            class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-15">
                        </div>
                    </a>
                    <a href="#!">
                        <div
                            class="text-xs rounded absolute border shadow-lg top-0 right-0 bg-primary-600 px-2.5 py-1.5 text-white mt-2 mr-2 hover:bg-primary-900 transition duration-500 ease-in-out">
                            Feature
                        </div>
                    </a>
                </div>
                <div class="p-4 border-b dark:border-gray-500">
                    <a href="#"
                        class="font-medium text-lg inline-block dark:text-white hover:text-primary-600 transition duration-500 ease-in-out inline-block mb-2">
                        @Vanessa, 28
                    </a>
                    <p class="text-gray-500 text-sm">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </p>
                </div>
                <div class="px-6 py-3 flex flex-row items-center justify-between bg-gray-200/20 dark:bg-gray-700">
                    <button type="button" class="relative inline-flex items-center p-2.5 text-sm font-medium text-center text-white bg-gray-400 rounded-lg hover:bg-gray-600 focus:ring-4 focus:outline-none focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800">
                    <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
                    <path d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z"/>
                    <path d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z"/>
                    </svg>
                    <span class="sr-only">Notifications</span>
                    <div class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 -end-2 dark:border-primary-500">5</div>
                    </button>

<button type="button" class="text-gray-500 border border-gray-300 hover:bg-gray-700 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center me-2 dark:border-gray-500 dark:text-gray-500 dark:hover:text-white dark:focus:ring-gray-800 dark:hover:bg-gray-500">
                    <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
                    <path d="M3 7H1a1 1 0 0 0-1 1v8a2 2 0 0 0 4 0V8a1 1 0 0 0-1-1Zm12.954 0H12l1.558-4.5a1.778 1.778 0 0 0-3.331-1.06A24.859 24.859 0 0 1 6 6.8v9.586h.114C8.223 16.969 11.015 18 13.6 18c1.4 0 1.592-.526 1.88-1.317l2.354-7A2 2 0 0 0 15.954 7Z"/>
                    </svg>
                    <span class="sr-only">Icon description</span>
                    </button>
                </div>
            </div>

<div
                class="transition-all duration-500 rounded overflow-hidden shadow-lg shadow-gray-900/50 flex flex-col bg-gray-100 dark:bg-gray-800 border dark:border-gray-600 hover:shadow-2xl hover:shadow-gray-500">
                <a href="#"></a>
                <div class="relative"><a href="#">
                        <img class="w-full" src="https://daddybrasil.s3-sa-east-1.amazonaws.com/Rafacalza/fotos/large/1623639833ASF5W9I0BwU7BezUugG2yM66OYpFmUDLSsOxxwjG.jpg"
                        alt="Sunset in the mountains">
                        <div
                            class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-15">
                        </div>
                    </a>
                    <a href="#!">
                        <div
                            class="text-xs rounded absolute border shadow-lg top-0 right-0 bg-primary-600 px-2.5 py-1.5 text-white mt-2 mr-2 hover:bg-primary-900 transition duration-500 ease-in-out">
                            Feature
                        </div>
                    </a>
                </div>
                <div class="p-4 border-b dark:border-gray-500">
                    <a href="#"
                        class="font-medium text-lg inline-block dark:text-white hover:text-primary-600 transition duration-500 ease-in-out inline-block mb-2">
                        @Lary, 25
                    </a>
                    <p class="text-gray-500 text-sm">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </p>
                </div>
                <div class="px-6 py-3 flex flex-row items-center justify-between bg-gray-200/20 dark:bg-gray-700">
                    <button type="button" class="relative inline-flex items-center p-2.5 text-sm font-medium text-center text-white bg-gray-400 rounded-lg hover:bg-gray-600 focus:ring-4 focus:outline-none focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800">
                    <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
                    <path d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z"/>
                    <path d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z"/>
                    </svg>
                    <span class="sr-only">Notifications</span>
                    <div class=" absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 -end-2 dark:border-primary-500">6</div>
                    </button>

<button type="button" class="text-gray-500 border border-gray-300 hover:bg-gray-700 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center me-2 dark:border-gray-500 dark:text-white dark:border-primary-200 dark:focus:ring-primary-800 dark:bg-primary-500">
                    <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
                    <path d="M3 7H1a1 1 0 0 0-1 1v8a2 2 0 0 0 4 0V8a1 1 0 0 0-1-1Zm12.954 0H12l1.558-4.5a1.778 1.778 0 0 0-3.331-1.06A24.859 24.859 0 0 1 6 6.8v9.586h.114C8.223 16.969 11.015 18 13.6 18c1.4 0 1.592-.526 1.88-1.317l2.354-7A2 2 0 0 0 15.954 7Z"/>
                    </svg>
                    <span class="sr-only">Icon description</span>
                    </button>
                </div>
            </div>

<div
                class="transition-all duration-500 rounded overflow-hidden shadow-lg shadow-gray-900/50 flex flex-col bg-gray-100 dark:bg-gray-800 border dark:border-gray-600 hover:shadow-2xl hover:shadow-gray-500">
                <a href="#"></a>
                <div class="relative"><a href="#">
                        <img class="w-full" src="https://daddybrasil.s3-sa-east-1.amazonaws.com/Loirinhaaap/fotos/large/17023521471702352142.jpg"
                        alt="Sunset in the mountains">
                        <div
                            class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-15">
                        </div>
                    </a>
                    <a href="#!" class="hidden">
                        <div
                            class="text-xs rounded absolute border shadow-lg top-0 right-0 bg-primary-600 px-2.5 py-1.5 text-white mt-2 mr-2 hover:bg-primary-900 transition duration-500 ease-in-out">
                            Feature
                        </div>
                    </a>
                </div>
                <div class="p-4 border-b dark:border-gray-500">
                    <a href="#"
                        class="font-medium text-lg inline-block dark:text-white hover:text-primary-600 transition duration-500 ease-in-out inline-block mb-2">
                        @Jhenny, 27
                    </a>
                    <p class="text-gray-500 text-sm">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </p>
                </div>
                <div class="px-6 py-3 flex flex-row items-center justify-between bg-gray-200/20 dark:bg-gray-700">
                    <button type="button" class="relative inline-flex items-center p-2.5 text-sm font-medium text-center text-white bg-gray-400 rounded-lg hover:bg-gray-600 focus:ring-4 focus:outline-none focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800">
                    <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
                    <path d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z"/>
                    <path d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z"/>
                    </svg>
                    <span class="sr-only">Notifications</span>
                    <div class="hidden absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 -end-2 dark:border-primary-500">2</div>
                    </button>

</html>

Related Examples