Sling Academy
Home/Tailwind CSS/Tailwind CSS: Create a User Card with Circle Avatar

Tailwind CSS: Create a User Card with Circle Avatar

Last updated: December 15, 2023

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.

Screenshot:

The code:

<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.slingacademy.com/wp-content/uploads/2022/10/big-boss.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
            </a>

        </div>
</div>

The complete code (including all HTML markup):

<!doctype html>
<html>

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

<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.slingacademy.com/wp-content/uploads/2022/10/big-boss.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
            </a>

        </div>
    </div>
</body>

</html>

That’s if. Happy Tailwinding!

Next Article: Text Underline in Tailwind CSS

Previous Article: How to Zoom on Hover with Tailwind CSS (the easiest approach)

Series: Styling Text & Images with Tailwind CSS

Tailwind CSS

Related Articles

You May Also Like

  • How to Create Striped Tables with Tailwind CSS
  • Tailwind CSS: Creating Shimmer Loading Placeholder (Skeleton)
  • Tailwind CSS: How to Create Parallax Scrolling Effect
  • How to Style Lists in Tailwind CSS
  • Text Underline in Tailwind CSS
  • How to Change Mouse Cursor in Tailwind CSS
  • Form Validation with Tailwind CSS (without Javascript)
  • first-of-type and last-of-type in Tailwind CSS
  • Tailwind CSS: How to Create Columns with the Same Height
  • How to Style Placeholder Text with Tailwind CSS
  • Tailwind CSS: Make a Div 100% Height & Width of the Viewport
  • Using :not() selector in Tailwind CSS
  • Tailwind CSS: How to Create a Stepper
  • Using ::before and ::after in Tailwind CSS
  • Tailwind CSS: How to Create a Vertical Divider Line
  • How to Create Pill Buttons with Tailwind CSS
  • Tailwind CSS: How to Disable Text Selection
  • Tailwind CSS: How to Disable Resizing of Textarea
  • Tailwind CSS: Expand a Text Input on Focus (without Javascript)