Modal

GlassmorphismModalComponent

A Glassmorphism-style modal component with analogous color scheme, moderate complexity, suitable for blog/content display. Features a responsive design with dark theme support using Tailwind CSS.

Open Preview

                <div class="fixed inset-0 bg-gray-900 bg-opacity-70 flex justify-center items-center p-4 z-50 dark:bg-opacity-80"> <div class="relative bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl p-6 md:p-8 lg:p-10 max-w-2xl w-full m-4 border border-opacity-30 border-white dark:bg-gray-800 dark:bg-opacity-20 dark:border-gray-700 text-gray-900 dark:text-white transform transition-all scale-100 opacity-100"> <!-- Close Button --> <button class="absolute top-4 right-4 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 transition duration-300 ease-in-out focus:outline-none"> <svg class="w-6 h-6" 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="M6 18L18 6M6 6l12 12"></path> </svg> </button> <!-- Modal Header --> <div class="mb-6"> <h3 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2">The Wonders of Glassmorphism</h3> <p class="text-lg text-gray-800 dark:text-gray-200">Embrace the beauty of translucent design.</p> </div> <!-- Modal Content - Article Preview --> <div class="space-y-6 text-gray-800 dark:text-gray-200"> <img src="https://picsum.photos/600/350?random=1" alt="Abstract Glassmorphism Background" class="rounded-lg mb-4 shadow-md object-cover w-full h-auto"> <p class="leading-relaxed"> Glassmorphism is a design trend characterized by a frosted-glass effect, where backgrounds are blurred to create a sense of depth and translucency. This aesthetic often involves vibrant colors, light borders, and distinct layering, giving UI elements a sense of floating on the screen. It

Skeuomorphic Modal Component

A complex responsive modal component styled in a skeuomorphic design with complementary colors for e-commerce.

Open Preview

                <div class="fixed inset-0 flex items-center justify-center z-50 bg-opacity-50 bg-gray-900 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 w-11/12 md:w-1/3">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Item Details</h2>
    <div class="flex justify-center my-4">
      <img src="https://picsum.photos/200/300" alt="Product Image" class="rounded-lg shadow-md" />
    </div>
    <p class="text-gray-600 dark:text-gray-300">This is where you can detail the product features, specifications, and other necessary information to help customers make an informed decision.</p>
    <ul class="my-4 text-gray-700 dark:text-gray-200">
      <li class="my-2 flex items-center"><svg class="w-5 h-5 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8z"/></svg>Specification 1</li>
      <li class="my-2 flex items-center"><svg class="w-5 h-5 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8z"/></svg>Specification 2</li>
      <li class="my-2 flex items-center"><svg class="w-5 h-5 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8z"/></svg>Specification 3</li>
    </ul>
    <div class="flex items-center justify-between my-4">
      <span class="text-lg font-bold text-gray-800 dark:text-gray-100">$19.99</span>
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
    </div>
    <div class="flex justify-center my-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-white dark:border-gray-800" />
      <span class="text-gray-700 dark:text-gray-200 ml-2">John Doe</span>
    </div>
    <button class="mt-4 w-full bg-red-500 hover:bg-red-600 text-white font-bold py-2 rounded">Close</button>
  </div>
</div>

Complex Earthy Business Modal with Microinteractions

A complex, responsive, earth-toned Modal Component with microinteractions, suitable for business websites, supporting dark mode.

Open Preview

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

Retro Vintage Modal Component

A simple retro/vintage modal component with a complementary color scheme for showcasing work or products, designed using Tailwind CSS.

Open Preview

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

Skeuomorphism Earthy Modal Component

A complex, responsive Modal Component with Skeuomorphism design, Earth tones color scheme, and dark theme support for Portfolio use. Features multiple interactive elements without JavaScript.

Open Preview

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

A responsive modal component styled with microinteractions and triadic color scheme, designed for social media interfaces. It features animations that engage users upon interaction and provides dark theme support using Tailwind CSS.

Open Preview

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

Retro Blog Modal

A retro-vintage inspired modal component for blog content, featuring a complementary color scheme, moderate complexity with interactive elements, responsive design, and dark mode support. No JavaScript is used, relying solely on HTML and Tailwind CSS classes. Images are sourced from picsum.photos and avatars from randomuser.me.

Open Preview

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

RetroVintageEarthToneModal

Retro/Vintage Modal Component in Earth Tones for Dashboard with Dark Mode and Responsiveness

Open Preview

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

Dark Mode Modal Component

A simple and responsive dark mode modal component designed for reading and content consumption. It features a complementary color scheme and minimal layout, suitable for blog or content-driven websites.

Open Preview

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

Dark Mode Modal Component

A simple responsive modal component designed for social media interfaces in dark mode with a pastel color scheme.

Open Preview

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

Categories