Search Components

Modal

Pop-up windows displaying content

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>

Modal Component

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>

Material Design Modal

A Material Design-styled Modal Component with responsive design and dark theme support. Includes a modal overlay, a modal container with a card-like appearance, and a close button. No JavaScript is included.

Open Preview

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

Retro Vintage Modal Component

A responsive retro/vintage modal component designed with Tailwind CSS that includes dark mode support and nostalgic 80s/90s aesthetics.

Open Preview

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

Search Components

Categories

Modal