Home
Anubhav Ranjan
Profile Card

Profile Card

User Profile Card with Name and Location

This tailwind example is contributed by Anubhav Ranjan, on 20-Sep-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Author box, User information

Card Profile

Author Anubhav Ranjan

231

Fork Fullscreen

<div class="h-screen dark:bg-gray-700 bg-gray-200 pt-12">
    
        <div class="max-w-sm mx-auto bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow-lg">
            <div class="px-4 py-6">
                <div class="text-center my-4">
                    <img class="h-32 w-32 rounded-full border-4 border-white dark:border-gray-800 mx-auto my-4"
                        src="https://randomuser.me/api/portraits/men/29.jpg" alt="">
                    <div class="py-2">
                        <h3 class="font-bold text-2xl text-gray-800 dark:text-white mb-1">Ronald Potter</h3>
                        <div class="inline-flex text-gray-700 dark:text-gray-300 items-center">
                            <svg class="h-5 w-5 text-gray-400 dark:text-gray-600 mr-1" fill="currentColor"
                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                                <path class=""
                                    d="M5.64 16.36a9 9 0 1 1 12.72 0l-5.65 5.66a1 1 0 0 1-1.42 0l-5.65-5.66zm11.31-1.41a7 7 0 1 0-9.9 0L12 19.9l4.95-4.95zM12 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />
                            </svg>
                            Glendale, BF
                        </div>
                    </div>
                </div>
            </div>
        </div>

</div>

Related Examples

Profile card
Profile card with social icons

Author:
Krishna Gudpalle

2 years ago

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

54.1k
User profile card with Cover Image

Author:
Noob

2 years ago

22.8k
User Profile Card
Useful for testimonials and reviews section

Author:
Abhijit Sen

1 year ago

9.3k
Minimal Profile card

Author:
Abhijit Sen

1 year ago

9.5k
Responsive user card with tailwind

Author:
Gopi Yadav

1 year ago

9.9k
Author box

Author:
Mr Robot

1 year ago

10.3k
Profile card

Author:
Mr Robot

1 year ago

11k
User profile card

Author:
Mr Robot

1 year ago

9.6k
Testimonial card with image

Author:
Simon Scheffer

1 year ago

9.9k
Profile Card
Show more details on hover

Author:
Tamani Phiri

1 year ago

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

6.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent