Tailwind Cards Components (48)

Cards from Nightsable

Dark Profile Contact Card with Circular Avatar

A centered dark contact card featuring a circular profile photo overlapping the top edge, a name heading, a date line, and phone and email contact rows with lime-green line icons. The rounded outlined container has a subtle glow at its bottom edge.

<section class="py-24 bg-blueGray-950">
  <div class="container px-4 mx-auto">
    <div class="relative px-4 max-w-sm mx-auto pt-20 pb-16 text-center border border-gray-900 border-opacity-30 rounded-5xl">
      <img class="absolute -top-12 left-1/2 transform -translate-x-1/2" src="nightsable-assets/images/cards/avatar1.png" alt="">
      <h2 class="mb-4 text-4xl text-white tracking-4xl md:max-w-sm mx-auto">Jane Doe</h2>
      <p class="mb-10 text-gray-300 md:max-w-xs mx-auto">Mar 30 th</p>
      <ul class="relative">
        <li class="flex flex-wrap justify-center mb-6">
          <svg class="mr-4" xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
            <path d="M22.47 18.33C22.47 18.69 22.39 19.06 22.22 19.42C22.05 19.78 21.83 20.12 21.54 20.44C21.05 20.98 20.51 21.37 19.9 21.62C19.3 21.87 18.65 22 17.95 22C16.93 22 15.84 21.76 14.69 21.27C13.54 20.78 12.39 20.12 11.25 19.29C10.1 18.45 9.01 17.52 7.97 16.49C6.94 15.45 6.01 14.36 5.18 13.22C4.36 12.08 3.7 10.94 3.22 9.81C2.74 8.67 2.5 7.58 2.5 6.54C2.5 5.86 2.62 5.21 2.86 4.61C3.1 4 3.48 3.44 4.01 2.94C4.65 2.31 5.35 2 6.09 2C6.37 2 6.65 2.06 6.9 2.18C7.16 2.3 7.39 2.48 7.57 2.74L9.89 6.01C10.07 6.26 10.2 6.49 10.29 6.71C10.38 6.92 10.43 7.13 10.43 7.32C10.43 7.56 10.36 7.8 10.22 8.03C10.09 8.26 9.9 8.5 9.66 8.74L8.9 9.53C8.79 9.64 8.74 9.77 8.74 9.93C8.74 10.01 8.75 10.08 8.77 10.16C8.8 10.24 8.83 10.3 8.85 10.36C9.03 10.69 9.34 11.12 9.78 11.64C10.23 12.16 10.71 12.69 11.23 13.22C11.77 13.75 12.29 14.24 12.82 14.69C13.34 15.13 13.77 15.43 14.11 15.61C14.16 15.63 14.22 15.66 14.29 15.69C14.37 15.72 14.45 15.73 14.54 15.73C14.71 15.73 14.84 15.67 14.95 15.56L15.71 14.81C15.96 14.56 16.2 14.37 16.43 14.25C16.66 14.11 16.89 14.04 17.14 14.04C17.33 14.04 17.53 14.08 17.75 14.17C17.97 14.26 18.2 14.39 18.45 14.56L21.76 16.91C22.02 17.09 22.2 17.3 22.31 17.55C22.41 17.8 22.47 18.05 22.47 18.33Z" stroke="#CCFF00" stroke-width="1.5" stroke-miterlimit="10"></path>
          </svg>
          <span class="text-white">(205) 555-0100</span>
        </li>
        <li class="flex flex-wrap justify-center">
          <svg class="mr-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M2 8.87C2 9.57 2.37 10.22 2.97 10.58L10.46 15.07C11.41 15.64 12.6 15.64 13.55 15.07L21.04 10.58C21.64 10.22 22.01 9.57 22.01 8.87" stroke="#CCFF00" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M18 4H6C3.8 4 2 5.8 2 8V16C2 18.2 3.8 20 6 20H18C20.2 20 22 18.2 22 16V8C22 5.8 20.2 4 18 4Z" stroke="#CCFF00" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="text-white">contact@Nightsableteam.co</span>
        </li>
      </ul>
      <img class="absolute bottom-0 left-0" src="nightsable-assets/images/cards/blur.svg" alt="">
    </div>
  </div>
</section>

Cards from Trizzle

Tailwind CSS

Trizzle

Dark User Profile Card with Avatar and Contact Actions

A centered dark profile card showing a circular avatar, name, job title, and an Admin status badge, with two full-width buttons for Email and Call at the bottom. It presents a single user's contact summary in a compact vertical stack.

<section class="py-3">
  <div class="container px-4 mx-auto">
    <div class="relative p-6 text-center bg-gray-500 rounded-xl">
      <img class="block mx-auto mb-5 w-28 h-28" src="trizzle-assets/images/avatar-men-1.png" alt="">
      <h4 class="text-xl text-white font-bold mb-3">John Doe</h4>
      <p class="text-gray-300 mb-3">Front-end Developer</p>
      <span class="inline-block px-2 py-1 mb-6 text-xs text-green-500 font-medium bg-teal-900 rounded-full">Admin</span>
      <div class="flex flex-wrap items-center -mx-2">
        <div class="w-full sm:w-1/2 px-2 mb-2 sm:mb-0">
          <a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
            <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.6668 0.666664H2.3335C1.80306 0.666664 1.29436 0.877378 0.919283 1.25245C0.54421 1.62752 0.333496 2.13623 0.333496 2.66666V9.33333C0.333496 9.86376 0.54421 10.3725 0.919283 10.7475C1.29436 11.1226 1.80306 11.3333 2.3335 11.3333H11.6668C12.1973 11.3333 12.706 11.1226 13.081 10.7475C13.4561 10.3725 13.6668 9.86376 13.6668 9.33333V2.66666C13.6668 2.13623 13.4561 1.62752 13.081 1.25245C12.706 0.877378 12.1973 0.666664 11.6668 0.666664ZM11.3935 2L7.4735 5.92C7.41152 5.98248 7.33779 6.03208 7.25655 6.06593C7.17531 6.09977 7.08817 6.1172 7.00016 6.1172C6.91215 6.1172 6.82502 6.09977 6.74378 6.06593C6.66254 6.03208 6.5888 5.98248 6.52683 5.92L2.60683 2H11.3935ZM12.3335 9.33333C12.3335 9.51014 12.2633 9.67971 12.1382 9.80474C12.0132 9.92976 11.8436 10 11.6668 10H2.3335C2.15668 10 1.98712 9.92976 1.86209 9.80474C1.73707 9.67971 1.66683 9.51014 1.66683 9.33333V2.94L5.58683 6.86C5.96183 7.23453 6.47016 7.4449 7.00016 7.4449C7.53016 7.4449 8.03849 7.23453 8.4135 6.86L12.3335 2.94V9.33333Z" fill="#194BFB"></path>
            </svg>
            <span class="ml-3">Email</span>
          </a>
        </div>
        <div class="w-full sm:w-1/2 px-2">
          <a class="flex px-2 py-3 items-center justify-center bg-gray-600 hover:bg-gray-700 text-sm leading-6 font-bold text-white rounded-xl transition duration-200" href="#">
            <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.4601 7.66667C12.3134 7.66667 12.1601 7.62 12.0134 7.58667C11.7164 7.52121 11.4245 7.43432 11.1401 7.32666C10.8308 7.21415 10.4908 7.21999 10.1856 7.34307C9.88038 7.46614 9.63146 7.69775 9.48673 7.99333L9.34007 8.29333C8.69074 7.93212 8.09406 7.48349 7.56673 6.96C7.04325 6.43268 6.59461 5.836 6.2334 5.18666L6.5134 5C6.80898 4.85528 7.04059 4.60635 7.16366 4.30113C7.28674 3.9959 7.29258 3.65594 7.18007 3.34666C7.07422 3.06161 6.98736 2.76986 6.92007 2.47333C6.88673 2.32667 6.86007 2.17333 6.84007 2.02C6.75911 1.55041 6.51315 1.12516 6.14648 0.820825C5.77981 0.51649 5.31653 0.353071 4.84007 0.359999H2.84007C2.55275 0.357301 2.26823 0.416541 2.00587 0.533685C1.74351 0.65083 1.50947 0.823129 1.31969 1.03885C1.1299 1.25458 0.988824 1.50866 0.906059 1.78381C0.823295 2.05895 0.800787 2.3487 0.840067 2.63333C1.19523 5.42625 2.47075 8.02125 4.46517 10.0084C6.45958 11.9956 9.05921 13.2617 11.8534 13.6067H12.1067C12.5983 13.6074 13.073 13.427 13.4401 13.1C13.651 12.9114 13.8195 12.6801 13.9344 12.4215C14.0493 12.163 14.108 11.883 14.1067 11.6V9.6C14.0986 9.13692 13.9299 8.69103 13.6296 8.33844C13.3293 7.98585 12.9159 7.74842 12.4601 7.66667ZM12.7934 11.6667C12.7933 11.7613 12.773 11.8549 12.7339 11.9411C12.6948 12.0273 12.6378 12.1042 12.5667 12.1667C12.4925 12.2313 12.4054 12.2796 12.3112 12.3083C12.217 12.337 12.1178 12.3456 12.0201 12.3333C9.52333 12.0132 7.20422 10.871 5.42854 9.08686C3.65286 7.30273 2.52167 4.97822 2.2134 2.48C2.20279 2.38234 2.21209 2.28355 2.24074 2.18959C2.26938 2.09563 2.31678 2.00846 2.38007 1.93333C2.44254 1.86222 2.51944 1.80523 2.60565 1.76614C2.69186 1.72706 2.78541 1.70678 2.88007 1.70667H4.88007C5.0351 1.70322 5.18648 1.75392 5.30816 1.85005C5.42984 1.94617 5.51421 2.08171 5.54673 2.23333C5.5734 2.41555 5.60673 2.59555 5.64673 2.77333C5.72375 3.12476 5.82624 3.47012 5.9534 3.80666L5.02007 4.24C4.94026 4.27661 4.86848 4.32863 4.80884 4.39306C4.7492 4.45749 4.70287 4.53307 4.67251 4.61546C4.64216 4.69785 4.62838 4.78542 4.63197 4.87315C4.63555 4.96087 4.65643 5.04703 4.6934 5.12666C5.65287 7.18183 7.3049 8.83387 9.36007 9.79333C9.52237 9.86001 9.70443 9.86001 9.86673 9.79333C9.94987 9.76359 10.0263 9.71763 10.0915 9.65812C10.1567 9.59861 10.2095 9.52673 10.2467 9.44666L10.6601 8.51333C11.0047 8.63658 11.3565 8.73899 11.7134 8.82C11.8912 8.86 12.0712 8.89333 12.2534 8.92C12.405 8.95252 12.5406 9.03689 12.6367 9.15857C12.7328 9.28025 12.7835 9.43163 12.7801 9.58667L12.7934 11.6667Z" fill="#194BFB"></path>
            </svg>
            <span class="ml-3">Call</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Cards from Flex

Tailwind CSS

Flex

Card with heading title and placeholder content area

A single white rounded card with a bold heading 'Card heading title', a three-dot overflow menu at top right, a thin divider, and a large light gray placeholder block below. The layout is a single vertical stack with minimal styling.

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white rounded-md shadow-lg">
      <div class="flex flex-wrap items-center justify-between -mx-2">
        <div class="w-auto px-2">
          <h2 class="text-lg text-coolGray-900 font-semibold">Card heading title</h2>
        </div>
        <div class="w-auto px-2">
          <a href="#">
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 10C11.6044 10 11.2178 10.1173 10.8889 10.3371C10.56 10.5568 10.3036 10.8692 10.1522 11.2346C10.0009 11.6001 9.96126 12.0022 10.0384 12.3902C10.1156 12.7781 10.3061 13.1345 10.5858 13.4142C10.8655 13.6939 11.2219 13.8844 11.6098 13.9616C11.9978 14.0387 12.3999 13.9991 12.7654 13.8478C13.1308 13.6964 13.4432 13.44 13.6629 13.1111C13.8827 12.7822 14 12.3956 14 12C14 11.4696 13.7893 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM5 10C4.60444 10 4.21776 10.1173 3.88886 10.3371C3.55996 10.5568 3.30362 10.8692 3.15224 11.2346C3.00087 11.6001 2.96126 12.0022 3.03843 12.3902C3.1156 12.7781 3.30608 13.1345 3.58579 13.4142C3.86549 13.6939 4.22186 13.8844 4.60982 13.9616C4.99778 14.0387 5.39992 13.9991 5.76537 13.8478C6.13082 13.6964 6.44318 13.44 6.66294 13.1111C6.8827 12.7822 7 12.3956 7 12C7 11.4696 6.78929 10.9609 6.41421 10.5858C6.03914 10.2107 5.53043 10 5 10ZM19 10C18.6044 10 18.2178 10.1173 17.8889 10.3371C17.56 10.5568 17.3036 10.8692 17.1522 11.2346C17.0009 11.6001 16.9613 12.0022 17.0384 12.3902C17.1156 12.7781 17.3061 13.1345 17.5858 13.4142C17.8655 13.6939 18.2219 13.8844 18.6098 13.9616C18.9978 14.0387 19.3999 13.9991 19.7654 13.8478C20.1308 13.6964 20.4432 13.44 20.6629 13.1111C20.8827 12.7822 21 12.3956 21 12C21 11.4696 20.7893 10.9609 20.4142 10.5858C20.0391 10.2107 19.5304 10 19 10Z" fill="#D5DAE1"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="pt-6 mt-6 border-t border-coolGray-100"></div>
    </div>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Cards from Dashy

Tailwind CSS

Dashy

Dashboard tools card grid with photos and author avatars

A section headed 'Design new dashboard tools' with a 'Find more trading tools' link, followed by three equal cards each showing a stock-style photo, a 'Management tool that tracks, gathers, and displays business data' description, and an author name with avatar. The layout is a horizontal row of cards with rounded corners on a light background.

<section class="py-4 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-between mb-10 -m-2">
      <div class="w-auto p-2">
        <h2 class="font-heading text-3xl font-semibold">Design new dashboard tools</h2>
      </div>
      <div class="w-auto p-2">
        <a class="flex flex-wrap items-center hover:text-neutral-500" href="#">
          <span class="mr-2.5">Find more trading tools</span>
          <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.83333 3.33331L14.5 7.99998M14.5 7.99998L9.83333 12.6666M14.5 7.99998L2.5 7.99998" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
      </div>
    </div>
    <div class="flex flex-wrap -m-3">
      <div class="w-full sm:w-1/3 p-3">
        <a class="inline-block h-full bg-white border overflow-hidden rounded-xl" href="#">
          <img class="w-full" src="dashy-assets/images/card-media3.png" alt="">
          <div class="p-6">
            <p class="mb-8 text-xl font-medium">Management tool that tracks, gathers, and displays business data</p>
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <p class="text-neutral-500">Cameron Williamson</p>
              </div>
              <div class="w-auto p-2">
                <img src="dashy-assets/images/card-avatar.png" alt="">
              </div>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/3 p-3">
        <a class="inline-block h-full bg-white border overflow-hidden rounded-xl" href="#">
          <img class="w-full" src="dashy-assets/images/card-media.png" alt="">
          <div class="p-6">
            <p class="mb-8 text-xl font-medium">Management tool that tracks, gathers, and displays business data</p>
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <p class="text-neutral-500">Devon Lane</p>
              </div>
              <div class="w-auto p-2">
                <img src="dashy-assets/images/card-avatar2.png" alt="">
              </div>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full sm:w-1/3 p-3">
        <a class="inline-block h-full bg-white border overflow-hidden rounded-xl" href="#">
          <img class="w-full" src="dashy-assets/images/card-media2.png" alt="">
          <div class="p-6">
            <p class="mb-8 text-xl font-medium">Management tool that tracks, gathers, and displays business data</p>
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <p class="text-neutral-500">Cody Fisher</p>
              </div>
              <div class="w-auto p-2">
                <img src="dashy-assets/images/card-avatar.png" alt="">
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>