Bootdey

colored users cards

Ready-to-use colored users cards using Tailwind utility classes. No dependencies, no setup—just grab the code and ship.

Preview HTML

HTML code

This is the html code used to create this tailwind snippet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Colored Users Cards - Tailwind CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 mt-8">
    <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-8">
            <div class="bg-cyan-500 text-white p-8 text-center rounded-t-lg shadow-md">
                <div class="mb-5">
                    <h2 class="font-bold text-2xl m-0">
                        Alex Smith
                    </h2>
                    <small class="text-sm">Founder of Mysite</small>
                </div>
                <img src="https://bootdey.com/img/Content/user_1.jpg" class="w-24 h-24 mx-auto mb-5 rounded-full border-4 border-white object-cover" alt="profile">
                <div class="text-sm">
                    <span>100 Tweets</span> <span class="mx-2">|</span>
                    <span>350 Following</span> <span class="mx-2">|</span>
                    <span>610 Followers</span>
                </div>
            </div>
            <div class="p-5 border border-gray-200 bg-white shadow-md rounded-b-lg">
                <h4 class="text-lg font-medium mb-1">Alex Smith</h4>
                <p class="text-gray-600 mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                <div class="text-right space-x-2 flex justify-end flex-wrap">
                    <button class="text-xs py-1 px-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-100 transition duration-150 ease-in-out flex items-center justify-center inline-block">
                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-2.126a2 2 0 01-1.789-2.894l3.5-7zM7 10v.01"></path></svg>
                        Like
                    </button>
                    <button class="text-xs py-1 px-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 ease-in-out flex items-center justify-center inline-block">
                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                        Love
                    </button>
                    <button class="text-xs py-1 px-2 bg-green-500 text-white rounded hover:bg-green-600 transition duration-150 ease-in-out flex items-center justify-center inline-block">
                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-2 4v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"></path></svg>
                        Message
                    </button>
                    <button class="text-xs py-1 px-2 bg-indigo-500 text-white rounded hover:bg-indigo-600 transition duration-150 ease-in-out flex items-center justify-center inline-block">
                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
                        Call
                    </button>
                </div>
            </div>
        </div>

        <div class="w-full md:w-1/2 px-4 mb-8">
            <div class="bg-red-500 text-white p-8 text-center rounded-t-lg shadow-md">
                <div class="mb-5">
                    <h2 class="font-bold text-2xl m-0">
                        Barbao Smith
                    </h2>
                    <small class="text-sm">Founder of something</small>
                </div>
                <img src="https://bootdey.com/img/Content/user_3.jpg" class="w-24 h-24 mx-auto mb-5 rounded-full border-4 border-white object-cover" alt="profile">
                <div class="text-sm">
                    <span>100 Tweets</span> <span class="mx-2">|</span>
                    <span>350 Following</span> <span class="mx-2">|</span>
                    <span>610 Followers</span>
                </div>
            </div>
            <div class="p-5 border border-gray-200 bg-white shadow-md rounded-b-lg">
                <h4 class="text-lg font-medium mb-1">Barbao Smith</h4>
                <p class="text-gray-600 mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                <div class="text-right space-x-2 flex justify-end flex-wrap">
                    <button class="text-xs py-1 px-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-100 transition duration-150 ease-in-out flex items-center justify-center inline-block">
                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-2.126a2 2 0 01-1.789-2.894l3.5-7zM7 10v.01"></path></svg>
                        Like
                    </button>
                    <button class="text-xs py-1 px-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 ease-in-out flex items-center justify-center inline-block">
                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                        Love
                    </button>
                    <button class="text-xs py-1 px-2 bg-green-500 text-white rounded hover:bg-green-600 transition duration-150 ease-in-out flex items-center justify-center inline-block">
                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-2 4v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"></path></svg>
                        Message
                    </button>
                    <button class="text-xs py-1 px-2 bg-indigo-500 text-white rounded hover:bg-indigo-600 transition duration-150 ease-in-out flex items-center justify-center inline-block">
                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
                        Call
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>