Home
Tailwind Free Snippets
nextjs-profile-card-tailwind

nextjs-profile-card-tailwind

This tailwind example is contributed by Tailwind Free Snippets, on 28-Sep-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Author box, User information

Card Profile

Author Tailwind Free Snippets

1.4k

Fork Fullscreen

<div class="flex bg-[#f0feff] justify-center items-center h-screen">
    <div class="max-w-[490px] rounded-lg w-[100%] overflow-hidden bg-white shadow-[0_0_1rem_rgba(0,0,0,0.2)] ">
        <div class="card">
            <div class="grid grid-cols-5">
                <div class="col-span-2 p-3">
                    <img src="https://svgshare.com/i/16D0.svg" alt="demo" />
                </div>
                <div class="col-span-3 p-3">
                    <div class="font-bold">Darlene Robertson</div>
                    <div class="mb-3">Senior Journalist</div>
                    <div
                        class="card flex justify-between items-center text-gray-500 bg-gray-200 focus:bg-white rounded-lg p-2">
                        <div class="text-center">
                            <p class="text-sm">Articles</p>
                            <p class="font-bold text-gray-800">37</p>
                        </div>
                        <div class="text-center">
                            <p class="text-sm">Followers</p>
                            <p class="font-bold text-gray-800">850</p>
                        </div>
                        <div class="text-center">
                            <p class="text-sm">Rating</p>
                            <p class="font-bold text-gray-800 flex gap-1">
                                <img src="https://svgshare.com/i/16Fg.svg" />
                                    9.5
                            </p>
                        </div>
                    </div>
                    <div class="flex mt-3 gap-2">
                        <button class="bg-white text-gray-500 py-2 px-4 rounded-lg border-2 hover:bg-gray-400 flex-1">
                              Chat
                            </button>
                        <button class="bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-700 flex-1">
                              Follow
                            </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples