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

937

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">Ronald Potter</h3>
                        <h6 class="text-gray-300 dark:text-white mb-1">@RonaldPotter</h6>
                        <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

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

58.8k
User profile card with Cover Image

Author:
Noob

2 years ago

26k
User Profile Card
Useful for testimonials and reviews section

Author:
Abhijit Sen

2 years ago

9.7k
Minimal Profile card

Author:
Abhijit Sen

2 years ago

10.1k
Responsive user card with tailwind

Author:
Gopi Yadav

2 years ago

10.3k
Author box

Author:
Mr Robot

2 years ago

10.9k
Profile card

Author:
Mr Robot

2 years ago

11.7k
User profile card

Author:
Mr Robot

2 years ago

10k
Testimonial card with image

Author:
Simon Scheffer

2 years ago

10.6k
Profile Card
Show more details on hover

Author:
Tamani Phiri

1 year ago

12.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

7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components