lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
126 lines (110 loc) • 5.67 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Detail Modal</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightwind@3.0.0/src/lightswind.css">
<style>
.fade-in {
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Hide scrollbar */
.hide-scrollbar {
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE 10+ */
}
.hide-scrollbar::-webkit-scrollbar {
display: none;
/* WebKit browsers */
}
/* Smooth scrolling */
.smooth-scroll {
scroll-behavior: smooth;
}
</style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 font-primarylw">
<!-- Modal Background Overlay -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50 fade-in">
<!-- Modal Container -->
<div
class="relative w-10/12 md:max-w-3/5 md:w-3/5 h-4/5 bg-white dark:bg-gray-800 shadow-lg overflow-y-auto hide-scrollbar smooth-scroll p-6 space-y-6">
<!-- Close Button -->
<button
class="absolute top-4 right-4 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-600 dark:text-gray-300 rounded-full p-2">
<svg xmlns=" http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
<!-- Modal Content -->
<div class="space-y-6">
<!-- Product Image -->
<div class="flex justify-center">
<img src="https://images.pexels.com/photos/1649771/pexels-photo-1649771.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Wireless Headphones" class="w-full md:w-2/3 h-64 object-cover rounded-lg shadow-md">
</div>
<!-- Product Details -->
<div class="space-y-4">
<h1 class="text-2xl md:text-4xl font-extrabold text-gray-800 dark:text-white text-center">
Wireless Headphones
</h1>
<p class="text-md md:text-xl text-gray-600 dark:text-gray-300 text-center">
Premium sound quality with noise-cancelling technology. Enjoy your music and calls with
freedom.
</p>
<!-- Rating -->
<div class="flex justify-center items-center space-x-2">
<span class="text-yellow-500 text-lg">
★★★★☆
</span>
<span class="text-sm text-gray-600 dark:text-gray-300">(4.5 out of 5 stars)</span>
</div>
<!-- Price -->
<p class="text-2xl md:text-4xl font-bold text-gray-800 dark:text-white text-center">
$299.99
</p>
</div>
<!-- Key Features -->
<div class="space-y-2">
<h3 class="text-xl md:text-2xl font-semibold text-gray-800 dark:text-white">Key Features:</h3>
<ul class="list-disc pl-6 text-md md:text-lg text-gray-600 dark:text-gray-300">
<li>Noise-cancelling technology</li>
<li>Wireless Bluetooth connectivity</li>
<li>Up to 30 hours of battery life</li>
<li>Comfortable over-ear design</li>
<li>Integrated microphone for hands-free calls</li>
</ul>
</div>
<!-- Add to Cart Button -->
<div class="flex justify-center mt-6">
<button
class="flex items-center justify-center gap-3 px-8 py-4 bg-primarylw text-white rounded-full hover:bg-primarylw-2 transition-colors duration-300 dark:bg-primarylw dark:hover:bg-primarylw-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="h-5 w-5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
</svg>
Add to Cart
</button>
</div>
</div>
</div>
</div>
</body>
</html>