Bootdey

light contact list

Ready-to-use light contact list 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>Light Contact List - Tailwind</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-[#f7f7ff] pt-5">

<div class="container mx-auto px-4">
    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-6">
        
        <!-- Contact Card 1 -->
        <div class="col-span-1">
            <div class="bg-white rounded-2xl shadow-[0_2px_6px_0_rgba(218,218,253,0.65),0_2px_6px_0_rgba(206,206,238,0.54)] mb-6">
                <div class="p-6 text-center">
                    <div class="p-4 border border-gray-200 rounded-2xl">
                        <img src="https://bootdey.com/img/Content/avatar/avatar7.png" width="110" height="110" class="rounded-full shadow-md mx-auto" alt="Pauline I. Bird">
                        <h5 class="mb-0 mt-5 text-lg font-semibold text-gray-800">Pauline I. Bird</h5>
                        <p class="mb-3 text-gray-500">Webdeveloper</p>
                        <div class="flex justify-center gap-2 mt-3 mb-3">
                            <a href="#" class="w-9 h-9 flex items-center justify-center bg-[#3b5998] text-white rounded-full hover:opacity-90 transition-opacity">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                                </svg>
                            </a>
                            <a href="#" class="w-9 h-9 flex items-center justify-center bg-[#55acee] text-white rounded-full hover:opacity-90 transition-opacity">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                                </svg>
                            </a>
                            <a href="#" class="w-9 h-9 flex items-center justify-center bg-[#0976b4] text-white rounded-full hover:opacity-90 transition-opacity">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                                </svg>
                            </a>
                        </div>
                        <div>
                            <a href="#" class="inline-block w-full py-2 px-4 border border-blue-500 text-blue-500 rounded-2xl hover:bg-blue-500 hover:text-white transition-colors font-medium">Contact Me</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Contact Card 2 -->
        <div class="col-span-1">
            <div class="bg-white rounded-2xl shadow-[0_2px_6px_0_rgba(218,218,253,0.65),0_2px_6px_0_rgba(206,206,238,0.54)] mb-6">
                <div class="p-6 text-center">
                    <div class="p-4 border border-gray-200 rounded-2xl">
                        <img src="https://bootdey.com/img/Content/avatar/avatar1.png" width="110" height="110" class="rounded-full shadow-md mx-auto" alt="Ralph L. Alva">
                        <h5 class="mb-0 mt-5 text-lg font-semibold text-gray-800">Ralph L. Alva</h5>
                        <p class="mb-3 text-gray-500">UI Developer</p>
                        <div class="flex justify-center gap-2 mt-3 mb-3">
                            <a href="#" class="w-9 h-9 flex items-center justify-center bg-[#3b5998] text-white rounded-full hover:opacity-90 transition-opacity">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                                </svg>
                            </a>
                            <a href="#" class="w-9 h-9 flex items-center justify-center bg-[#55acee] text-white rounded-full hover:opacity-90 transition-opacity">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                                </svg>
                            </a>
                            <a href="#" class="w-9 h-9 flex items-center justify-center bg-[#0976b4] text-white rounded-full hover:opacity-90 transition-opacity">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                                </svg>
                            </a>
                        </div>
                        <div>
                            <a href="#" class="inline-block w-full py-2 px-4 border border-blue-500 text-blue-500 rounded-2xl hover:bg-blue-500 hover:text-white transition-colors font-medium">Contact Me</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Contact Card 3 -->
        <div class="col-span-1">
            <div class="bg-white rounded-2xl shadow-[0_2px_6px_0_rgba(218,218,253,0.65),0_2px_6px_0_rgba(206,206,238,0.54)] mb-6">
                <div class="p-6 text-center">
                    <div class="p-4 border border-gray-200 rounded-2xl">
                        <img src="https://bootdey.com/img/Content/avatar/avatar6.png" width="110" height="110" class="rounded-full shadow-md mx-auto" alt="John B. Roman">
                        <h5 class="mb-0 mt-5 text-lg font-semibold text-gray-800">John B. Roman</h5>
                        <p class="mb-3 text-gray-500">Graphic Designer</p>
                        <div class="flex justify-center gap-2 mt-3 mb-3">
                            <a href="#" class="w-9 h-9 flex items-center justify-center bg-[#3b5998] text-white rounded-full hover:opacity-90 transition-opacity">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                                </svg>
                            </a>
                            <a href="#" class="w-9 h-9 flex items-center justify-center bg-[#55acee] text-white rounded-full hover:opacity-90 transition-opacity">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                                </svg>
                            </a>
                            <a href="#" class="w-9 h-9 flex items-center justify-center bg-[#0976b4] text-white rounded-full hover:opacity-90 transition-opacity">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                                </svg>
                            </a>
                        </div>
                        <div>
                            <a href="#" class="inline-block w-full py-2 px-4 border border-blue-500 text-blue-500 rounded-2xl hover:bg-blue-500 hover:text-white transition-colors font-medium">Contact Me</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Contact Card 4 -->
        <div class="col-span-1">
            <div class="bg-white rounded-2xl shadow-[0_2px_6px_0_rgba(218,218,253,0.65),0_2px_6px_0_rgba(206,206,238,0.54)] mb-6">
                <div class="p-6 text-center">
                    <div class="p-4 border border-gray-200 rounded-2xl">
                        <img src="https://bootdey.com/img/Content/avatar/avatar2.png" width="110" height="110" class="rounded-full shadow-md mx-auto" alt="David O. Buckley">
                        <h5 class="mb-0 mt-5 text-lg font-semibold text-gray-800">David O. Buckley</h5>
                        <p class="mb-3 text-gray-500">Android Developer</p>
                        <div class="flex justify-center gap-2 mt-3 mb-3">
                            <a href="#" class="w-9 h-9 flex items-center justify-center bg-[#3b5998] text-white rounded-full hover:opacity-90 transition-opacity">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                                </svg>
                            </a>
                            <a href="#" class="w-9 h-9 flex items-center justify-center bg-[#55acee] text-white rounded-full hover:opacity-90 transition-opacity">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                                </svg>
                            </a>
                            <a href="#" class="w-9 h-9 flex items-center justify-center bg-[#0976b4] text-white rounded-full hover:opacity-90 transition-opacity">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                                </svg>
                            </a>
                        </div>
                        <div>
                            <a href="#" class="inline-block w-full py-2 px-4 border border-blue-500 text-blue-500 rounded-2xl hover:bg-blue-500 hover:text-white transition-colors font-medium">Contact Me</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

</body>
</html>