CCHub Logo CCHub Tailwind Collection
Komponenten Produktkarten Produktkarten Komponente 52

Produktkarten Komponente 52

Eine reaktionsschnelle Produktkartenkomponente im Glassmorphism-Designstil mit Unterstützung für dunkle Themen und Tailwind CSS.

Vorschau

HTML-Code 

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
    <div class="bg-white bg-opacity-30 backdrop-blur-lg rounded-lg p-4 shadow-lg transition duration-300 ease-in-out transform hover:scale-105 dark:bg-gray-800 dark:bg-opacity-30">
        <img src="https://picsum.photos/200/300?random=1" alt="Product Image" class="w-full h-32 object-cover rounded-lg mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 1</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a short description of the product that highlights its features.</p>
        <div class="mt-4 flex justify-between items-center">
            <span class="text-lg font-bold text-gray-800 dark:text-white">$49.99</span>
            <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200">Add to Cart</button>
        </div>
    </div>
    <div class="bg-white bg-opacity-30 backdrop-blur-lg rounded-lg p-4 shadow-lg transition duration-300 ease-in-out transform hover:scale-105 dark:bg-gray-800 dark:bg-opacity-30">
        <img src="https://picsum.photos/200/300?random=2" alt="Product Image" class="w-full h-32 object-cover rounded-lg mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 2</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a short description of the product that highlights its features.</p>
        <div class="mt-4 flex justify-between items-center">
            <span class="text-lg font-bold text-gray-800 dark:text-white">$59.99</span>
            <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200">Add to Cart</button>
        </div>
    </div>
    <div class="bg-white bg-opacity-30 backdrop-blur-lg rounded-lg p-4 shadow-lg transition duration-300 ease-in-out transform hover:scale-105 dark:bg-gray-800 dark:bg-opacity-30">
        <img src="https://picsum.photos/200/300?random=3" alt="Product Image" class="w-full h-32 object-cover rounded-lg mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title 3</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a short description of the product that highlights its features.</p>
        <div class="mt-4 flex justify-between items-center">
            <span class="text-lg font-bold text-gray-800 dark:text-white">$39.99</span>
            <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-200">Add to Cart</button>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Produktkarten"

Eine reaktionsschnelle Produktkartenkomponente für den Dunkelmodus mit leuchtenden Farben und mehreren interaktiven Elementen, die für Blogs und den Konsum von Inhalten geeignet sind.

Offen

Komponente "Produktkarten"

Eine reaktionsschnelle Produktkartenkomponente in einem minimalistischen Stil mit pastellfarbenem Farbschema, die für Geschäfts- oder Unternehmenswebsites geeignet ist und Unterstützung für den Dunkelmodus bietet.

Offen

Komponente "Produktkarten"

Eine responsive Produktkartenkomponente, die in einem brutalistischen Stil mit Tailwind CSS gestaltet wurde, mit Unterstützung für dunkle Themen und mit Platzhalterbildern.

Offen