Home
Andrés Abarzúa
Product Page

Product Page

This is a product page, made with HTML and Tailwind CSS, in desktop have 3 columns, Models/Variants - Images with thumbnails - Product Details.
On the other hand have 2 images technicals, finally descriptions and button to add to cart.

This tailwind example is contributed by Andrés Abarzúa, on 24-Jul-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Product Showcase, Product card

Product eCommerce

Author Andrés Abarzúa

127

Fork Fullscreen

<div id="product">
  <div class="mx-auto max-w-7xl">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-4">
      
      <div class="space-y-4">
        <h2 class="text-xl font-semibold text-gray-800">Modelos / Variantes</h2>
        <div class="space-y-3">
          
          <div class="flex items-center p-2 bg-white rounded-lg shadow border-2 border-blue-500 cursor-pointer transition-all">
            <img src="https://growithjane.com/wp-content/uploads/2023/01/mars-hydro-sp-3000-samsung-lm301b-commercial-led-grow-light-for-indoor-plants.jpg"
              alt="Mars Hydro SP 3000" class="w-14 h-14 object-cover rounded bg-gray-100" />
            <div class="ml-4">
              <h5 class="font-sm text-gray-800">Mars Hydro SP 3000</h5>
              <p class="text-sm text-gray-500">REF-SP3000</p>
            </div>
          </div>
          
          <div class="flex items-center p-2 bg-white rounded-lg shadow cursor-pointer transition-all hover:shadow-md">
            <img src="https://images.unsplash.com/photo-1509395176047-4a66953fd231?auto=format&fit=crop&w=400&q=80"
              alt="LED de Cultivo Quantum Board" class="w-14 h-14 object-cover rounded bg-gray-100" />
            <div class="ml-4">
              <h5 class="font-sm text-gray-800">Quantum Board 240W</h5>
              <p class="text-sm text-gray-500">REF-QB240W</p>
            </div>
          </div>
        </div>
      </div>

<div class="space-y-4">
        <div class="bg-white p-4 rounded-lg shadow relative select-none" style="overflow: hidden;">
          <img src="https://growithjane.com/wp-content/uploads/2023/01/mars-hydro-sp-3000-samsung-lm301b-commercial-led-grow-light-for-indoor-plants.jpg"
            alt="Mars Hydro SP 3000" class="w-full h-96 object-contain rounded-lg transition-all duration-300" draggable="false" />
        </div>
        <div class="grid grid-cols-4 gap-2">
          <img src="https://growithjane.com/wp-content/uploads/2023/01/mars-hydro-sp-3000-samsung-lm301b-commercial-led-grow-light-for-indoor-plants.jpg"
            alt="Miniatura 1" class="w-full h-20 object-contain rounded cursor-pointer border-2 border-blue-500" />

<div class="space-y-6">
        <h2 class="text-xl font-semibold text-gray-800">Detalles del Producto</h2>
        <div class="bg-white rounded-lg shadow p-4">
          <dl class="divide-y divide-gray-200">
            <div class="flex justify-between py-2">
              <dt class="text-gray-600">Referencia</dt>
              <dd class="font-medium text-gray-800">REF-SP3000</dd>
            </div>
            <div class="flex justify-between py-2">
              <dt class="text-gray-600">Consumo</dt>
              <dd class="font-medium text-gray-800">300W</dd>
            </div>
            <div class="flex justify-between py-2">
              <dt class="text-gray-600">Eficiencia</dt>
              <dd class="font-medium text-gray-800">2.7 µmol/J</dd>
            </div>
            <div class="flex justify-between py-2">
              <dt class="text-gray-600">Gramos por Watt</dt>
              <dd class="font-medium text-gray-800">2.4 g/w</dd>
            </div>
            <div class="flex justify-between py-2">
              <dt class="text-gray-600">Dimensiones</dt>
              <dd class="font-medium text-gray-800">108 x 10 x 6 cm</dd>
            </div>
            <div class="flex justify-between py-2">
              <dt class="text-gray-600">Peso</dt>
              <dd class="font-medium text-gray-800">4.5 Kg</dd>
            </div>
            <div class="flex justify-between py-2">
              <dt class="text-gray-600">Garantía</dt>
              <dd class="font-medium text-gray-800">36 Meses</dd>
            </div>
            <div class="flex justify-between py-2">
              <dt class="text-gray-600">Certificaciones</dt>
              <dd class="font-medium text-gray-800">CE, RoHS, ETL</dd>
            </div>
            <div class="flex justify-between py-2">
              <dt class="text-gray-600">Diodos</dt>
              <dd class="font-medium text-gray-800">Samsung LM301B</dd>
            </div>
          </dl>
        </div>
      </div>
    </div>

<h3 class="font-medium text-gray-800 mb-4 mt-8">Technical Charts</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-gray-50 border rounded-lg shadow flex flex-col items-center p-4">
        <img
          src="https://growithjane.com/wp-content/uploads/2023/01/mars-hydro-sp-3000-samsung-lm301b-commercial-led-grow-light-for-indoor-plants-ppfd-map.jpg"
          alt="PPFD Matrix" class="w-full h-32 object-cover rounded mb-2" />
        <p class="text-xs text-gray-700 text-center font-semibold">Matriz PPFD</p>
      </div>
      <div class="bg-gray-50 border rounded-lg shadow flex flex-col items-center p-4">
        <img
          src="https://spcdn.shortpixel.ai/spio/ret_img,q_cdnize,to_webp,s_webp/fluence-led.com/wp-content/uploads/2025/05/FLU-SpectraCurves_350-800nm_VYPR4_Page_1-scaled-1.webp"
          alt="Spectrum Analysis" class="w-full h-32 object-cover rounded mb-2" />
        <p class="text-xs text-gray-700 text-center font-semibold">Análisis de Espectro</p>
      </div>
    </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
      <div class="border rounded-lg p-4 bg-white shadow">
        <h2 class="text-xl font-semibold mb-4">Resumen de Producto</h2>
        <div>
          <p>La <b>Mars Hydro SP 3000</b> es una lámpara LED de alta eficiencia para cultivo indoor, equipada con diodos Samsung LM301B. Ideal para áreas de 1x1m hasta 1.2x1.2m, maximiza el crecimiento y producción con bajo consumo energético.</p>
        </div>
      </div>
      <div class="border rounded-lg p-4 bg-white shadow">
        <h2 class="text-xl font-semibold mb-4">Descripción Detallada</h2>
        <div>
          <p>Este panel LED está diseñado para proporcionar un espectro completo optimizado, favoreciendo tanto el crecimiento como la floración de plantas exigentes. Incluye driver regulable, disipador de calor pasivo, protección contra humedad, y certificaciones internacionales. Perfecta para cultivadores profesionales y amateurs.</p>
        </div>
      </div>
    </div>
    <br>
    
    <div class="flex items-center space-x-4 mt-6">
      <div class="flex items-center space-x-2">
        <button class="bg-gray-200 px-2 py-1 rounded hover:bg-gray-300 focus:outline-none">-</button>
        <input value="1" type="number" min="1" class="w-14 text-center border rounded focus:outline-none" readonly />
        <button class="bg-gray-200 px-2 py-1 rounded hover:bg-gray-300 focus:outline-none">+</button>
      </div>
      <button class="bg-[#033c57] text-white p-3 rounded-full flex items-center justify-center shadow-lg"
        style="width: 50px; height: 50px;">
        <img src="https://cdn-icons-png.flaticon.com/512/263/263142.png" alt="Carrito" class="w-6 h-6">
      </button>
    </div>
  </div>
</div>

Related Examples

Product Page
Showcase for the product.

Author:
Prem..

2 years ago

30.3k
Product card for eCommerce website

Author:
Steven Kuhn

2 years ago

12.1k
Product card
sleek and modern product card

Author:
OmKar Mehta

1 year ago

5.6k
Product details page
Beautiful product detail page with -multiple images -color options -quantity selection -buy now and add to wishlist buttons

Author:
Dika Rahman

1 year ago

10.9k
Product Page
Showcase for the product.

Author:
muhamadrofii911

11 months ago

2k
E-commerce product card withTailwind CSS

Author:
Quentin Rivers

9 months ago

1.8k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

5 months ago

1.3k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

5 months ago

1.2k
E-commerce Website UI Design
Here is a well-structured UI Design for a general e-commerce website template. This can be used as a reference for designers and developers to build or evaluate the UI components needed for an e-commerce site. View https://github.com/Rathanak-Phan/general-e-commerce-website-template

Author:
Rathanak Phan

1 month ago

653
Product Card for eCommerce
Here is a Product Card with discount badge, price with discount and price normally. On other hand, buttons for up or down quantity and add to cart button. This is create for Grid Columns, wich can 4 or 5 depend for desktop

Author:
Andrés Abarzúa

3 weeks ago

177
Responsive products grid
Responsive product card grid using tailwind CSS.

Author:
Arya

2 years ago

42.6k
Food Order Card
Ecommerce/Food order card layout

Author:
Rajesh Maheshwari

5 months ago

475

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components