Home
OmKar Mehta
Card with Dark Mode

Card with Dark Mode

For blog post and e-commerce websites

This tailwind example is contributed by OmKar Mehta, on 10-Jun-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Card

Author OmKar Mehta

1.8k

Fork Fullscreen

<div class="w-[300px] rounded-md border bg-white dark:bg-gray-800 shadow-lg transition-colors duration-500">
    <img
      src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fGJsb2d8ZW58MHx8MHx8&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60"
      alt="Laptop"
      class="h-[200px] w-full rounded-t-md object-cover"
    />
    <div class="p-4">
        <h1 class="inline-flex items-center text-lg font-semibold text-gray-900 dark:text-gray-100">
            About Macbook &nbsp;
            <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="h-4 w-4">
                <line x1="7" y1="17" x2="17" y2="7"></line>
                <polyline points="7 7 17 7 17 17"></polyline>
            </svg>
        </h1>
        <p class="mt-3 text-sm text-gray-600 dark:text-gray-400">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi,
            debitis?
        </p>
        <div class="mt-4">
            <span class="mb-2 mr-2 inline-block rounded-full bg-gray-100 dark:bg-gray-700 px-3 py-1 text-[10px] font-semibold text-gray-900 dark:text-gray-300">
          #Macbook
        </span>
            <span class="mb-2 mr-2 inline-block rounded-full bg-gray-100 dark:bg-gray-700 px-3 py-1 text-[10px] font-semibold text-gray-900 dark:text-gray-300">
          #Apple
        </span>
            <span class="mb-2 mr-2 inline-block rounded-full bg-gray-100 dark:bg-gray-700 px-3 py-1 text-[10px] font-semibold text-gray-900 dark:text-gray-300">
          #Laptop
        </span>
        </div>
        <button
        type="button"
        class="mt-4 w-full rounded-sm bg-black px-2 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-black/80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black dark:focus-visible:outline-white transition-all duration-300"
      >
        Read
      </button>
    </div>
</div>

Related Examples

Greeting Card with CTA
card with two actions with greeting msg according to time

Author:
Amit Pachange

1 year ago

7.2k
component

Author:
pablitodgb

3 weeks ago

121
Image cards

Author:
Reuben Enahoro

7 months ago

1.3k
Payment Cards

Author:
Shammi Nethupul

11 months ago

2.2k
Spinner with card
Use this animated loading indicator when content inside of a card is still loading.

Author:
Md. Tofayel islam

1 year ago

2.5k
A product card with size selector
Using alpine it shows a size selector when clicking in cart

Author:
farid

6 months ago

922
Card 30/70

Author:
Maxim

3 months ago

237
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

2 years ago

10.1k
Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Author:
Maxim

1 year ago

11.6k
Card
Jobs recommended for you LinkedIn Clone

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

3 months ago

553
services section
services section by amr kilany

Author:
Amr Kilany

1 month ago

55
Basic US Flag Card
Here's a set of card components styled with Tailwind CSS that represent various US-themed elements:

Author:
Uwase Alliance

1 month ago

151

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components