Home
Gopi Yadav
Responsive user card with tailwind

Responsive user card with tailwind

This tailwind example is contributed by Gopi Yadav, on 18-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Author box, User information

Card Profile

Author Gopi Yadav

10.7k

Fork Fullscreen

<section class="mb-2 border bg-neutral-100 p-4 rounded-lg max-w-full bg-neutral-100">
    <div class="mx-auto">
        <div class="card md:flex max-w-lg">
            <div class="w-20 h-20 mx-auto mb-6 md:mr-6 flex-shrink-0">
                <img class="object-cover rounded-full" src="https://tailwindflex.com/public/images/user.png">
            </div>
            <div class="flex-grow text-center md:text-left">
                <p class="font-bold">Senior Developer</p>
                <h3 class="text-xl heading">John Doe</h3>
                <p class="mt-2 mb-3">John is a Senior Developer, mainly works in backend technologies.</p>
                <div>
                    <span class="bg-gray-200 border px-3 py-1.5 rounded-lg text-sm">Discrete Math</span>
                    <span class="bg-gray-200 border px-3 py-1.5 rounded-lg text-sm">Topology</span> 
                    <span class="bg-gray-200 border px-3 py-1.5 rounded-lg text-sm">Neural Nets</span>
                </div>
            </div>
        </div>
    </div>
</section>

Related Examples

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

60.2k
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.1k
Show user details

Author:
Lucas Martinez

2 years ago

23.5k
User profile card with Cover Image

Author:
Noob

2 years ago

27.5k
Basic Resume template
simple and clean layout that provides a professional look.

Author:
R.P Ketan

2 years ago

25.2k
Profile card

Author:
Mr Robot

2 years ago

11.9k
Author box

Author:
Mr Robot

2 years ago

11.2k
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.6k
Minimal Profile card

Author:
Abhijit Sen

2 years ago

10.6k
User profile card

Author:
Mr Robot

2 years ago

10.5k
User Profile Card
Useful for testimonials and reviews section

Author:
Abhijit Sen

2 years ago

9.9k
Hover effect card

Author:
Samuel Dawson

2 years ago

28.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components