Composants Composants multimédias Bauhaus_E-commerce_Media_Component

Bauhaus_E-commerce_Media_Component

Un composant multimédia de commerce électronique réactif et fonctionnel avec un design monochrome inspiré du Bauhaus, une prise en charge du mode sombre, mettant l’accent sur les formes géométriques et une hiérarchie visuelle claire pour la présentation des produits.

Aperçu

HTML Code

<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 bg-white dark:bg-gray-800 shadow-lg rounded-none overflow-hidden">

    <!-- Product Image Section -->
    <div class="relative col-span-1 md:col-span-2 lg:col-span-1 border-b-2 md:border-r-2 lg:border-r-2 md:border-b-0 border-gray-200 dark:border-gray-700 p-4 sm:p-6 grid place-items-center">
      <img src="https://picsum.photos/id/1018/800/600" alt="Modern Product Image" class="w-full h-auto object-cover max-h-96 md:max-h-full aspect-square" loading="lazy">
      <div class="absolute top-0 left-0 bg-yellow-400 dark:bg-yellow-600 text-gray-900 dark:text-white px-3 py-1 text-xs font-semibold uppercase tracking-wider -rotate-45 -translate-x-6 translate-y-6 pt-4 pr-4">
        New
      </div>
    </div>

    <!-- Product Details Section -->
    <div class="p-4 sm:p-6 lg:p-8 flex flex-col justify-between col-span-1">
      <div>
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-2 sm:mb-4 leading-tight">
          Geometric Lamp
        </h2>
        <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 mb-4 sm:mb-6 leading-relaxed">
          A fusion of form and function. This lamp embodies the Bauhaus principle of design simplicity and utility.
        </p>
        <div class="flex items-baseline mb-4 sm:mb-6">
          <span class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mr-2">$199.99</span>
          <span class="text-lg sm:text-xl text-gray-500 dark:text-gray-400 line-through">$249.99</span>
        </div>
        <div class="mb-4 sm:mb-6">
          <h3 class="text-sm uppercase tracking-wide font-semibold text-gray-700 dark:text-gray-300 mb-2">Color</h3>
          <div class="flex space-x-2">
            <button aria-label="Select black color" class="w-8 h-8 rounded-full bg-gray-900 dark:bg-gray-100 ring-2 ring-transparent hover:ring-gray-400 dark:hover:ring-gray-600 focus:ring-gray-400 focus:outline-none transition-colors duration-200"></button>
            <button aria-label="Select white color" class="w-8 h-8 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 ring-2 ring-gray-900 dark:ring-white focus:ring-gray-900 focus:outline-none transition-colors duration-200"></button>
            <button aria-label="Select gray color" class="w-8 h-8 rounded-full bg-gray-500 dark:bg-gray-500 ring-2 ring-transparent hover:ring-gray-400 dark:hover:ring-gray-600 focus:ring-gray-400 focus:outline-none transition-colors duration-200"></button>
          </div>
        </div>
      </div>

      <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
        <button class="flex-1 py-3 px-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-lg font-bold uppercase tracking-wider shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-gray-900 dark:focus:ring-gray-100 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
          Add to Cart
        </button>
        <button aria-label="Add to Wishlist" class="py-3 px-6 border-2 border-gray-900 dark:border-gray-100 text-gray-900 dark:text-gray-100 text-lg font-bold uppercase tracking-wider hover:bg-gray-900 hover:text-white dark:hover:bg-gray-100 dark:hover:text-gray-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-gray-900 dark:focus:ring-gray-100 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Additional Information / Reviews Section -->
    <div class="p-4 sm:p-6 lg:p-8 col-span-1 lg:col-span-1 border-t-2 md:border-t-0 lg:border-t-0 md:border-l-2 border-gray-200 dark:border-gray-700 flex flex-col justify-between">
      <div>
        <h3 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-3">Product Features</h3>
        <ul class="list-none space-y-2 text-gray-700 dark:text-gray-300 mb-6">
          <li class="flex items-center"><span class="text-xl font-bold mr-2 text-gray-500 dark:text-gray-400">&#9679;</span> Durable Steel Structure</li>
          <li class="flex items-center"><span class="text-xl font-bold mr-2 text-gray-500 dark:text-gray-400">&#9679;</span> Adjustable Brightness</li>
          <li class="flex items-center"><span class="text-xl font-bold mr-2 text-gray-500 dark:text-gray-400">&#9679;</span> Energy Efficient LED</li>
          <li class="flex items-center"><span class="text-xl font-bold mr-2 text-gray-500 dark:text-gray-400">&#9679;</span> Minimalist Design Aesthetic</li>
        </ul>

        <h3 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-3">Customer Reviews</h3>
        <div class="flex items-center text-gray-800 dark:text-gray-200 mb-4">
          <div class="flex text-yellow-400 dark:text-yellow-500 mr-2">
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
          </div>
          <span class="text-sm italic">(45 Reviews)</span>
        </div>

        <article class="bg-gray-50 dark:bg-gray-700 p-4 rounded-none border border-gray-200 dark:border-gray-600 mb-4">
          <div class="flex items-center mb-2">
            <img class="h-10 w-10 rounded-full object-cover mr-3 border-2 border-gray-300 dark:border-gray-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-900 dark:text-white">John Doe</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Verified Purchase</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">"Absolutely love the design! Fits perfectly with my minimalist interior. The light is soft but bright enough for reading."</p>
        </article>
      </div>
    </div>

  </div>
</div>

Composants associés

Composant Composants multimédias

Un composant multimédia réactif pour les interfaces finance/banque, avec un design épuré, des tons bleus et la prise en charge du mode sombre. Comprend une zone de contenu principale avec une image, un titre, une description et un bouton d’action, ainsi qu’une liste d’articles ou d’informations connexes.

Ouvrir

Composant Composants multimédias

Composant multimédia complexe et réactif pour la consommation de contenu de blog, stylisé en mode sombre avec une palette de couleurs monochromatiques. Il comprend une image, un titre, une description et un avatar de l’auteur.

Ouvrir

Composant Composants multimédias

Un composant multimédia d’interface utilisateur complexe en mode sombre pour la documentation/les sites wiki, avec un schéma de couleurs arc-en-ciel dégradé. Il comprend différents types de médias tels que la vidéo, l’audio et les images avec des informations détaillées et des éléments interactifs, tous réactifs et utilisant le HTML sémantique.

Ouvrir