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.3k

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

Profile card
Profile card with social icons

Author:
Krishna Gudpalle

2 years ago

12.5k
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

61.3k
User profile card with Cover Image

Author:
Noob

2 years ago

28.7k
User Profile Card
Useful for testimonials and reviews section

Author:
Abhijit Sen

2 years ago

10.1k
Minimal Profile card

Author:
Abhijit Sen

2 years ago

10.7k
Responsive user card with tailwind

Author:
Gopi Yadav

2 years ago

11.1k
Author box

Author:
Mr Robot

2 years ago

11.4k
Profile card

Author:
Mr Robot

2 years ago

12.1k
User profile card

Author:
Mr Robot

2 years ago

10.8k
Testimonial card with image

Author:
Simon Scheffer

2 years ago

11.3k
Profile Card
Show more details on hover

Author:
Tamani Phiri

1 year ago

13.5k
Author card
Author card for giving credit to the author of the Blog/Article. It has social media icons and user image

Author:
Prajwal Hallale

1 year ago

7.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components