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

12

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

cards
cards with background animation

Author:
Anonymous

2 months ago

342
cards
cards with background animation

Author:
Anonymous

10 months ago

8.2k
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

7 months ago

11.9k
Profile card
Profile card with social icons

Author:
Krishna Gudpalle

1 year ago

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

Author:
OmKar Mehta

3 weeks ago

161
Info Card with image
An info card with an image, a short title, and a short description.

Author:
Arya

1 year ago

10.5k
Border gradient

Author:
Samuel Dawson

1 year ago

9.8k
Product card for eCommerce website

Author:
Steven Kuhn

1 year ago

9.4k
Author box

Author:
Mr Robot

1 year ago

9.7k
Twitter tweet clone
Replica of twitter tweet card

Author:
Sophia Baker

1 year ago

8k
Linkedin Add to your feed Clone
Linkedin Add to your feed Clone

Author:
Samuel Abera

2 months ago

478
Form package

Author:
Hunter Guru

1 month ago

296

Explore components by Tags

Didn't find component you were looking for?

Search from 1400+ componenent

TailwindFlex.com

Tailwindflex.com is a free tailwind examples library. It's a one-stop destination for ready-made tailwind examples.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2024 TailwindFlex. All Rights Reserved.

v1.6