Responsive user card with tailwind

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

Card Profile

Author Gopi Yadav

Tailwind v3.4 11.9k 18

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:

Prashant

4 years ago

65.6k
Author card
Author card for giving credit to the author of the Blog/Article. It has social media icons and user image

Prajwal Hallale

3 years ago

7.6k
Show user details

Lucas Martinez

3 years ago

26.2k
User profile card with Cover Image

Noob

3 years ago

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

R.P Ketan

3 years ago

28.1k
Profile card

Mr Robot

3 years ago

13.4k
Author box

Mr Robot

3 years ago

12.5k
User profile card

Mr Robot

3 years ago

12k
Minimal Profile card

Abhijit Sen

3 years ago

12.3k
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.

Amit Pachange

4 years ago

53.8k
User Profile Card
Useful for testimonials and reviews section

Abhijit Sen

3 years ago

11.2k
Hover effect card

Samuel Dawson

3 years ago

33.2k