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

1.2k

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

Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

2 years ago

48.7k
Image cards

Author:
Reuben Enahoro

4 months ago

906
Product card

Author:
Simon Scheffer

2 years ago

28.3k
Show user details

Author:
Lucas Martinez

2 years ago

23.5k
Card with image
Blog post card

Author:
Mr Robot

2 years ago

9.8k
card Alert - icons - glass

Author:
ABDO-SY

1 month ago

204
Stylish profile card with a hover effect

Author:
Anonymous

1 year ago

8.1k
Card-Product
Item or card to show products

Author:
Ameth Galarcio

10 months ago

2.6k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

4 weeks ago

345
Card with Thumbnail
Post card with image

Author:
Mr Robot

2 years ago

10.5k
Contact us form with map
Contact us form with map

Author:
Chithira Kumar M

1 year ago

10.6k
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

1 year ago

18.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components