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

305

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

Card
card

Author:
5upreme505

1 month ago

383
Form package

Author:
Hunter Guru

7 months ago

1.2k
Card Component
This component is a simple card (without image) component with hover effect & Dark mode Supported & full responsive

Author:
Shariar Hasan

10 months ago

1.9k
Pricing section Lima
Pricing section Lima with responsive design

Author:
Mubashir hussain

8 months ago

1.1k
Image cards

Author:
Reuben Enahoro

3 weeks ago

275
Profile Form
Progressive Profile Form

Author:
Samuel Abera

8 months ago

2.7k
Profile card
tailwind Profile Card

Author:
Md. Tofayel islam

9 months ago

1.4k
Product card for e-commerce
A responsive product card for e-commerce, displaying product image, country flag, volume, name, and price, with hover effects and a clean layout.

Author:
Maxim

1 month ago

169
Greeting Card with CTA
card with two actions with greeting msg according to time

Author:
Amit Pachange

1 year ago

6.5k
Cards - Users Card
Users card grid list

Author:
Casimiro Rocha

1 month ago

478
Card grid section
Display article/blog grid

Author:
Mr Robot

1 year ago

21.9k
Customer testimonial card
Responsive user testimonial card with image

Author:
Arya

2 years ago

10.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components