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

1k

2

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

Article Card

Author:
Anonymous

8 months ago

1.4k
Horizontal card with image

Author:
Amit Pachange

2 years ago

12k
Simple card layout with image

Author:
Leon Bachmann

2 years ago

9.2k
grid card

Author:
Md. Tofayel islam

2 months ago

316
Astro build starter template with Tailwind
Astro build starter template with Tailwind

Author:
Geoffrey Callaghan

10 months ago

2.3k
Hover Card

Author:
Maxim

5 months ago

1.1k
Article card

Author:
Sienna

2 years ago

10.9k
Image card with overlay text overlay

Author:
Santos78

1 year ago

26.8k
Author card
Author card for giving credit to the author of the Blog/Article. It has social media icons and user image

Author:
Prajwal Hallale

1 year ago

6.8k
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

4 months ago

1.1k
Advanced phone verification

Author:
Md. Tofayel islam

9 months ago

1.2k
Info Card
Information card with image

Author:
Brandon D

2 years ago

7.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ 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

© 2024 TailwindFlex. All Rights Reserved.

v1.9