Product Grid - Copy this React, Tailwind Component to your project
Tego este componente que usa alpinejs y tailwindcss: <section class="py 20 px 4" x data="productList()"> <div class="container mx auto"> <div class="text center mb 16"> <h2 class="text 4xl font bold text white mb 4">La Lista de la Compra</h2> <p class="text xl text blue 400">Essential Items</p> </div> <div class="grid grid cols 1 md:grid cols 2 lg:grid cols 3 gap 8"> <template x if="!products.length"> <template x for="i in products.length"> <div class="relative h [400px] rounded xl overflow hidden bg gray 800 animate pulse"> <div class="absolute bottom 0 left 0 right 0 p 6"> <div class="h 6 bg gray 700 rounded mb 4"></div> <div class="h 4 bg gray 700 rounded mb 4 w 2/3 mx auto"></div> <div class="h 16 bg gray 700 rounded mb 4"></div> <div class="h 4 bg gray 700 rounded w 1/4 mx auto"></div> </div> </div> </template> </template> <template x for="product in products" :key="product.id"> <div class="relative h [400px] rounded xl overflow hidden group" x data="{hover: false}" @mouseenter="hover = true" @mouseleave="hover = false"> <img :src="product.foto" :alt="product.foto" class="w full h full object cover"> <div class="absolute inset 0 bg gradient to t from gray 900 via gray 900/80 to transparent transition opacity duration 300" :class="{'opacity 90': hover, 'opacity 70': !hover}"></div> <div class="absolute bottom 0 left 0 right 0 p 6 transform transition transform duration 300" :class="{'translate y 0': hover, 'translate y 2': !hover}"> <h3 class="text 2xl font semibold text white text center" x text="product.nombre"></h3> <p class="text blue 400 text center mb 4" x text="product.categoria"></p> <p class="text gray 200 text center mb 6" x text="product.comentario"></p> <div class="flex justify center space x 4"> <span class="text blue 400" x text="product.price"></span> </div> </div> </div> </template> </div> </div> </section> Arréglalo para que tome la imagen desde un archivo daddo su path. Además añade los campos: cantidad que es un tipom de datos numérico, código de barras y enLista que es boolean y debe visualizarse con un icono representativo de su valor.
