一个复杂的响应式模态组件,采用拟物化设计风格,具有用于电子商务的互补色。
<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>
一个简单、响应式的模态组件,采用有机/自然风格的设计,使用大地色调,适用于文档或 wiki 网站。包括深色模式支持。
一个简单的 retro/vintage 模态组件,带有互补的配色方案,用于展示工作或产品,使用 Tailwind CSS 设计。
响应式 3D 设计的模态组件,具有三元配色方案,适用于商业和企业网站,具有深色模式支持。