lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
112 lines (101 loc) • 5.92 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Cards</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">
<div class="bg-white dark:bg-black w-full h-full">
<div class="mt-4 font-primarylw h-full bg-white dark:bg-black">
<div class="max-w-7xl mx-auto px-6">
<h1 class="text-2xl md:text-4xl font-extrabold text-gray-800 dark:text-white">Our Premium Products</h1>
<p class="mt-2 text-sm md:text-lg text-gray-600 dark:text-gray-300">Explore our collection of
top-quality products
designed to enhance your lifestyle.</p>
</div>
<main class="py-12">
<div class="max-w-7xl mx-auto px-6">
<!-- Product Cards Container -->
<div id="product-cards"
class="grid gap-8 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
</div>
</div>
</main>
</div>
</div>
<script>
// Sample JSON data for products
const products = [
{
"id": 1,
"name": "Wireless Headphones",
"price": 299.99,
"image": "https://images.pexels.com/photos/1649771/pexels-photo-1649771.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"description": "Experience true wireless freedom with premium sound quality. Noise-cancelling technology for the best listening experience.",
"rating": 4.5,
"category": "Electronics"
},
{
"id": 2,
"name": "Smart Watch",
"price": 149.99,
"image": "https://images.pexels.com/photos/280250/pexels-photo-280250.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"description": "Stay connected and track your fitness goals with a sleek, stylish smartwatch that blends functionality and elegance.",
"rating": 4.0,
"category": "Wearables"
},
{
"id": 3,
"name": "Bluetooth Tws",
"price": 129.99,
"image": "https://images.pexels.com/photos/3780681/pexels-photo-3780681.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"description": "Portable and powerful sound system with deep bass and crystal-clear highs. Perfect for parties and outdoor events.",
"rating": 3.8,
"category": "Audio"
},
{
"id": 4,
"name": "4K UHD Smart TV",
"price": 799.99,
"image": "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",
"description": "Enjoy your favorite content in stunning 4K resolution with vibrant colors and dynamic sound. Perfect for home entertainment.",
"rating": 4.7,
"category": "Electronics"
}
];
// Function to generate product cards from JSON data
const renderProductCards = () => {
const productCardsContainer = document.getElementById('product-cards');
productCardsContainer.innerHTML = ''; // Clear any existing content
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('p-6', 'bg-white', 'rounded-lg', 'shadow-lg', 'flex', 'flex-col', 'items-center', 'border', 'transition-transform', 'duration-300', 'hover:translate-y-[-10px]', 'hover:shadow-xl', 'dark:bg-gray-800', 'dark:border-gray-700', 'dark:text-white');
card.innerHTML =
'<img src="' + product.image + '" alt="' + product.name + '" class="w-full h-64 object-cover rounded-lg">' +
'<h2 class="text-xl md:text-2xl font-bold mt-4">' + product.name + '</h2>' +
'<p class="text-gray-600 text-xs md:text-base text-center mt-2 dark:text-gray-300">' + product.description + '</p>' +
'<div class="flex items-center mt-4">' +
'<span class="text-xl font-semibold text-gray-800 dark:text-white">$' + product.price.toFixed(2) + '</span>' +
'<span class="ml-2 text-yellow-500">' +
'★'.repeat(Math.floor(product.rating)) +
'<span class="text-gray-400">' + '★'.repeat(5 - Math.floor(product.rating)) + '</span>' +
'</span>' +
'</div>' +
'<div class="mt-4 text-xs md:text-sm text-gray-600 dark:text-gray-400">' + product.category + '</div>' +
'<button class="flex items-center justify-center gap-2 text-sm md:text-lg mt-6 px-6 py-3 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition-colors 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="w-5 md:w-6 h-5 md:h-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>';
productCardsContainer.appendChild(card);
});
};
// Initial call to render the product cards
renderProductCards();
</script>
</body>
</html>