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

2.5k

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

Product review card

Author:
Moriba Traore

3 years ago

15.4k
Contact us Form with Responsive

Author:
KULDEEP

7 months ago

637
Custom Success Page
This code provides a clean, modern and informative look.

Author:
Alif Bima Pradana

3 weeks ago

40
Thankyou Card

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

1 year ago

5.9k
card
card

Author:
5upreme505

1 year ago

1.5k
Video card
Video card component for tailwind css

Author:
Rajesh kulkarni

3 years ago

17.7k
Weather card
Component was one shot generated using https://inspi.me

Author:
yogourt

1 month ago

270
Floating capsule

Author:
Amazing Engineer

9 months ago

740
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 year ago

2.2k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

10 months ago

768
Card post blog
Targetas para blog

Author:
Raul antonio de la cruz hernandez

3 months ago

338
Info card for admin panal
Show stats on your dashboard

Author:
Arya

3 years ago

13.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components