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

207

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..

3 years ago

31.4k
Product card for eCommerce website

Author:
Steven Kuhn

3 years ago

12.3k
Product card
sleek and modern product card

Author:
OmKar Mehta

1 year ago

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

11.9k
Product Page
Showcase for the product.

Author:
muhamadrofii911

1 year ago

2.2k
E-commerce product card withTailwind CSS

Author:
Quentin Rivers

1 year ago

2k
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

8 months ago

1.5k
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

8 months ago

1.4k
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

4 months ago

1.2k
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 months ago

515
Amazing E-commerce card
An amazing e-commerce card with stunning hover effect

Author:
Robert Chunga

10 months ago

2.2k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

5 months ago

660

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components