HTML 代码
<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>