CCHub Logo CCHub Tailwind Collection
Komponenten Kapital Modale Komponente

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.

Vorschau

HTML-Code 

<div class="fixed z-50 inset-0 flex items-center justify-center bg-gray-800 bg-opacity-75 dark:bg-gray-900 transition-opacity duration-500 ease-in-out" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full">
    <div class="bg-gray-100 dark:bg-gray-700 px-4 py-5 sm:px-6">
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="modal-title">
        Share Your Thoughts
      </h3>
      <div class="mt-2">
        <p class="text-sm text-gray-500 dark:text-gray-300">
          Engage with your friends and share ideas or posts directly here.
        </p>
      </div>
    </div>
    <div class="p-6">
      <form class="space-y-4">
        <textarea class="w-full h-24 p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500" placeholder="What's on your mind?"></textarea>
        <div class="flex items-center space-x-4">
          <img class="w-10 h-10 rounded-full shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <button type="submit" class="inline-flex justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            Post
          </button>
        </div>
      </form>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
      <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
        Close
      </button>
    </div>
  </div>
</div>

Verwandte Komponenten

Modale Komponente

Eine komplexe, reaktionsschnelle Modalkomponente mit Neon-/Elektrogradientendesign, die für Geschäfts-/Unternehmenswebsites geeignet ist. Bietet sanfte Übergänge, Unterstützung für den Dunkelmodus und mehrere interaktive Elemente.

Offen

RetroVintageEarthToneModal

Retro/Vintage-Modalkomponente in Erdtönen für Dashboard mit Dunkelmodus und Reaktionsfähigkeit

Offen

Modalkomponente im Dunkelmodus

Eine einfache und reaktionsschnelle modale Komponente im Dunkelmodus, die für das Lesen und den Konsum von Inhalten entwickelt wurde. Es verfügt über ein komplementäres Farbschema und ein minimales Layout, das für Blogs oder inhaltsgesteuerte Websites geeignet ist.

Offen