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

Art_Deco_Government_Modal

Eine reaktionsschnelle, vom Art Deco inspirierte Modalkomponente für Websites von Behörden und öffentlichen Diensten mit geometrischen Mustern, luxuriösem Design und einem analogen Farbschema. Enthält Unterstützung für den Dunkelmodus.

Offen

SocialMediaPostModal

Eine einfache, reaktionsschnelle, vom Material Design inspirierte Modalkomponente mit analoger Farbgebung, die sich für Social-Media-Anwendungen eignet. Unterstützt dunkles Design.

Offen

Komplexes erdiges Business Modal mit Mikrointeraktionen

Eine komplexe, reaktionsschnelle, erdfarbene Modalkomponente mit Mikrointeraktionen, die für Unternehmenswebsites geeignet ist und den Dunkelmodus unterstützt.

Offen