Cerca componenti

Categorie

Capitale

Finestre pop-up che visualizzano il contenuto

Modale aziendale terroso complesso con microinterazioni

Un componente modale complesso, reattivo, dai toni della terra con microinterazioni, adatto per siti Web aziendali, che supporta la modalità oscura.

Aperto Anteprima

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center">
  <div class="p-8 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800 transform transition-all duration-500 ease-in-out scale-95 hover:scale-100">
    <div class="text-center">
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Modal Title</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-300">This is a complex modal with various interactive elements and a beautiful earth-toned color scheme, designed for business websites and supports dark mode.</p>
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-green-700 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-500 transition transform duration-150 ease-in-out hover:scale-105">OK</button>
        <button id="cancel-btn" class="ml-3 px-4 py-2 bg-red-700 text-white text-base font-medium rounded-md shadow-sm hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 transition transform duration-150 ease-in-out hover:scale-105">Cancel</button>
      </div>
    </div>
  </div>
</div>

Componente modale vintage retrò

Un semplice componente modale retrò/vintage con una combinazione di colori complementari per mostrare lavori o prodotti, progettato utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-80 dark:bg-black dark:bg-opacity-90">  <div class="bg-yellow-300 dark:bg-yellow-700 text-gray-800 dark:text-gray-200 rounded-lg p-6 max-w-md w-full shadow-lg">    <h2 class="text-lg font-bold mb-4">My Portfolio Item</h2>    <img class="mb-4 rounded" src="https://picsum.photos/300/200" alt="Portfolio Item">    <p class="mb-4">This is a short description of the portfolio item showcasing the work or product. Explore more to find out how it can benefit you!</p>    <div class="flex items-center">      <img class="rounded-full w-10 h-10 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">      <span class="font-semibold">John Doe</span>    </div>    <div class="mt-6 flex justify-end">      <button class="bg-yellow-500 hover:bg-yellow-600 dark:bg-yellow-600 dark:hover:bg-yellow-500 text-white font-bold py-2 px-4 rounded">Close</button>    </div>  </div></div>

Skeuomorfismo Componente modale terroso

Un componente modale complesso e reattivo con design Skeuomorphism, combinazione di colori dei toni della Terra e supporto del tema scuro per l'uso del portfolio. Presenta più elementi interattivi senza JavaScript.

Aperto Anteprima

                <div class="fixed inset-0 bg-stone-800 bg-opacity-75 flex items-center justify-center p-4">
  <div class="bg-gradient-to-br from-stone-100 to-stone-300 text-stone-800 rounded-lg shadow-2xl overflow-hidden max-w-2xl w-full">
    <div class="p-6 border-b border-stone-400">
      <h2 class="text-2xl font-bold text-stone-900 drop-shadow-md">Project Title</h2>
    </div>
    <div class="p-6">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <img src="https://picsum.photos/600/400?random=1" alt="Project Image" class="rounded-lg shadow-xl border-4 border-stone-300">
        </div>
        <div>
          <p class="text-stone-700 mb-4 leading-relaxed">This is a detailed description of the project. It highlights the key features, technologies used, and the goals achieved. The skeuomorphic design elements like soft shadows and gradients are used to give a sense of depth and realism.</p>
          <ul class="list-disc list-inside text-stone-600 space-y-2">
            <li>Feature 1: Detailed explanation</li>
            <li>Feature 2: Detailed explanation</li>
            <li>Feature 3: Detailed explanation</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="p-6 border-t border-stone-400 bg-stone-200 flex justify-end space-x-4">
      <button class="px-6 py-2 bg-stone-600 text-white font-semibold rounded-md shadow-lg hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50 transition ease-in-out duration-200">View Live</button>
      <button class="px-6 py-2 bg-stone-400 text-stone-800 font-semibold rounded-md shadow-lg hover:bg-stone-500 focus:outline-none focus:ring-2 focus:ring-stone-300 focus:ring-opacity-50 transition ease-in-out duration-200">Close</button>
    </div>
  </div>
</div>

<!-- Dark Mode -->
<div class="fixed inset-0 bg-stone-800 bg-opacity-75 flex items-center justify-center p-4 hidden dark:flex">
  <div class="bg-gradient-to-br from-stone-700 to-stone-900 text-stone-200 rounded-lg shadow-2xl overflow-hidden max-w-2xl w-full border border-stone-600">
    <div class="p-6 border-b border-stone-600">
      <h2 class="text-2xl font-bold text-stone-100 drop-shadow-md">Project Title</h2>
    </div>
    <div class="p-6">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <img src="https://picsum.photos/600/400?random=2" alt="Project Image" class="rounded-lg shadow-xl border-4 border-stone-600">
        </div>
        <div>
          <p class="text-stone-300 mb-4 leading-relaxed">This is a detailed description of the project in dark mode, maintaining the skeuomorphic design with darker tones and subtle highlights.</p>
          <ul class="list-disc list-inside text-stone-400 space-y-2">
            <li>Feature 1: Detailed explanation</li>
            <li>Feature 2: Detailed explanation</li>
            <li>Feature 3: Detailed explanation</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="p-6 border-t border-stone-600 bg-stone-800 flex justify-end space-x-4">
      <button class="px-6 py-2 bg-stone-500 text-white font-semibold rounded-md shadow-lg hover:bg-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50 transition ease-in-out duration-200">View Live</button>
      <button class="px-6 py-2 bg-stone-600 text-stone-200 font-semibold rounded-md shadow-lg hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50 transition ease-in-out duration-200">Close</button>
    </div>
  </div>
</div>

Componente modale

Un componente modale reattivo con microinterazioni e combinazione di colori triadica, progettato per le interfacce dei social media. Presenta animazioni che coinvolgono gli utenti durante l'interazione e fornisce supporto per il tema scuro utilizzando Tailwind CSS.

Aperto Anteprima

                <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>

Blog retrò modale

Un componente modale di ispirazione retrò-vintage per i contenuti del blog, caratterizzato da una combinazione di colori complementari, complessità moderata con elementi interattivi, design reattivo e supporto per la modalità oscura. Non viene utilizzato JavaScript, basandosi esclusivamente sulle classi HTML e CSS Tailwind. Le immagini provengono da picsum.photos e gli avatar da randomuser.me.

Aperto Anteprima

                <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>

RetroVintageTerraTonoModal

Componente modale retrò/vintage nei toni della terra per cruscotto con modalità oscura e reattività

Aperto Anteprima

                <div class="fixed inset-0 bg-gray-900 bg-opacity-50 overflow-y-auto h-full w-full dark:bg-gray-800 dark:bg-opacity-75">
  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-stone-100 dark:bg-stone-700">
    <div class="mt-3 text-center">
      <div
        class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-emerald-100 dark:bg-emerald-700"
      >
        <svg
          class="h-6 w-6 text-emerald-600 dark:text-emerald-200"
          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-gray-100"
      >
        Dashboard Item Details
      </h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-300">
          Detailed information about the selected dashboard item. This is a placeholder for dynamic content.
        </p>
      </div>
      <div class="items-center px-4 py-3">
        <button
          id="ok-btn"
          class="px-4 py-2 bg-emerald-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-300 dark:focus:ring-emerald-800"
        >
          Close
        </button>
      </div>
    </div>
  </div>
</div>

Componente modale modalità oscura

Un componente modale in modalità oscura semplice e reattivo progettato per la lettura e il consumo di contenuti. Presenta una combinazione di colori complementari e un layout minimale, adatto per blog o siti Web basati sui contenuti.

Aperto Anteprima

                <div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-75 dark:bg-gray-900" role="dialog" aria-modal="true">
    <div class="bg-gray-900 rounded-lg shadow-lg max-w-sm w-full p-6">
        <button class="absolute top-3 right-3 text-gray-500 hover:text-gray-300 dark:text-gray-400 dark:hover:text-gray-200" aria-label="Close">&times;</button>
        <h2 class="text-xl text-white font-semibold mb-4">Blog Post Title</h2>
        <img class="w-full h-32 object-cover rounded-lg mb-4" src="https://picsum.photos/400/200" alt="Random Image">
        <p class="text-gray-300 dark:text-gray-200 mb-4">This is a simple modal component designed for displaying content in dark mode. It is responsive and features a clean layout that aids in reading.</p>
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
                <p class="text-sm text-gray-400 dark:text-gray-300">Posted by John Doe</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">3 minutes ago</p>
            </div>
        </div>
    </div>
</div>

Componente modale modalità oscura

Un semplice componente modale reattivo progettato per le interfacce dei social media in modalità oscura con una combinazione di colori pastello.

Aperto Anteprima

                <div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-80 dark:bg-gray-800">
    <div class="bg-gray-800 rounded-lg shadow-lg w-11/12 md:w-1/3 p-6">
        <h2 class="text-xl font-bold text-white mb-4">Welcome to Our Community!</h2>
        <p class="text-gray-300 mb-4">Join us in sharing ideas, experiences, and connecting with one another. We believe in the power of community.</p>
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <span class="text-pink-200 font-semibold">John Doe</span>
        </div>
        <img src="https://picsum.photos/300/150" alt="Placeholder" class="rounded-lg mb-4">
        <button class="w-full bg-pink-500 hover:bg-pink-400 text-white font-bold py-2 px-4 rounded">Join Now</button>
        <button class="w-full mt-2 bg-transparent border border-pink-500 hover:bg-pink-500 hover:text-white text-pink-500 font-bold py-2 px-4 rounded">Cancel</button>
    </div>
</div>

Modale di progettazione dei materiali

Un componente modale in stile Material Design con design reattivo e supporto per temi scuri. Include una sovrapposizione modale, un contenitore modale con un aspetto simile a una carta e un pulsante di chiusura. Non è incluso alcun JavaScript.

Aperto Anteprima

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
    <div class="mt-3 text-center">
      <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-300">Modal content goes here. This is a placeholder for your information.</p>
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">Got It!</button>
      </div>
    </div>
  </div>
</div>

Componente modale vintage retrò

Un componente modale reattivo retrò/vintage progettato con Tailwind CSS che include il supporto della modalità oscura e un'estetica nostalgica degli anni '80/'90.

Aperto Anteprima

                <div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-75 transition-opacity" id="modal-wrapper">
    <div class="bg-white rounded-lg shadow-lg max-w-md w-full p-6 sm:p-8">
        <div class="flex justify-between items-center">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-300">Retro Modal Title</h2>
            <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200 focus:outline-none" id="modal-close">
                &times;
            </button>
        </div>
        <div class="mt-4">
            <img src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" class="w-full h-auto rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">This is a nostalgic modal component inspired by the vintage aesthetics of the 80s and 90s. It features a simple layout and dark mode support.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-300">John Doe</span>
            </div>
        </div>
        <div class="mt-6 flex justify-end">
            <button class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Action</button>
        </div>
    </div>
</div>
<!-- Dark Mode Styles -->
<style>
    @media (prefers-color-scheme: dark) {
        #modal-wrapper {
            background-color: rgba(31, 41, 55, 0.75);
        }
    }
</style>