CCHub Logo CCHub Tailwind Collection
Komponenten Kapital Retro Blog Modal

Retro Blog Modal

Eine Retro-Vintage-inspirierte modale Komponente für Blog-Inhalte mit einem komplementären Farbschema, moderater Komplexität mit interaktiven Elementen, responsivem Design und Unterstützung für den Dunkelmodus. Es wird kein JavaScript verwendet, sondern verlässt sich ausschließlich auf HTML- und Tailwind-CSS-Klassen. Die Bilder stammen von picsum.photos und die Avatare von randomuser.me.

Vorschau

HTML-Code 

<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-cyan-800 dark:text-white">
    <div class="mt-3 text-center">
      <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-cyan-100 dark:bg-cyan-600">
        <svg class="h-6 w-6 text-cyan-600 dark:text-cyan-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
      </div>
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Modal Title</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-200">Modal Content Goes Here. Replace with your blog content or message.</p>
        <img class="mt-4 rounded-md" src="https://picsum.photos/400/200" alt="Placeholder Image">
        <div class="flex justify-center mt-4">
          <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
        </div>
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-cyan-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-cyan-600 focus:outline-none focus:ring-2 focus:ring-cyan-300 dark:bg-cyan-700 dark:hover:bg-cyan-900 dark:focus:ring-cyan-800">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Modale Komponente

Eine reaktionsschnelle modale Komponente, die mit Mikrointeraktionen und einem triadischen Farbschema gestaltet ist und für Social-Media-Schnittstellen entwickelt wurde. Es bietet Animationen, die Benutzer bei der Interaktion ansprechen, und bietet Unterstützung für dunkle Themen mit Tailwind CSS.

Offen

Skeuomorphe Modalkomponente

Eine komplexe, reaktionsschnelle Modalkomponente in einem skeuomorphen Design mit Komplementärfarben für den E-Commerce.

Offen

Retro Vintage Modal Komponente

Eine einfache Retro-/Vintage-Modalkomponente mit einem komplementären Farbschema für die Präsentation von Arbeiten oder Produkten, die mit Tailwind CSS entworfen wurde.

Offen