Composants Disposition de la grille Mise en page de la grille de commerce électronique rétro/vintage

Mise en page de la grille de commerce électronique rétro/vintage

Un composant de mise en page de grille réactif, soutenu par un thème sombre, avec un design rétro/vintage et pastel, destiné à l’affichage de produits de commerce électronique. Utilise Tailwind CSS et inclut des images fictives et des avatars.

Aperçu

HTML Code

```html
<div class="bg-pastel-light dark:bg-pastel-dark p-6 md:p-12">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img src="https://picsum.photos/seed/retro1/400/300" alt="Product Image" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-bold text-retro-dark dark:text-retro-light mb-2">Retro Sunglasses</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Stylish sunglasses with a vintage feel.</p>
        <div class="flex items-center justify-between">
          <span class="text-lg font-semibold text-pastel-dark dark:text-pastel-light">$45.00</span>
          <button class="bg-retro-accent text-white dark:bg-retro-accent-dark dark:text-black px-4 py-2 rounded-full text-xs font-semibold hover:bg-retro-accent-dark dark:hover:bg-retro-accent transition duration-300">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img src="https://picsum.photos/seed/retro2/400/300" alt="Product Image" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-bold text-retro-dark dark:text-retro-light mb-2">Vintage Camera</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Classic camera for capturing memories.</p>
        <div class="flex items-center justify-between">
          <span class="text-lg font-semibold text-pastel-dark dark:text-pastel-light">$120.00</span>
          <button class="bg-retro-accent text-white dark:bg-retro-accent-dark dark:text-black px-4 py-2 rounded-full text-xs font-semibold hover:bg-retro-accent-dark dark:hover:bg-retro-accent transition duration-300">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img src="https://picsum.photos/seed/retro3/400/300" alt="Product Image" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-bold text-retro-dark dark:text-retro-light mb-2">Retro Watch</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">A timepiece with timeless style.</p>
        <div class="flex items-center justify-between">
          <span class="text-lg font-semibold text-pastel-dark dark:text-pastel-light">$80.00</span>
          <button class="bg-retro-accent text-white dark:bg-retro-accent-dark dark:text-black px-4 py-2 rounded-full text-xs font-semibold hover:bg-retro-accent-dark dark:hover:bg-retro-accent transition duration-300">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img src="https://picsum.photos/seed/retro4/400/300" alt="Product Image" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-bold text-retro-dark dark:text-retro-light mb-2">Vintage Radio</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Listen to your favorite tunes in style.</p>
        <div class="flex items-center justify-between">
          <span class="text-lg font-semibold text-pastel-dark dark:text-pastel-light">$60.00</span>
          <button class="bg-retro-accent text-white dark:bg-retro-accent-dark dark:text-black px-4 py-2 rounded-full text-xs font-semibold hover:bg-retro-accent-dark dark:hover:bg-retro-accent transition duration-300">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product Card 5 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img src="https://picsum.photos/seed/retro5/400/300" alt="Product Image" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-bold text-retro-dark dark:text-retro-light mb-2">Retro Skateboard</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Ride in style with this vintage board.</p>
        <div class="flex items-center justify-between">
          <span class="text-lg font-semibold text-pastel-dark dark:text-pastel-light">$75.00</span>
          <button class="bg-retro-accent text-white dark:bg-retro-accent-dark dark:text-black px-4 py-2 rounded-full text-xs font-semibold hover:bg-retro-accent-dark dark:hover:bg-retro-accent transition duration-300">Add to Cart</button>
        </div>
      </div>
    </div>

    <!-- Product Card 6 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img src="https://picsum.photos/seed/retro6/400/300" alt="Product Image" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-bold text-retro-dark dark:text-retro-light mb-2">Vintage Headphones</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Experience music with a retro vibe.</p>
        <div class="flex items-center justify-between">
          <span class="text-lg font-semibold text-pastel-dark dark:text-pastel-light">$55.00</span>
          <button class="bg-retro-accent text-white dark:bg-retro-accent-dark dark:text-black px-4 py-2 rounded-full text-xs font-semibold hover:bg-retro-accent-dark dark:hover:bg-retro-accent transition duration-300">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Add custom pastel and retro colors in your Tailwind config */
  /* For example: */
  /* theme: { extend: { colors: { pastel: { light: '#f3e7e9', dark: '#e8d7d4' }, retro: { dark: '#3a3a52', light: '#f5f5dc', accent: '#ff6b6b', 'accent-dark': '#c93b3b' } } } } */
</style>
```

Composants associés

Composant de mise en page de grille cyberpunk

Un composant de mise en page de grille simple et réactif avec une esthétique cyberpunk, adapté aux sites Web d’événements ou de conférences. Présente des arrière-plans sombres, des accents de néon lumineux et une palette de couleurs triadiques. Inclut la prise en charge du mode sombre.

Ouvrir

Disposition de la grille de conception matérielle

Composant de mise en page de grille réactif avec le style Material Design, y compris les effets d’ombre et la prise en charge du mode sombre.

Ouvrir

Composant de mise en page de grille

Un composant de mise en page de grille minimaliste avec un design simple et épuré avec des effets réactifs et la prise en charge du thème sombre. Utilise des images de substitution et des avatars de picsum.photos et randomuser.me.

Ouvrir