lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
114 lines (100 loc) • 6.74 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Detail - Wireless Headphones</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightwind@3.0.0/src/lightswind.css">
</head>
<body class="bg-gray-100 dark:bg-gray-900 font-primarylw">
<!-- Product Detail Page Container -->
<div class="max-w-screen-xl mx-auto px-6 py-12 font-primarylw ">
<!-- Hero Section -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<!-- Product Images -->
<div class="flex justify-center items-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 h-96 object-cover rounded-lg shadow-lg">
</div>
<!-- Product Information -->
<div class="space-y-6">
<h1 class="text-2xl md:text-4xl md:text-4xl font-extrabold text-gray-800 dark:text-white">Wireless Headphones</h1>
<p class="text-md md:text-xl text-gray-600 dark:text-gray-300">Premium sound quality with noise-cancelling
technology. Enjoy your music and calls with freedom.</p>
<!-- Rating Section -->
<div class="flex items-center space-x-2">
<span class="text-yellow-500">
★★★★☆
</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">$299.99</p>
<!-- Add to Cart Button -->
<button
class="hidden md:flex items-center justify-center gap-3 mt-6 w-full 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="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>
</div>
<!-- Product Description Section -->
<div class="mt-12">
<h2 class="text-2xl md:text-4xl md:text-4xl font-extrabold text-gray-800 dark:text-white">Product Description</h2>
<p class="mt-4 text-md md:text-xl text-gray-600 dark:text-gray-300">Experience true wireless freedom with our premium
wireless headphones. Featuring state-of-the-art noise-cancelling technology, these headphones provide
the ultimate listening experience, whether you’re working, traveling, or just relaxing at home. With a
comfortable fit and long battery life, these headphones are perfect for all-day use.</p>
<div class="mt-6 space-y-4">
<h3 class="text-2xl md:text-4xl font-semibold text-gray-800 dark:text-white">Key Features:</h3>
<ul class="list-disc pl-6 text-md md:text-xl 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>
<div class="mt-6 space-y-4">
<h3 class="text-2xl md:text-4xl font-semibold text-gray-800 dark:text-white">Specifications:</h3>
<ul class="list-disc pl-6 text-md md:text-xl text-gray-600 dark:text-gray-300">
<li>Bluetooth Version: 5.0</li>
<li>Battery Life: 30 hours</li>
<li>Weight: 0.5 lbs</li>
<li>Color: Black</li>
<li>Dimensions: 7.5 x 6.2 x 3.2 inches</li>
</ul>
</div>
</div>
<!-- Image Gallery -->
<div class="mt-12 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
<img src="https://images.pexels.com/photos/1649771/pexels-photo-1649771.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Product Image 1" class="w-full h-48 object-cover rounded-lg shadow-md">
<img src="https://images.pexels.com/photos/280250/pexels-photo-280250.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Product Image 2" class="w-full h-48 object-cover rounded-lg shadow-md">
<img src="https://images.pexels.com/photos/3780681/pexels-photo-3780681.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Product Image 3" class="w-full h-48 object-cover rounded-lg shadow-md">
<img src="https://images.pexels.com/photos/28549934/pexels-photo-28549934/free-photo-of-modern-home-living-room-with-smart-devices.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Product Image 4" class="w-full h-48 object-cover rounded-lg shadow-md">
</div>
<!-- Sticky Sidebar for Quick Add to Cart -->
<div
class="mt-12 md:hidden fixed bottom-0 left-0 w-full bg-white dark:bg-gray-800 shadow-lg px-6 py-4 flex justify-between items-center">
<div class="text-md md:text-xl font-bold text-gray-800 dark:text-white">$299.99</div>
<button class="px-6 py-3 bg-primarylw flex items-center justify-center gap-2 text-sm text-white rounded-full hover:bg-primarylw-2
transition-colors duration-300 dark:bg-primarylw dark:hover:bg-primarylw">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-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>
</body>
</html>