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

490

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

Responsive Grid with Featured image

Author:
_Amar_

2 years ago

10.9k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

2 years ago

44.6k
Responsive Feature Card

Author:
Gopi Yadav

2 years ago

12k
Profile card
Profile card with social icons

Author:
Krishna Gudpalle

2 years ago

11.7k
Responsive Article Section

Author:
Prashant

2 years ago

13k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Author:
Prashant

2 years ago

55.9k
Products card grid
Example of product card grid with product image and pricing

Author:
Noob

2 years ago

19.2k
User profile card with Cover Image

Author:
Noob

2 years ago

24k
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

10.1k
User Profile Card
Useful for testimonials and reviews section

Author:
Abhijit Sen

1 year ago

9.4k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

1 year ago

19.6k
Minimal Profile card

Author:
Abhijit Sen

1 year ago

9.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components