CCHub Logo CCHub Tailwind Collection
Komponenten Funktionale Komponenten Komponente "Funktionale Komponenten"

Komponente "Funktionale Komponenten"

Funktionale Komponente für den E-Commerce mit responsivem Design und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="bg-gray-100 dark:bg-gray-800 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 px-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden">
          <div class="md:flex">
            <div class="md:flex-shrink-0">
              <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
            </div>
            <div class="p-8">
              <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-400 font-semibold">Category</div>
              <a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Product Title</a>
              <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ante justo. Integer eu eleifend erat.</p>
              <div class="mt-4 flex items-center">
                <div class="text-lg font-bold text-gray-900 dark:text-white">$19.99</div>
                <button class="ml-auto bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden">
          <div class="md:flex">
            <div class="md:flex-shrink-0">
              <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
            </div>
            <div class="p-8">
              <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-400 font-semibold">Category</div>
              <a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Product Title</a>
              <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ante justo. Integer eu eleifend erat.</p>
              <div class="mt-4 flex items-center">
                <div class="text-lg font-bold text-gray-900 dark:text-white">$19.99</div>
                <button class="ml-auto bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Funktionale Komponenten" – Benutzeroberfläche im Dunkelmodus

Eine reaktionsschnelle Social-Media-Komponente, die mit Dunkelmodus und Erdtönen entwickelt wurde und für Schnittstellen in sozialen Netzwerken geeignet ist. Bietet Benutzer-Avatare, Post-Inhalte und Interaktionsschaltflächen.

Offen

Komponente "Funktionale Komponenten"

Eine einfache, reaktionsschnelle, 3D-inspirierte E-Commerce-Produktkarte mit einem analogen Farbschema, das den Dunkelmodus unterstützt.

Offen

Immobilien-Listing-Karte

Eine komplexe, von Papier/Druck inspirierte Immobilienanzeigekarte mit Unternehmensblautönen, die für Immobilienlisting-Plattformen entwickelt wurde. Es bietet ein reaktionsschnelles Layout, Unterstützung für den Dunkelmodus und mehrere Details zu einer Immobilie.

Offen