Tailwind CSS Card Components

<div class="card shadow w-88">
  <figure>
    <img src="https://images.unsplash.com/photo-1700225195141-30a6a826cef8?q=80&w=480&height=240&auto=format&fit=crop" alt="Water bottle">
  </figure>
  <div class="card-body">
    <h2 class="card-title">Card Title</h2>
    <p class="text-white">
      The Card component is a versatile container for combining related information, such as images, titles, and actions, into a single, visually appealing unit.
    </p>
    <div class="flex justify-end">
      <button type="button" class="btn btn-primary btn-sm">Buy Now</button>
    </div>
  </div>
</div>

<div class="card w-88">
  <div class="card-body">
    <h2 class="card-title">Default card</h2>
    <p>
      A card component has a figure and a body part, which contains the title, description, and actions parts.
    </p>
  </div>
</div>

<div class="card card-primary w-88">
  <div class="card-body">
    <h2 class="card-title">Primary card</h2>
    <p>
      A card component has a figure and a body part, which contains the title, description, and actions parts.
    </p>
  </div>
</div>

<div class="card card-secondary w-88">
  <div class="card-body">
    <h2 class="card-title">Secondary card</h2>
    <p>
      A card component has a figure and a body part, which contains the title, description, and actions parts.
    </p>
  </div>
</div>

<div class="card card-accent w-88">
  <div class="card-body">
    <h2 class="card-title">Accent card</h2>
    <p>
      A card component has a figure and a body part, which contains the title, description, and actions parts.
    </p>
  </div>
</div>

<div class="card card-info w-88">
  <div class="card-body">
    <h2 class="card-title">Info card</h2>
    <p>
      A card component has a figure and a body part, which contains the title, description, and actions parts.
    </p>
  </div>
</div>

<div class="card card-success w-88">
  <div class="card-body">
    <h2 class="card-title">Success card</h2>
    <p>
      A card component has a figure and a body part, which contains the title, description, and actions parts.
    </p>
  </div>
</div>

<div class="card card-warning w-88">
  <div class="card-body">
    <h2 class="card-title">Warning card</h2>
    <p>
      A card component has a figure and a body part, which contains the title, description, and actions parts.
    </p>
  </div>
</div>

<div class="card card-error w-88">
  <div class="card-body">
    <h2 class="card-title">Error card</h2>
    <p>
      A card component has a figure and a body part, which contains the title, description, and actions parts.
    </p>
  </div>
</div>

<div class="card card-neutral w-88">
  <div class="card-body">
    <h2 class="card-title">Neutral card</h2>
    <p>
      A card component has a figure and a body part, which contains the title, description, and actions parts.
    </p>
  </div>
</div>

<div class="card card-outline w-88">
  <div class="card-body">
    <span class="badge badge-xs badge-warning">Most Popular</span>
    <div class="flex justify-between items-center">
      <h2 class="text-3xl font-bold">Startup</h2>
      <span class="text-xl">$49/mo</span>
    </div>
    <ul class="mt-6 flex flex-col gap-2 text-xs">
      <li>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 me-2 inline-block text-success">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        <span>25 websites</span>
      </li>
      <li>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 me-2 inline-block text-success">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        <span>150 templates</span>
      </li>
      <li>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 me-2 inline-block text-success">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        <span>Advanced eCommerce</span>
      </li>
      <li>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 me-2 inline-block text-success">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        <span>eCommerce features</span>
      </li>
      <li class="opacity-50">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 me-2 inline-block text-success">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        <span class="line-through">Unlimited storage space</span>
      </li>
      <li class="opacity-50">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 me-2 inline-block text-success">
          <path d="M20 6 9 17l-5-5"></path>
        </svg>
        <span class="line-through">Priority support</span>
      </li>
    </ul>
    <div class="mt-6">
      <button type="button" class="btn btn-primary btn-block">Choose plan</button>
    </div>
  </div>
</div>

<div class="card card-outline w-88">
  <div class="card-body">
    <h2 class="card-title">Product Card</h2>
    <p>
      Highlight product descriptions, prices, and call-to-action buttons in an attractive, responsive card format.
    </p>
    <div class="flex justify-end">
      <button type="button" class="btn btn-sm btn-primary">Check out</button>
    </div>
  </div>
</div>

<div class="card card-dashed w-88">
  <div class="card-body">
    <h2 class="card-title">Testimonial Card</h2>
    <p>
      Display client feedback or reviews on a tiny card to boost your site's reputation and trust.
    </p>
    <div class="flex justify-end">
      <button type="button" class="btn btn-sm btn-primary">View all reviews</button>
    </div>
  </div>
</div>

<div class="card w-88 shadow-sm">
  <figure>
    <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?q=80&w=400&height=200&auto=format&fit=crop" alt="Shoes">
  </figure>
  <div class="card-body">
    <h2 class="card-title">
      Blog Post Card
      <div class="badge badge-xs badge-secondary">NEW</div>
    </h2>
    <p>
      For rapid access to complete articles and simple browsing, present blog summaries with titles, photos, and quotes.
    </p>
    <div class="flex gap-3 justify-end">
      <div class="badge badge-sm">Fashion</div>
      <div class="badge badge-sm">Products</div>
    </div>
  </div>
</div>

<div class="card w-88 shadow-sm">
  <div class="card-body">
    <h2 class="card-title">
      PageSpeed Insight
      <div class="badge badge-xs badge-secondary">NEW</div>
    </h2>
    <p>
      Frutjam.com is built with the Frutjam UI library and achieves excellent Google PageSpeed Insights scores, showing fast load times, strong accessibility, adherence to best practices, and full SEO compliance.
    </p>
    <div class="flex gap-3 justify-end">
      <div class="badge badge-sm">Fashion</div>
      <div class="badge badge-sm">Products</div>
    </div>
  </div>
  <figure>
    <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?q=80&w=400&height=200&auto=format&fit=crop" alt="PageSpeed Insight">
  </figure>
</div>

<div class="card w-160 shadow-sm">
  <div class="grid grid-cols-12">
    <div class="col-span-12 lg:col-span-5">
      <figure>
        <picture>
          <!--  Image for devices 768px and wider -->
          <source media="(min-width: 768px)" srcset="https://images.unsplash.com/photo-1518365050014-70fe7232897f?q=80&w=400&height=400&auto=format&fit=crop"></source>
          <!-- Image for devices less than 768px -->
          <img src="https://images.unsplash.com/photo-1545334894-9c7a7ccefaf8?q=80&w=400&height=400&auto=format&fit=crop" alt="A responsive figure example">
        </picture>
        <figcaption class="mt-1 text-xs p-2">A responsive image with a caption</figcaption>
      </figure>
    </div>
    <div class="col-span-12 lg:col-span-7">
      <div class="card-body">
        <h2 class="card-title">
          Responsive card title
          <div class="badge badge-xs badge-secondary">NEW</div>
        </h2>
        <p>On desktop, the image and content are displayed side by side (image on the left), but on mobile, they are stacked vertically. The photos used for desktop and mobile views are different.</p>
        <div class="flex gap-3 justify-end">
          <div class="badge badge-accent badge-sm">Fashion</div>
          <div class="badge badge-accent badge-sm">Products</div>
        </div>
      </div>
    </div>
  </div>
</div>