Home
farisubuntu
Admin dashboard cards

Admin dashboard cards

Card groups for showing stats/info. Change it for responsiveness for small and medium screen

This tailwind example is contributed by farisubuntu, on 28-Jun-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author farisubuntu

1.4k

4

Fork Fullscreen

<article class="flex bg-white transition hover:shadow-xl">
  <div class="rotate-180 p-2 [writing-mode:_vertical-lr]">
    <time
      datetime="2022-10-10"
      class="flex items-center justify-between gap-4 text-xs font-bold uppercase text-gray-900"
    >
      <span>2022</span>
      <span class="w-px flex-1 bg-gray-900/10"></span>
      <span>Oct 10</span>
    </time>
  </div>

<div class="hidden sm:block sm:basis-56">
    <img
      alt=""
      src="https://images.unsplash.com/photo-1609557927087-f9cf8e88de18?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
      class="aspect-square h-full w-full object-cover"
    />
  </div>

<div class="flex flex-1 flex-col justify-between">
    <div class="border-s border-gray-900/10 p-4 sm:border-l-transparent sm:p-6">
      <a href="#">
        <h3 class="font-bold uppercase text-gray-900">
          Finding the right guitar for your style - 5 tips
        </h3>
      </a>

<p class="mt-2 line-clamp-3 text-sm/relaxed text-gray-700">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
        pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis
        quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius
        atque dignissimos. Molestias explicabo corporis voluptatem?
      </p>
    </div>

<div class="sm:flex sm:items-end sm:justify-end">
      <a
        href="#"
        class="block bg-yellow-300 px-5 py-3 text-center text-xs font-bold uppercase text-gray-900 transition hover:bg-yellow-400"
      >
        Read Blog
      </a>
    </div>
  </div>
</article>

Related Examples

Feature cards with icons on top

Author:
Manon Daniel

1 year ago

14.1k
Responsive Feature Card

Author:
Gopi Yadav

2 years ago

12.3k
Gradient card

Author:
TailwindFlex

1 year ago

7.9k
beautifull project Item

Author:
Akram Khan

7 months ago

1.6k
Product card

Author:
Simon Scheffer

2 years ago

27.2k
credit card checkout

Author:
Antony

1 year ago

1.6k
Card with Dark Mode
For blog post and e-commerce websites

Author:
OmKar Mehta

8 months ago

1.2k
Card Cartier Product
Card Based View of Cartier

Author:
Ameth Galarcio

1 week ago

20
Beautiful post cards

Author:
Matej Kovač

10 months ago

1.9k
card
card

Author:
5upreme505

4 months ago

569
cards
cards with background animation

Author:
Anonymous

1 year ago

10.1k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

Author:
threehymns

1 year ago

15.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1