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.4k

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

Tailwind AoPS Demo
Starter code for an interactive Tailwind Demo

Author:
Joseph Barron

1 year ago

2.7k
Issue card
card designed to display the details of a technical issue

Author:
ABDO-SY

2 months ago

595
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Author:
Rajesh Maheshwari

1 month ago

368
User Feedback Card
A responsive user feedback card that displays user information, their role, and a testimonial. The card is styled using Tailwind CSS for a clean and modern look.

Author:
Anum Shahana

5 months ago

800
Feature Section Cards

Author:
Akram Khan

9 months ago

1.4k
Profile Card
Show more details on hover

Author:
Tamani Phiri

1 year ago

13.1k
Simple card layout with image

Author:
Leon Bachmann

2 years ago

9.9k
Product Card

Author:
Maxim

3 weeks ago

202
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

2 months ago

517
Responsive Grid with Featured image

Author:
_Amar_

2 years ago

11.6k
Blog post card
Responsive blog post or article card. This card can also be used as a CTA

Author:
Anonymous

1 year ago

9.2k
Pricing Table

Author:
Akshay

2 years ago

10k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components