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 v3.4. It is responsive. It supports dark mode.

Card

Author OmKar Mehta

Tailwind v3.4 2.8k 4

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

Trending Creators
Trending Creators

Omer fils ELENGA

6 days ago

7
Card KPI
Targetas ahora con un grafico

Raul antonio de la cruz hernandez

10 months ago

1.2k
SimpleGrid

wtfbrh

1 year ago

1.7k
What is Webby
Webby is a PHP Framework built on top of Codeigniter 3 for easy PHP web application development using both HMVC and MVC patterns.

Developer Kwame

2 years ago

2.6k
Interactive Pricing Cards
this are pricing cards

ishimwe shadad

1 year ago

1.7k
cards
cards with background animation

Anonymous

3 years ago

12.6k
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Ragnar lodbrok

1 year ago

2.3k
Article Card

Anonymous

2 years ago

3.3k
Shoping Cart Popup

ABDO-SY

1 year ago

1.7k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

9 months ago

947
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Indra

1 year ago

1k
Info card

Laurits

3 years ago

11.4k