Componentes de diseño

Componente de diseño de comercio electrónico

Un componente de diseño de comercio electrónico simple y receptivo con una estética de diseño de materiales en escala de grises, con una cuadrícula de productos, un encabezado y un pie de página, todos con soporte para modo oscuro. Utiliza picsum.photos para las imágenes de productos.

Abrir vista previa

                <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 componente de diseño de temática retro/vintage para sitios web empresariales, con una combinación de colores en escala de grises y un diseño sencillo. Es responsivo e incluye soporte para modo oscuro.

Abrir vista previa

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

Componente de diseño de redes sociales

Un componente de diseño de redes sociales responsivo y complejo inspirado en 3D con colores vibrantes y soporte para temas oscuros utilizando Tailwind CSS. Incluye un encabezado con un logotipo y navegación, un área de contenido principal con tarjetas dinámicas para publicaciones y una barra lateral para perfiles de usuario y temas de tendencia. Cada elemento está diseñado para dar una sensación de profundidad e interacción.

Abrir vista previa

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

Componente de diseño de panel

Un diseño de tablero receptivo con estética de Material Design, que incluye una barra lateral, un encabezado y un área de contenido principal. Es compatible con el modo oscuro y utiliza colores complementarios para un aspecto equilibrado. La complejidad es moderada, con características similares a las interactivas logradas únicamente con las clases CSS y Tailwind.

Abrir vista previa

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

Componente Componentes de diseño

Un componente de diseño de tablero receptivo con un tema oscuro, con una barra lateral y un área de contenido principal. Utiliza un esquema de color triádico para el atractivo visual.

Abrir vista previa

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

Diseño de comercio electrónico con diseño 3D

Un diseño de componente web responsivo para comercio electrónico con elementos de diseño 3D, que incorpora un esquema de color complementario y soporte para temas oscuros. Cuenta con tarjetas de producto, una barra de navegación y un pie de página, todo ello con el estilo de Tailwind CSS.

Abrir vista previa

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

Componente de diseño 3D

Un componente de diseño de redes sociales de diseño 3D receptivo con un esquema de color en escala de grises. Adecuado para interfaces de redes sociales.

Abrir vista previa

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

Diseño de RetroBlog

Un diseño de blog simple y responsivo con una estética retro / vintage, soporte para modo oscuro y un esquema de color complementario, construido con Tailwind CSS.

Abrir vista previa

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

Componente de diseño de blog minimalista

Componente de diseño de blog minimalista con esquema de color monocromático para el consumo de contenido, responsivo y con soporte para temas oscuros.

Abrir vista previa

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

Componente de diseño 3D

Un diseño de diseño 3D simple, receptivo y atractivo para sitios web comerciales / corporativos que utiliza colores vibrantes, con soporte para temas oscuros.

Abrir vista previa

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

Categorías