Components

Cards

A card is a container with padding, a background, rounded corners and a shadow. Add a hover lift for interactivity.

A candidate card

Avatar, name, skills and a button

Example

<div class="max-w-sm bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-lg transition p-6">
  <div class="flex items-center gap-3">
    <div class="w-12 h-12 rounded-full bg-sky-500 text-white flex items-center justify-center font-bold">AR</div>
    <div>
      <h3 class="font-bold text-gray-900">Arjun Reddy</h3>
      <p class="text-sm text-gray-500">B.Tech CSE · IIT Madras</p>
    </div>
  </div>
  <div class="mt-4 flex flex-wrap gap-1.5">
    <span class="bg-slate-100 text-slate-600 text-xs px-2 py-0.5 rounded">React</span>
    <span class="bg-slate-100 text-slate-600 text-xs px-2 py-0.5 rounded">Python</span>
  </div>
  <button class="mt-5 w-full bg-sky-600 hover:bg-sky-700 text-white font-semibold py-2 rounded-lg transition">View profile</button>
</div>

💡

Cards combine everything you have learned: spacing, flexbox, colors, rounded, shadow, hover and transition.

Cards

A candidate card

Related Tailwind Topics