Composants de mise en page

Composant de mise en page du commerce électronique

Un composant de mise en page e-commerce simple et réactif avec une esthétique Material Design en niveaux de gris, avec une grille de produits, un en-tête et un pied de page, le tout avec prise en charge du mode sombre. Utilise picsum.photos pour les images de produits.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col">
  <!-- Header -->
  <header class="bg-white dark:bg-gray-800 shadow">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-white">E-Commerce Store</h1>
      <nav class="hidden md:block">
        <ul class="flex space-x-4">
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Products</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
        </ul>
      </nav>
      <div class="md:hidden">
        <button class="text-gray-600 dark:text-gray-300 focus:outline-none">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
        </button>
      </div>
    </div>
  </header>

  <!-- Main Content -->
  <main class="container mx-auto px-4 py-8 flex-grow">
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">$49.99</p>
          <button class="mt-4 bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">$29.99</p>
          <button class="mt-4 bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 3</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">$79.99</p>
          <button class="mt-4 bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 4</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">$19.99</p>
          <button class="mt-4 bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
        </div>
      </div>
    </div>
  </main>

  <!-- Footer -->
  <footer class="bg-white dark:bg-gray-800 shadow mt-8">
    <div class="container mx-auto px-4 py-4 text-center text-gray-600 dark:text-gray-300">
      &copy; 2023 E-Commerce Store. All rights reserved.
    </div>
  </footer>
</div>

RetroBusinessLayout

Un composant de mise en page à thème rétro/vintage pour les sites Web d’entreprise, avec une palette de couleurs en niveaux de gris et un design simple. Il est réactif et inclut la prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center font-mono text-gray-800 dark:text-gray-200 p-4">

  <!-- Header -->
  <header class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-8 flex justify-between items-center transform transition duration-300 hover:scale-105">
    <h1 class="text-3xl font-bold uppercase tracking-wider">Acme Corp</h1>
    <nav>
      <ul class="flex space-x-6">
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">About</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Services</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main Content -->
  <main class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 transform transition duration-300 hover:scale-105">
    <section class="text-center mb-10">
      <h2 class="text-4xl font-bold mb-4 uppercase">Welcome to the Future Past</h2>
      <p class="text-lg leading-relaxed">Crafting innovative solutions with a nod to the timeless aesthetics of yesteryear. We bring your business visions to life with robust technology and classic design principles.</p>
    </section>

    <section class="grid md:grid-cols-2 gap-8">
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner transform transition duration-300 hover:translate-y-[-5px]">
        <h3 class="text-2xl font-semibold mb-3">Our Mission</h3>
        <p class="text-gray-700 dark:text-gray-300">To fuse nostalgic design sensibilities with modern technological advancements, delivering unparalleled digital experiences that stand the test of time.</p>
      </div>
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner transform transition duration-300 hover:translate-y-[-5px]">
        <h3 class="text-2xl font-semibold mb-3">What We Offer</h3>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300">
          <li>Web Development (Retro & Modern)</li>
          <li>Digital Marketing Strategies</li>
          <li>Brand Identity & Design</li>
          <li>IT Consulting & Solutions</li>
        </ul>
      </div>
    </section>
  </main>

  <!-- Footer -->
  <footer class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mt-8 text-center text-gray-600 dark:text-gray-300 transform transition duration-300 hover:scale-105">
    <p>&copy; 2023 Acme Corp. All rights reserved. Embracing the past, building the future.</p>
  </footer>

</div>

Composant de mise en page des médias sociaux

Un composant de mise en page de médias sociaux réactif et complexe inspiré de la 3D avec des couleurs vives et une prise en charge du thème sombre à l’aide de Tailwind CSS. Il comprend un en-tête avec un logo et une navigation, une zone de contenu principale avec des cartes dynamiques pour les messages et une barre latérale pour les profils d’utilisateurs et les sujets tendance. Chaque élément est conçu pour donner un sentiment de profondeur et d’interaction.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gradient-to-br from-violet-200 via-pink-200 to-indigo-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 p-4 font-sans">

  <!-- Header -->
  <header class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-5 mb-6 flex items-center justify-between transform transition duration-500 hover:scale-105 z-10 relative" style="transform-style: preserve-3d; transition: transform 0.3s ease-out;">
    <div class="flex items-center space-x-4">
      <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center text-white text-2xl font-bold perspective-1000" style="transform: translateZ(20px);">
        <span style="transform: rotateY(20deg) rotateX(10deg);">S</span>
      </div>
      <h1 class="text-3xl font-extrabold text-gray-800 dark:text-white tracking-tight perspective-1000" style="transform: translateZ(10px);">SocialSphere</h1>
    </div>
    <nav class="space-x-6">
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-pink-400 text-lg font-semibold relative overflow-hidden group perspective-1000">
        Home
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-purple-500 dark:bg-pink-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" style="transform-origin: bottom left; transform: translateZ(5px);"></span>
      </a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-pink-400 text-lg font-semibold relative overflow-hidden group perspective-1000">
        Profile
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-purple-500 dark:bg-pink-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" style="transform-origin: bottom left; transform: translateZ(5px);"></span>
      </a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-pink-400 text-lg font-semibold relative overflow-hidden group perspective-1000">
        Messages
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-purple-500 dark:bg-pink-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" style="transform-origin: bottom left; transform: translateZ(5px);"></span>
      </a>
    </nav>
  </header>

  <!-- Main Content Area -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    <!-- Main Feed -->
    <main class="lg:col-span-2 space-y-6">

      <!-- Post Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6 transform transition duration-500 hover:rotate-1 hover:scale-102 relative overflow-hidden group" style="transform-style: preserve-3d;">
        <div class="absolute inset-0 bg-gradient-to-br from-pink-500 to-orange-500 opacity-20 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-700 ease-out z-0" style="transform: translateZ(-10px);"></div>
        <div class="relative z-10">
          <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-4 border-pink-400 dark:border-purple-600 shadow-lg transform transition duration-300 hover:scale-110" style="transform: translateZ(10px);">
            <div>
              <h3 class="text-xl font-bold text-gray-800 dark:text-white" style="transform: translateZ(8px);">Alice Wonderland</h3>
              <p class="text-gray-500 dark:text-gray-400 text-sm" style="transform: translateZ(6px);">2 hours ago</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-200 mb-4 leading-relaxed" style="transform: translateZ(4px);">
            Exploring the magical forest today! The colors are absolutely breathtaking. Feeling so inspired by nature's beauty. #NatureLover #MagicForest #Inspiration
          </p>
          <img src="https://picsum.photos/seed/forest/800/400" alt="Post Image" class="rounded-2xl w-full h-64 object-cover mb-4 shadow-lg transform transition duration-300 hover:shadow-2xl" loading="lazy" style="transform: translateZ(2px);">
          <div class="flex items-center justify-between text-gray-600 dark:text-gray-300">
            <div class="flex items-center space-x-4">
              <button class="flex items-center space-x-2 hover:text-red-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
                <span>120 Likes</span>
              </button>
              <button class="flex items-center space-x-2 hover:text-blue-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M21 15v-2h-3v2c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2v-2H3v2c0 2.21 1.79 4 4 4h10c2.21 0 4-1.79 4-4zM4 11V7c0-1.1.9-2 2-2h12c1.1 0 2 .9 2 2v4H4zm-1-4c0-2.21 1.79-4 4-4h10c2.21 0 4 1.79 4 4v.5c-.71-.24-1.46-.37-2.25-.37-3.68 0-6.69 2.5-7.5 5.86V20h-1c-2.21 0-4-1.79-4-4V7zM18 10h2c0-1.66-1.34-3-3-3h-2c-1.66 0-3 1.34-3 3v2c0 1.66 1.34 3 3 3h2c1.66 0 3-1.34 3-3V10z"/></svg>
                 <span>45 Comments</span>
              </button>
            </div>
            <button class="flex items-center space-x-2 hover:text-green-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.52.48 1.2.77 1.96.77 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L7.05 11.23c-.52-.48-1.2-.77-1.96-.77-1.66 0-3 1.34-3 3s1.34 3 3 3c.76 0 1.44-.3 1.96-.77l7.05 4.11c-.05.23-.09.46-.09.7 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/></svg>
              <span>Share</span>
            </button>
          </div>
        </div>
      </div>

      <!-- Post Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6 transform transition duration-500 hover:rotate-[-1deg] hover:scale-102 relative overflow-hidden group" style="transform-style: preserve-3d;">
        <div class="absolute inset-0 bg-gradient-to-br from-green-400 to-blue-500 opacity-20 transform translate-x-full group-hover:translate-x-0 transition-transform duration-700 ease-out z-0" style="transform: translateZ(-10px);"></div>
        <div class="relative z-10">
          <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-4 border-blue-400 dark:border-green-600 shadow-lg transform transition duration-300 hover:scale-110" style="transform: translateZ(10px);">
            <div>
              <h3 class="text-xl font-bold text-gray-800 dark:text-white" style="transform: translateZ(8px);">Bob The Builder</h3>
              <p class="text-gray-500 dark:text-gray-400 text-sm" style="transform: translateZ(6px);">5 hours ago</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-200 mb-4 leading-relaxed" style="transform: translateZ(4px);">
            Just finished a new project! So proud of the team and the hard work everyone put in. Building dreams, one brick at a time. #Construction #HardWork #TeamEffort
          </p>
          <img src="https://picsum.photos/seed/building/800/400" alt="Post Image" class="rounded-2xl w-full h-64 object-cover mb-4 shadow-lg transform transition duration-300 hover:shadow-2xl" loading="lazy" style="transform: translateZ(2px);">
          <div class="flex items-center justify-between text-gray-600 dark:text-gray-300">
            <div class="flex items-center space-x-4">
              <button class="flex items-center space-x-2 hover:text-red-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
                <span>210 Likes</span>
              </button>
              <button class="flex items-center space-x-2 hover:text-blue-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M21 15v-2h-3v2c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2v-2H3v2c0 2.21 1.79 4 4 4h10c2.21 0 4-1.79 4-4zM4 11V7c0-1.1.9-2 2-2h12c1.1 0 2 .9 2 2v4H4zm-1-4c0-2.21 1.79-4 4-4h10c2.21 0 4 1.79 4 4v.5c-.71-.24-1.46-.37-2.25-.37-3.68 0-6.69 2.5-7.5 5.86V20h-1c-2.21 0-4-1.79-4-4V7zM18 10h2c0-1.66-1.34-3-3-3h-2c-1.66 0-3 1.34-3 3v2c0 1.66 1.34 3 3 3h2c1.66 0 3-1.34 3-3V10z"/></svg>
                <span>88 Comments</span>
              </button>
            </div>
            <button class="flex items-center space-x-2 hover:text-green-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.52.48 1.2.77 1.96.77 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L7.05 11.23c-.52-.48-1.2-.77-1.96-.77-1.66 0-3 1.34-3 3s1.34 3 3 3c.76 0 1.44-.3 1.96-.77l7.05 4.11c-.05.23-.09.46-.09.7 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/></svg>
              <span>Share</span>
            </button>
          </div>
        </div>
      </div>

    </main>

    <!-- Sidebar -->
    <aside class="space-y-6">

      <!-- User Profile Card -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6 text-center transform transition duration-500 hover:scale-105 relative overflow-hidden group" style="transform-style: preserve-3d;">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-indigo-500 opacity-20 transform translate-y-full group-hover:translate-y-0 transition-transform duration-700 ease-out z-0" style="transform: translateZ(-10px);"></div>
        <div class="relative z-10">
          <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Profile Picture" class="w-28 h-28 rounded-full mx-auto mb-4 border-4 border-indigo-400 dark:border-purple-600 shadow-lg transform transition duration-300 hover:rotate-3 hover:scale-110" style="transform: translateZ(15px);">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2" style="transform: translateZ(10px);">John Doe</h2>
          <p class="text-gray-500 dark:text-gray-400 mb-4" style="transform: translateZ(8px);">@johndoe_official</p>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6" style="transform: translateZ(6px);">
            Passionate digital creator, exploring new horizons and sharing my journey. Love to connect and collaborate!
          </p>
          <div class="flex justify-around items-center text-gray-600 dark:text-gray-300" style="transform: translateZ(4px);">
            <div>
              <span class="block text-xl font-bold text-purple-600 dark:text-pink-400">1.2K</span>
              <span class="block text-sm">Followers</span>
            </div>
            <div>
              <span class="block text-xl font-bold text-purple-600 dark:text-pink-400">750</span>
              <span class="block text-sm">Following</span>
            </div>
            <div>
              <span class="block text-xl font-bold text-purple-600 dark:text-pink-400">500</span>
              <span class="block text-sm">Posts</span>
            </div>
          </div>
          <button class="mt-6 bg-gradient-to-br from-purple-500 to-pink-500 text-white font-bold py-3 px-8 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 active:translate-y-0 relative z-20" style="transform: translateZ(12px);">
            Edit Profile
          </button>
        </div>
      </div>

      <!-- Trending Topics Card -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6 relative overflow-hidden group" style="transform-style: preserve-3d;">
        <div class="absolute inset-0 bg-gradient-to-br from-orange-400 to-red-500 opacity-20 transform -translate-y-full group-hover:translate-y-0 transition-transform duration-700 ease-out z-0" style="transform: translateZ(-10px);"></div>
        <div class="relative z-10">
          <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4" style="transform: translateZ(10px);">🔥 Trending Topics</h3>
          <ul class="space-y-3">
            <li class="flex justify-between items-center bg-gray-100 dark:bg-gray-700 p-3 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-102" style="transform: translateZ(6px);">
              <span class="text-gray-700 dark:text-gray-200 font-medium">#AIRevolution</span>
              <span class="text-sm text-gray-500 dark:text-gray-400">150K Posts</span>
            </li>
            <li class="flex justify-between items-center bg-gray-100 dark:bg-gray-700 p-3 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-102" style="transform: translateZ(6px);">
              <span class="text-gray-700 dark:text-gray-200 font-medium">#FutureTech</span>
              <span class="text-sm text-gray-500 dark:text-gray-400">90K Posts</span>
            </li>
            <li class="flex justify-between items-center bg-gray-100 dark:bg-gray-700 p-3 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-102" style="transform: translateZ(6px);">
              <span class="text-gray-700 dark:text-gray-200 font-medium">#CreativeMinds</span>
              <span class="text-sm text-gray-500 dark:text-gray-400">70K Posts</span>
            </li>
            <li class="flex justify-between items-center bg-gray-100 dark:bg-gray-700 p-3 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-102" style="transform: translateZ(6px);">
              <span class="text-gray-700 dark:text-gray-200 font-medium">#WebDesignTrends</span>
              <span class="text-sm text-gray-500 dark:text-gray-400">55K Posts</span>
            </li>
          </ul>
        </div>
      </div>

    </aside>
  </div>

</div>

Composant de mise en page du tableau de bord

Une mise en page de tableau de bord réactive avec l’esthétique de Material Design, y compris une barre latérale, un en-tête et une zone de contenu principal. Il prend en charge le mode sombre et utilise des couleurs complémentaires pour un look équilibré. La complexité est modérée avec des fonctionnalités de type interactif réalisées uniquement avec des classes CSS et Tailwind.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col md:flex-row">

    <!-- Sidebar -->
    <div class="w-full md:w-64 bg-white dark:bg-gray-800 shadow-lg md:shadow-none p-4 space-y-4 flex flex-col items-center md:items-start">
        <div class="text-2xl font-bold text-indigo-600 dark:text-orange-400">Dashboard</div>
        <nav class="space-y-2 w-full">
            <a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-home"></i><span>Home</span></a>
            <a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-chart-line"></i><span>Analytics</span></a>
            <a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-cog"></i><span>Settings</span></a>
        </nav>
    </div>

    <!-- Main Content Area -->
    <div class="flex-1 flex flex-col">

        <!-- Header -->
        <header class="w-full bg-white dark:bg-gray-800 shadow-md p-4 flex justify-between items-center">
            <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Overview</h1>
            <div class="flex items-center space-x-4">
                <button class="text-gray-600 dark:text-gray-300 focus:outline-none"><i class="fas fa-bell"></i></button>
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-indigo-500 dark:border-orange-400">
            </div>
        </header>

        <!-- Content Grid -->
        <main class="flex-1 p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

            <!-- Card 1 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col justify-between transform transition duration-300 hover:scale-105">
                <div>
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Total Sales</h2>
                    <p class="text-3xl font-bold text-indigo-600 dark:text-orange-400 mt-2">$12,345</p>
                </div>
                <p class="text-sm text-gray-500 dark:text-gray-400">+5% from last month</p>
            </div>

            <!-- Card 2 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col justify-between transform transition duration-300 hover:scale-105">
                <div>
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">New Users</h2>
                    <p class="text-3xl font-bold text-indigo-600 dark:text-orange-400 mt-2">2,145</p>
                </div>
                <p class="text-sm text-gray-500 dark:text-gray-400">+12% from last week</p>
            </div>

            <!-- Card 3 (Image Card) -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 flex flex-col transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/400/200?random=1" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Data Visualization</h2>
                <p class="text-sm text-gray-600 dark:text-gray-300 mt-2 flex-grow">A quick look at the latest data trends and insights.</p>
                <button class="mt-4 self-end px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-300">View Details</button>
            </div>

            <!-- Card 4 (Chart Placeholder) -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 col-span-1 md:col-span-2 transform transition duration-300 hover:scale-105">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Sales Performance</h2>
                <div class="mt-4 h-48 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
                    <p class="text-gray-500 dark:text-gray-400">Chart Placeholder</p>
                </div>
            </div>

        </main>
    </div>

</div>

<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Composant Composants de mise en page

Composant de mise en page de tableau de bord réactif avec un thème sombre, doté d’une barre latérale et d’une zone de contenu principale. Il utilise une palette de couleurs triadique pour un attrait visuel.

Ouvrir l’aperçu

                <div class="min-h-screen flex flex-col bg-gray-900 text-gray-200">
  <!-- Header -->
  <header class="flex items-center justify-between p-4 bg-gray-800 shadow-md">
    <h1 class="text-2xl font-bold text-cyan-400">Dashboard</h1>
    <nav>
      <ul class="flex space-x-4">
        <li><a href="#" class="text-orange-400 hover:text-orange-300">Home</a></li>
        <li><a href="#" class="text-orange-400 hover:text-orange-300">Settings</a></li>
        <li><a href="#" class="text-orange-400 hover:text-orange-300">Profile</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main Content Area -->
  <div class="flex flex-1 flex-col md:flex-row">
    <!-- Sidebar -->
    <aside class="w-full md:w-64 bg-gray-800 p-4 shadow-lg">
      <nav>
        <ul class="space-y-4">
          <li><a href="#" class="block text-lime-400 hover:text-lime-300">Overview</a></li>
          <li><a href="#" class="block text-lime-400 hover:text-lime-300">Analytics</a></li>
          <li><a href="#" class="block text-lime-400 hover:text-lime-300">Reports</a></li>
          <li><a href="#" class="block text-lime-400 hover:text-lime-300">Users</a></li>
        </ul>
      </nav>
    </aside>

    <!-- Content -->
    <main class="flex-1 p-6">
      <h2 class="text-3xl font-semibold mb-6 text-cyan-400">Welcome to your Dashboard</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Card 1 -->
        <div class="bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
          <h3 class="text-xl font-bold mb-2 text-orange-400">Total Sales</h3>
          <p class="text-3xl font-bold text-gray-100">$12,345</p>
        </div>
        <!-- Card 2 -->
        <div class="bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
          <h3 class="text-xl font-bold mb-2 text-lime-400">New Customers</h3>
          <p class="text-3xl font-bold text-gray-100">256</p>
        </div>
        <!-- Card 3 -->
        <div class="bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
          <h3 class="text-xl font-bold mb-2 text-cyan-400">Page Views</h3>
          <p class="text-3xl font-bold text-gray-100">8,765</p>
        </div>
      </div>

      <!-- Example Data Table -->
      <div class="mt-8 bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
        <h3 class="text-xl font-bold mb-4 text-cyan-400">Recent Orders</h3>
        <div class="overflow-x-auto">
          <table class="min-w-full leading-normal">
            <thead>
              <tr>
                <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Order ID</th>
                <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Product</th>
                <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Amount</th>
                <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Status</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">#1001</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-lime-400">Laptop Pro</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">$999</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-green-400">Completed</td>
              </tr>
              <tr>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">#1002</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-orange-400">Mechanical Keyboard</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">$120</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-amber-400">Pending</td>
              </tr>
              <tr>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">#1003</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-cyan-400">Wireless Mouse</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">$50</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-green-400">Completed</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </main>
  </div>
</div>

Mise en page e-commerce avec conception 3D

Une mise en page de composant Web réactive pour le commerce électronique avec des éléments de conception 3D, incorporant une palette de couleurs complémentaires et la prise en charge du thème sombre. Il comporte des fiches de produits, une barre de navigation et un pied de page, le tout stylisé avec Tailwind CSS.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
  <nav class="flex justify-between items-center py-4">
    <div class="text-2xl font-bold text-gray-900 dark:text-white">ShopLogo</div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-800 dark:text-gray-300 hover:text-blue-500">Home</a></li>
      <li><a href="#" class="text-gray-800 dark:text-gray-300 hover:text-blue-500">Products</a></li>
      <li><a href="#" class="text-gray-800 dark:text-gray-300 hover:text-blue-500">Contact</a></li>
      <li><a href="#" class="text-gray-800 dark:text-gray-300 hover:text-blue-500">Cart</a></li>
    </ul>
  </nav>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-200">
      <img src="https://picsum.photos/200/200?random=1" alt="Product 1" class="rounded-t-lg w-full">
      <div class="p-4">
        <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product 1</h2>
        <p class="text-gray-700 dark:text-gray-300">$19.99</p>
        <button class="mt-2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">Add to Cart</button>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-200">
      <img src="https://picsum.photos/200/200?random=2" alt="Product 2" class="rounded-t-lg w-full">
      <div class="p-4">
        <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product 2</h2>
        <p class="text-gray-700 dark:text-gray-300">$29.99</p>
        <button class="mt-2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">Add to Cart</button>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-200">
      <img src="https://picsum.photos/200/200?random=3" alt="Product 3" class="rounded-t-lg w-full">
      <div class="p-4">
        <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product 3</h2>
        <p class="text-gray-700 dark:text-gray-300">$39.99</p>
        <button class="mt-2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">Add to Cart</button>
      </div>
    </div>
  </div>
  <footer class="mt-6 p-4 bg-gray-200 dark:bg-gray-600 rounded-lg text-center text-gray-800 dark:text-gray-300">
    <p>© 2023 E-commerce Store. All rights reserved.</p>
  </footer>
</div>

Composant de mise en page 3D

Un composant de mise en page de médias sociaux réactif 3D Design avec une palette de couleurs en niveaux de gris. Convient aux interfaces de réseaux sociaux.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 mb-6 transform hover:scale-105 transition-transform duration-300">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md border-2 border-gray-300 dark:border-gray-700">
        <h2 class="text-gray-800 dark:text-white text-lg font-semibold ml-4">User Name</h2>
    </div>
    <div class="mb-4">
        <img src="https://picsum.photos/400/200" alt="Post Image" class="rounded-lg shadow-md">  
    </div>
    <div class="text-gray-600 dark:text-gray-300">
        <p class="mb-2">This is a simple social media post showcasing a 3D design layout. Engage with your network in style!</p>
    </div>
    <div class="mt-4 flex space-x-4">
        <button class="bg-gray-800 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-gray-600">Like</button>
        <button class="bg-gray-800 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-gray-600">Comment</button>
    </div>
</div>

Mise en page RetroBlog

Une mise en page de blog simple et réactive avec une esthétique rétro/vintage, la prise en charge du mode sombre et une palette de couleurs complémentaire, construite avec Tailwind CSS.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-200 font-sans text-gray-800 dark:bg-gray-900 dark:text-gray-200">
  <header class="bg-blue-600 py-4 shadow-md dark:bg-blue-800">
    <div class="container mx-auto px-4">
      <h1 class="text-center text-3xl font-bold text-white">RetroBlog</h1>
    </div>
  </header>

  <main class="container mx-auto p-4">
    <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
      <!-- Main Content Area -->
      <section class="md:col-span-2">
        <article class="mb-6 rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
          <h2 class="mb-2 text-2xl font-bold text-gray-900 dark:text-gray-100">Blog Post Title</h2>
          <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">Published on October 27, 2023</p>
          <img src="https://picsum.photos/seed/retro1/800/400" alt="Blog Post Image" class="mb-4 w-full rounded-md">
          <p class="text-gray-700 dark:text-gray-300">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </article>

        <article class="mb-6 rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
          <h2 class="mb-2 text-2xl font-bold text-gray-900 dark:text-gray-100">Another Blog Post</h2>
          <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">Published on October 26, 2023</p>
          <img src="https://picsum.photos/seed/retro2/800/400" alt="Blog Post Image" class="mb-4 w-full rounded-md">
          <p class="text-gray-700 dark:text-gray-300">
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </article>
      </section>

      <!-- Sidebar -->
      <aside>
        <div class="rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
          <h3 class="mb-4 text-lg font-bold text-gray-900 dark:text-gray-100">About</h3>
          <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar" class="mb-4 w-16 h-16 rounded-full mx-auto">
          <p class="text-gray-700 text-center dark:text-gray-300">A passionate writer sharing thoughts and ideas on various topics.</p>
        </div>

        <div class="mt-6 rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
          <h3 class="mb-4 text-lg font-bold text-gray-900 dark:text-gray-100">Categories</h3>
          <ul>
            <li class="mb-2"><a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Technology</a></li>
            <li class="mb-2"><a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Lifestyle</a></li>
            <li><a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Travel</a></li>
          </ul>
        </div>
      </aside>
    </div>
  </main>

  <footer class="bg-gray-700 py-4 text-center text-white dark:bg-gray-900">
    <p>&copy; 2023 RetroBlog. All rights reserved.</p>
  </footer>
</div>

Composant de mise en page de blog minimaliste

Composant de mise en page de blog minimaliste avec schéma de couleurs monochromatiques pour la consommation de contenu, réactif et avec prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="container mx-auto px-4 py-8 dark:bg-gray-900 dark:text-gray-200">
  <header class="text-center mb-12">
    <h1 class="text-4xl font-bold text-gray-800 dark:text-white">Blog Title</h1>
    <p class="text-gray-600 dark:text-gray-400">A space for thoughts and stories</p>
  </header>

  <main class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <div class="md:col-span-2">
      <article class="bg-white p-6 rounded-lg shadow-md mb-8 dark:bg-gray-800">
        <img src="https://picsum.photos/seed/article1/800/400" alt="Article Image" class="rounded-md mb-4">
        <h2 class="text-2xl font-semibold text-gray-800 mb-2 dark:text-white">First Article Title</h2>
        <p class="text-gray-700 leading-relaxed dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <button class="mt-4 text-blue-500 hover:underline dark:text-blue-400">Read More</button>
      </article>

      <article class="bg-white p-6 rounded-lg shadow-md mb-8 dark:bg-gray-800">
        <img src="https://picsum.photos/seed/article2/800/400" alt="Article Image" class="rounded-md mb-4">
        <h2 class="text-2xl font-semibold text-gray-800 mb-2 dark:text-white">Second Article Title</h2>
        <p class="text-gray-700 leading-relaxed dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <button class="mt-4 text-blue-500 hover:underline dark:text-blue-400">Read More</button>
      </article>
    </div>

    <div>
      <section class="bg-white p-6 rounded-lg shadow-md mb-8 dark:bg-gray-800">
        <h3 class="text-xl font-semibold text-gray-800 mb-4 dark:text-white">Recent Posts</h3>
        <ul>
          <li class="mb-2"><a href="#" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100">Recent Post 1</a></li>
          <li class="mb-2"><a href="#" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100">Recent Post 2</a></li>
          <li class="mb-2"><a href="#" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100">Recent Post 3</a></li>
        </ul>
      </section>

      <section class="bg-white p-6 rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="text-xl font-semibold text-gray-800 mb-4 dark:text-white">About Me</h3>
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="rounded-full w-12 h-12 mr-4">
          <p class="text-gray-700 dark:text-gray-300">A short bio about the author of this blog.</p>
        </div>
      </section>
    </div>
  </main>

  <footer class="text-center mt-12 text-gray-600 dark:text-gray-400">
    <p>&copy; 2023 Blog Title. All rights reserved.</p>
  </footer>
</div>

Composant de mise en page 3D

Une mise en page de conception 3D simple, réactive et attrayante pour les sites Web d’entreprise/d’entreprise utilisant des couleurs vives, avec prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden md:flex md:flex-row">
    <div class="md:w-1/2 p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Welcome to Our Company</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">We provide innovative solutions to enhance your business.</p>
        <a href="#" class="bg-indigo-600 text-white rounded-lg px-4 py-2 hover:bg-indigo-700 transition duration-300 shadow-md transform hover:scale-105">Learn More</a>
    </div>
    <div class="md:w-1/2">
        <img src="https://picsum.photos/500/300" alt="Business Image" class="rounded-lg shadow-md w-full h-full object-cover" />
    </div>
</div>

<div class="flex justify-center mt-6">
    <div class="text-center bg-gray-100 dark:bg-gray-900 rounded-lg p-4 shadow-md">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Our Team</h3>
        <div class="flex items-center justify-center space-x-4 mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1" class="rounded-full w-16 h-16 shadow-lg" />
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar 2" class="rounded-full w-16 h-16 shadow-lg" />
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar 3" class="rounded-full w-16 h-16 shadow-lg" />
        </div>
        <p class="text-gray-600 dark:text-gray-400 mt-2">Meet our dedicated team of professionals.</p>
    </div>
</div>

Catégories