Home
Anonymous
Watch Card

Watch Card

Watch Cards

This tailwind example is contributed by Anonymous, on 07-Oct-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Product Showcase, Product card

Card Product

Author Anonymous

1.1k

2

Fork Fullscreen

<section>
  <div class="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
    <div class="grid grid-cols-1 gap-4 lg:grid-cols-3 lg:items-stretch">
      <div class="grid place-content-center rounded bg-gray-100 p-6 sm:p-8">
        <div class="mx-auto max-w-md text-center lg:text-left">
          <header>
            <h2 class="text-xl font-bold text-gray-900 sm:text-3xl">Watches</h2>

<p class="mt-4 text-gray-500">
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas rerum quam amet
              provident nulla error!
            </p>
          </header>

<a
            href="#"
            class="mt-8 inline-block rounded border border-gray-900 bg-gray-900 px-12 py-3 text-sm font-medium text-white transition hover:shadow focus:outline-none focus:ring"
          >
            Shop All
          </a>
        </div>
      </div>

<div class="lg:col-span-2 lg:py-8">
        <ul class="grid grid-cols-2 gap-4">
          <li>
            <a href="#" class="group block">
              <img
                src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1598&q=80"
                alt=""
                class="aspect-square w-full rounded object-cover"
              />

<div class="mt-3">
                <h3
                  class="font-medium text-gray-900 group-hover:underline group-hover:underline-offset-4"
                >
                  Simple Watch
                </h3>

<p class="mt-1 text-sm text-gray-700">$150</p>
              </div>
            </a>
          </li>

<li>
            <a href="#" class="group block">
              <img
                src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1598&q=80"
                alt=""
                class="aspect-square w-full rounded object-cover"
              />

<div class="mt-3">
                <h3
                  class="font-medium text-gray-900 group-hover:underline group-hover:underline-offset-4"
                >
                  Simple Watch
                </h3>

<p class="mt-1 text-sm text-gray-700">$150</p>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

Related Examples

Product card for eCommerce website

Author:
Steven Kuhn

2 years ago

11.6k
Product card

Author:
Simon Scheffer

2 years ago

28.3k
Product card

Author:
Oliver Hansen

2 years ago

9.1k
Product card

Author:
Oliver Hansen

2 years ago

12.7k
Card Component
A Simple Card Component with full responsiveness and dark mode supported

Author:
Shariar Hasan

1 year ago

2.7k
Product card
sleek and modern product card

Author:
OmKar Mehta

1 year ago

4.7k
Minimal Card
This is awesome looking card

Author:
Shaik Sameer Basha

10 months ago

1.7k
Card-Product
Item or card to show products

Author:
Ameth Galarcio

10 months ago

2.6k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

9 months ago

2.3k
Feature Card

Author:
Md. Tofayel islam

6 months ago

1.1k
Card
amazing card

Author:
Cristian

5 months ago

1.1k
Card responsive and dark mode grid

Author:
Cristian

5 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1