Tailwind CSS: Create a User Card with Circle Avatar

Last updated on May 9, 2022 Pennywise Loading... Post a comment

In the example below, we’ll use Tailwind CSS to create a typical user profile card with a circle avatar, name, title, and a link to the profile page.


The complete code (including all HTML markup):

<!doctype html>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>

<body class="flex p-20 bg-blue-50">
    <div class="flex bg-white drop-shadow-md rounded-lg p-1.5">
        <img class="w-28 h-28 rounded-full border-4 border-slate-50 object-cover"
            src="https://www.kindacode.com/wp-content/uploads/2022/05/cute.jpeg" />
        <div class="flex flex-col px-5 py-1">
            <h4 class="font-bold text-lg text-pink-600">The Big Boss</h4>
            <p class="mt-1 flex-1 font-light text-sm text-slate-500">CEO & Co-Founder of XYZ</p>

            <a class="mt-2 inline-block px-2 py-1 border bg-blue-500 text-center text-white text-sm hover:underline" href="#">
                View Profile



That’s if. Further reading:

You can also check out our CSS category page for the latest tutorials and examples.

Notify of
Inline Feedbacks
View all comments

You May Also Like