Components Modal Complex Earthy Business Modal with Microinteractions

Complex Earthy Business Modal with Microinteractions

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

Preview

HTML Code

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

Related Components

Corporate_Professional_Forum_Modal

A complex, responsive and professional modal component for forum/community platforms with analogous color scheme and dark mode support.

Open

Art_Deco_Government_Modal

A responsive, Art Deco-inspired modal component for government and public service websites, featuring geometric patterns, luxurious styling, and an analogous color scheme. Includes dark mode support.

Open

Cyberpunk Learning Modal

A responsive, cyberpunk-themed modal component for educational platforms, featuring dark backgrounds, neon accents, and interactive elements. Supports dark mode.

Open