Home
ORGIN_DREAMS
Shop Now Amazon x

Shop Now Amazon x

Product cards

This tailwind example is contributed by ORGIN_DREAMS, on 22-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Product Showcase, Product card

Card Shopping cart Product

Author ORGIN_DREAMS

Fork Fullscreen

<section class="bg-gray-50 min-h-screen py-16 px-6">
  
  <div class="text-center mb-12">
    <h1 class="text-4xl md:text-5xl font-extrabold text-gray-900">Explore Our Premium Gear</h1>
    <p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">Top-rated tech and lifestyle essentials to power your day. Free shipping on all orders above $50.</p>
    <div class="mt-6">
      <button class="bg-black text-white px-6 py-3 rounded-xl hover:bg-gray-800">Shop Now</button>
    </div>
  </div>

<div class="flex flex-wrap justify-center gap-4 mb-10">
    <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-full hover:bg-gray-300">All</button>
    <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-full hover:bg-gray-300">Headphones</button>
    <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-full hover:bg-gray-300">Shoes</button>
    <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-full hover:bg-gray-300">Watches</button>
    <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-full hover:bg-gray-300">Accessories</button>
  </div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
    
    <div class="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition overflow-hidden group">
      <div class="relative">
        <img src="https://plus.unsplash.com/premium_photo-1680346529160-549ad950bd1f?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image" class="w-full h-60 object-cover group-hover:scale-105 transition-transform" />
        <span class="absolute top-3 right-3 bg-black text-white text-xs px-2 py-1 rounded">NEW</span>
      </div>
      <div class="p-5">
        <h3 class="text-lg font-bold text-gray-900 mb-1">Noise Cancelling Headphones</h3>
        <p class="text-sm text-gray-500 mb-2">30hr Battery · Bluetooth 5.3</p>
        <div class="flex justify-between items-center mt-4">
          <span class="text-lg font-semibold text-green-600">$129.00</span>
          <button class="bg-black text-white px-4 py-2 rounded-lg hover:bg-gray-800">Buy</button>
        </div>
      </div>
    </div>

<div class="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition overflow-hidden group">
      <div class="relative">
        <img src="https://images.unsplash.com/photo-1709258228137-19a8c193be39?q=80&w=2011&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image" class="w-full h-60 object-cover group-hover:scale-105 transition-transform" />
        <span class="absolute top-3 right-3 bg-red-600 text-white text-xs px-2 py-1 rounded">SALE</span>
      </div>
      <div class="p-5">
        <h3 class="text-lg font-bold text-gray-900 mb-1">Running Shoes Pro</h3>
        <p class="text-sm text-gray-500 mb-2">Lightweight · Breathable</p>
        <div class="flex justify-between items-center mt-4">
          <span class="text-lg font-semibold text-green-600">$89.99</span>
          <button class="bg-black text-white px-4 py-2 rounded-lg hover:bg-gray-800">Buy</button>
        </div>
      </div>
    </div>

<div class="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition overflow-hidden group">
      <div class="relative">
        <img src="https://images.unsplash.com/photo-1718309602791-8f3cc83840b7?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image" class="w-full h-60 object-cover group-hover:scale-105 transition-transform" />
      </div>
      <div class="p-5">
        <h3 class="text-lg font-bold text-gray-900 mb-1">Smart Fitness Watch</h3>
        <p class="text-sm text-gray-500 mb-2">Heart Rate · Sleep Tracking</p>
        <div class="flex justify-between items-center mt-4">
          <span class="text-lg font-semibold text-green-600">$149.00</span>
          <button class="bg-black text-white px-4 py-2 rounded-lg hover:bg-gray-800">Buy</button>
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples

card
card

Author:
5upreme505

1 year ago

1.4k
Cards - Users Card
This Users Card design includes: 1. Responsive layout using Flexbox 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. User list with avatars, names, and roles 5. Hover effects on user items 6. "Add Member" button 7. Card footer with team member count 8. Subtle animations and transitions 9. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - User avatars have a border color that changes in dark mode - User items have a hover effect that scales them slightly - The "Add Member" button uses Indigo-800 with a Blue-900 hover state - Dark mode is automatically applied based on system preferences - The entire card fades in on load for a smooth entrance - The card has a hover effect that enhances its shadow This design provides a clean, professional look for displaying team members while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

1 year ago

2.2k
beautifull feature section
We create a Advance animated feature section using tailwindcss and custom css

Author:
Akram Khan

1 year ago

2.4k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

7 months ago

923
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

713
Pricing card
basic pricing card with single price

Author:
Amit Pachange

2 years ago

10.6k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Author:
Prashant

3 years ago

63.4k
avtarCard3

Author:
pablitodgb

4 months ago

802
Blog post cards
responsive blog post cards

Author:
Mr Robot

2 years ago

12.2k
Dynamic Google Card

Author:
Cristian

9 months ago

977
Premium Tailwind CSS Card Component
Discover this elegant premium card component built with Tailwind CSS featuring the Poppins font. This modern, responsive design features glassmorphism effects, gradient borders, smooth animations, and a sophisticated color scheme, making it ideal for showcasing premium products or services.

Author:
CodewithFaraz

2 months ago

169
Personal card
A card to show minimal info for staff member

Author:
farid

10 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components