lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
176 lines (159 loc) • 11.9 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Details - Advanced Version</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightwind@3.0.0/src/lightswind.css">
<script src="https://cdn.jsdelivr.net/npm/vanilla-zoom@1.0.5/vanilla-zoom.min.js"></script>
</head>
<body class="bg-gray-100 dark:bg-gray-900 font-primarylw">
<div class="bg-white dark:bg-black w-full h-full">
<div class="mt-8 font-primarylw">
<div class="max-w-7xl mx-auto px-6">
<h1 class="text-5xl font-extrabold text-gray-800 dark:text-white">Wireless Headphones</h1>
<p class="mt-2 text-lg text-gray-600 dark:text-gray-300">Experience cutting-edge wireless technology and
immersive sound with a sleek design. The ultimate audio experience for every lifestyle.</p>
<div class="mt-12 grid grid-cols-1 lg:grid-cols-2 gap-12">
<!-- Product Gallery -->
<div class="relative">
<div class="sticky top-24">
<div id="image-zoom" class="relative">
<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 h-96 object-cover rounded-lg shadow-lg transition-all duration-500 hover:scale-105">
</div>
<div class="flex mt-4 justify-center space-x-4">
<img src="https://images.pexels.com/photos/1649771/pexels-photo-1649771.jpeg?auto=compress&cs=tinysrgb&w=200&h=200&dpr=1"
alt="Thumbnail 1"
class="w-20 h-20 object-cover rounded-md border-2 border-gray-300 cursor-pointer hover:border-blue-500 transition duration-200">
<img src="https://images.pexels.com/photos/1649771/pexels-photo-1649771.jpeg?auto=compress&cs=tinysrgb&w=200&h=200&dpr=1"
alt="Thumbnail 2"
class="w-20 h-20 object-cover rounded-md border-2 border-gray-300 cursor-pointer hover:border-blue-500 transition duration-200">
<img src="https://images.pexels.com/photos/1649771/pexels-photo-1649771.jpeg?auto=compress&cs=tinysrgb&w=200&h=200&dpr=1"
alt="Thumbnail 3"
class="w-20 h-20 object-cover rounded-md border-2 border-gray-300 cursor-pointer hover:border-blue-500 transition duration-200">
</div>
</div>
</div>
<!-- Product Details -->
<div class="space-y-6">
<div>
<h3 class="text-4xl font-semibold text-gray-800 dark:text-white">$299.99</h3>
<div class="flex items-center space-x-2">
<span class="text-yellow-500 text-xl">
★★★★☆
</span>
<span class="text-sm text-gray-500">(4.5 reviews)</span>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 text-lg">These wireless headphones offer exceptional
sound clarity and immersive audio experience. Designed for comfort and with long battery
life, these headphones are ideal for both work and play.</p>
<!-- Product Specifications -->
<div>
<h3 class="text-2xl font-semibold text-gray-800 dark:text-white">Specifications</h3>
<ul class="list-disc pl-5 space-y-2 text-gray-600 dark:text-gray-300">
<li>Battery Life: 20 hours</li>
<li>Connectivity: Bluetooth 5.0</li>
<li>Noise Cancellation: Active Noise Cancellation (ANC)</li>
<li>Weight: 250g</li>
<li>Color: Black</li>
</ul>
</div>
<!-- Product Description -->
<div>
<h3 class="text-2xl font-semibold text-gray-800 dark:text-white">Description</h3>
<p class="text-gray-600 dark:text-gray-300 text-lg">The perfect blend of style and
performance. These wireless headphones come with advanced features such as active noise
cancellation, a lightweight build, and premium sound quality. Ideal for all-day use,
whether you’re commuting or working out.</p>
</div>
<!-- Add to Cart Button -->
<div class="mt-8 flex items-center justify-center ">
<button
class="max-w-64 flex items-center justify-center gap-4 w-full px-8 py-4 bg-blue-600 text-white rounded-lg shadow-lg hover:bg-blue-700 transition-all duration-300 dark:bg-blue-500 dark:hover:bg-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="size-6">
<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>
<!-- Share Product Section -->
<div class="flex items-center justify-between mt-8">
<div class="text-lg text-gray-800 dark:text-white font-semibold">Share:</div>
<div class="flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 12H3.5a1.5 1.5 0 0 1 0-3H8V5.5a1.5 1.5 0 0 1 3 0V9h4.5a1.5 1.5 0 0 1 0 3H11V15a1.5 1.5 0 0 1-3 0v-3H3.5a1.5 1.5 0 0 1 0-3H8V5.5a1.5 1.5 0 0 1 3 0V9h4.5a1.5 1.5 0 0 1 0 3H11V15a1.5 1.5 0 0 1-3 0v-3H3.5a1.5 1.5 0 0 1 0-3H8z">
</path>
</svg>
</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 12a8 8 0 1 1 8 8 8 8 0 0 1-8-8zM4 12h8"></path>
</svg>
</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M18 10a6 6 0 0 1-6 6H6v6h6a6 6 0 0 1 6-6V10z"></path>
</svg>
</a>
</div>
</div>
<!-- Reviews Section -->
<div>
<h3 class="text-2xl font-semibold text-gray-800 dark:text-white">Customer Reviews</h3>
<div class="space-y-6">
<div class="flex space-x-4">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Reviewer"
class="w-12 h-12 rounded-full object-cover">
<div class="flex flex-col">
<div class="flex items-center space-x-2">
<span class="font-semibold text-gray-800 dark:text-white">John Doe</span>
<span class="text-sm text-gray-500">2 days ago</span>
</div>
<div class="flex items-center space-x-2">
<span class="text-yellow-500">★★★★☆</span>
<p class="text-sm text-gray-600 dark:text-gray-300">Great sound quality,
battery life is top-notch, but ANC could be improved.</p>
</div>
</div>
</div>
<div class="flex space-x-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Reviewer"
class="w-12 h-12 rounded-full object-cover">
<div class="flex flex-col">
<div class="flex items-center space-x-2">
<span class="font-semibold text-gray-800 dark:text-white">Jane Smith</span>
<span class="text-sm text-gray-500">1 week ago</span>
</div>
<div class="flex items-center space-x-2">
<span class="text-yellow-500">★★★★★</span>
<p class="text-sm text-gray-600 dark:text-gray-300">Fantastic headphones!
The sound is crisp and clear, and they’re super comfortable.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Initialize the zoom feature
new Zoom('#image-zoom');
</script>
</body>
</html>