CCHub Logo CCHub Tailwind Collection
Komponenten Wunschzettel Wunschzettel Komponente - Material Design

Wunschzettel Komponente - Material Design

Eine vom Material Design inspirierte Wishlist-Komponente mit responsivem Design und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class='p-4 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 dark:bg-gray-800'>
  <div class='text-center space-y-2 sm:text-left'>
    <div class='space-y-0.5'>
      <p class='text-lg text-black font-semibold dark:text-white'>
        Product Name
      </p>
      <p class='text-gray-500 font-medium dark:text-gray-300'>
        $19.99
      </p>
    </div>
    <button class='px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800'>
      Remove
    </button>
  </div>
  <img class='block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0' src='https://picsum.photos/200' alt='Product Image'>
</div>

Verwandte Komponenten

RetroWunschlisteKomponente

Eine einfache, reaktionsschnelle Wunschlistenkomponente mit Retro-/Vintage-Ästhetik, Herbstfarbschema und Unterstützung für den Dunkelmodus, geeignet für Dokumentations- oder Wissensdatenbanken.

Offen

Wunschlisten-Komponente

Wunschlistenkomponente mit 3D-Design, analogem Farbschema und einfacher Komplexität für Dashboard-Zwecke, mit responsivem Design und Unterstützung für dunkle Themen.

Offen

Wunschlisten-Komponente

Eine einfache und reaktionsschnelle Wunschlistenkomponente, die sich für Dating- oder Social-Connection-Plattformen eignet, mit einer 3D-Designästhetik mit Unternehmensblautönen und Unterstützung für den Dunkelmodus.

Offen