Todos los componentes

Botón Volver al principio - Diseño 3D

Un botón Volver al principio con un diseño 3D, efectos responsivos y soporte de temas oscuros usando Tailwind CSS. No se incluye JavaScript.

Abrir vista previa

                <div class="fixed bottom-4 right-4 group">
  <button class="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg 
                 transform transition-transform duration-300 
                 group-hover:scale-110 group-active:scale-90 
                 dark:bg-blue-800 dark:shadow-xl dark:group-hover:scale-110 dark:group-active:scale-90 
                 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
    <svg class="h-6 w-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="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>
  </button>
</div>

Reproductor de vídeo skeuomórfico

Componente de reproductor de video skeuomórfico con efectos responsivos y soporte para temas oscuros.

Abrir vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-2xl bg-gray-300 dark:bg-gray-700 rounded-xl shadow-2xl overflow-hidden">
    <!-- Video Placeholder -->
    <div class="relative bg-black aspect-video">
      <img src="https://picsum.photos/seed/video/800/450" alt="Video Placeholder" class="w-full h-full object-cover">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50">
        <svg class="w-16 h-16 text-white opacity-75" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832L12.808 9.832a1 1 0 000-1.664L9.555 7.168z" clip-rule="evenodd"></path></svg>
      </div>
    </div>

    <!-- Controls -->
    <div class="p-4 bg-gray-400 dark:bg-gray-800 flex items-center justify-between">
      <div class="flex items-center space-x-4">
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832L12.808 9.832a1 1 0 000-1.664L9.555 7.168z" clip-rule="evenodd"></path></svg>
        </button>
        <input type="range" class="flex-grow appearance-none h-2 bg-gray-300 dark:bg-gray-600 rounded-full overflow-hidden cursor-pointer" value="0">
        <span class="text-sm text-gray-700 dark:text-gray-300">0:00 / 0:00</span>
      </div>
      <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M14.445 3.107A1 1 0 0013.598 3H6.402a1 1 0 00-.847.447L.947 11.264a1 1 0 00.003.956l4.6 6.27A1 1 0 006.402 19h7.196a1 1 0 00.847-.447l4.6-6.27a1 1 0 00-.003-.956l-4.6-7.157zM10 16a1 1 0 100-2 1 1 0 000 2zm0-4a1 1 0 100-2 1 1 0 000 2z"></path></svg>
      </button>
    </div>
  </div>
</div>

Componente de lista de deseos

Un componente de lista de deseos de diseño minimalista / plano con efectos responsivos y soporte para temas oscuros.

Abrir vista previa

                <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">My Wishlist</h2>
  <div class="space-y-4">
    <div class="flex items-center">
      <img class="w-16 h-16 object-cover rounded mr-4" src="https://picsum.photos/id/1018/100/100" alt="Product image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 1</h3>
        <p class="text-gray-600 dark:text-gray-400">$19.99</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
    <div class="flex items-center">
      <img class="w-16 h-16 object-cover rounded mr-4" src="https://picsum.photos/id/1015/100/100" alt="Product image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 2</h3>
        <p class="text-gray-600 dark:text-gray-400">$29.99</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>
</div>

Componente Componentes de visualización de contenido

Un componente de visualización de contenido con microinteracciones, diseño responsivo y compatibilidad con temas oscuros mediante Tailwind CSS. Cuenta con efectos de desplazamiento sutiles y animaciones de enfoque en elementos interactivos.

Abrir vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <div class="max-w-sm mx-auto rounded-lg shadow-lg bg-white dark:bg-gray-800 overflow-hidden">
    <img class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" src="https://picsum.photos/600/400" alt="Placeholder image">
    <div class="p-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2 transform transition duration-500 hover:text-indigo-600 dark:hover:text-indigo-400">Component Title</h2>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4 transform transition duration-500 hover:translate-x-1">This is a description of the content. It is responsive and supports dark theme.</p>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4 transform transition duration-500 hover:rotate-6" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of the author">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none transform transition duration-500 hover:underline">John Doe</p>
            <p class="text-gray-600 dark:text-gray-400">7 min read</p>
          </div>
        </div>
        <button class="px-3 py-1 bg-indigo-500 text-white text-xs font-bold rounded hover:bg-indigo-600 dark:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-opacity-50 transform transition duration-500 hover:-translate-y-1">Read More</button>
      </div>
    </div>
  </div>
</div>

Barra de progreso

Componente de barra de progreso con diseño de microinteracciones. Incluye efectos responsivos y soporte de temas oscuros usando solo HTML y CSS (Tailwind CSS).

Abrir vista previa

                <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
  <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%; animation: progress-animation 2s infinite;"></div>
</div>

<style>
@keyframes progress-animation {
  0% { width: 0%; }
  100% { width: 45%; }
}

.dark .bg-blue-600 {
  background-color: #90cdf4; /* Lighter blue for dark mode */
}

/* Responsive considerations */
@media (max-width: 768px) {
  @keyframes progress-animation {
    0% { width: 0%; }
    100% { width: 60%; } /* Wider progress on smaller screens */
  }
  .bg-blue-600 {
    animation: progress-animation 2s infinite; /* Apply animation again for clarity */
  }
}
</style>

Componente de reseñas de productos

Un componente responsivo de reseñas de productos creado con Tailwind CSS, con microinteracciones al pasar el mouse, compatibilidad con temas oscuros e imágenes de marcador de posición. No se utiliza JavaScript.

Abrir vista previa

                <div class="container mx-auto p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
    <h2 class="text-2xl sm:text-3xl font-bold text-center mb-8 text-gray-900 dark:text-white">Customer Reviews</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        <!-- Review Card -->
        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
            <div class="flex items-start mb-4">
                <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
                <div class="flex-grow">
                    <p class="font-semibold text-gray-900 dark:text-white">John Doe</p>
                    <div class="flex items-center text-yellow-500 dark:text-yellow-400">
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                    </div>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">July 15, 2023</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed">Absolutely love this product! It exceeded my expectations in every way. The build quality is superb, and it performs flawlessly. Highly recommended!</p>
        </div>

        <!-- Review Card with Product Image -->
        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
             <img class="w-full h-32 object-cover rounded-md mb-6" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
            <div class="flex items-start mb-4">
                <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/45.jpg" alt="Avatar">
                <div class="flex-grow">
                    <p class="font-semibold text-gray-900 dark:text-white">Jane Smith</p>
                    <div class="flex items-center text-yellow-500 dark:text-yellow-400">
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                    </div>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">July 10, 2023</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed">Solid product, works as advertised. The setup was easy, and the features are intuitive. Deducted one star because the documentation could be clearer on advanced settings.</p>
        </div>

        <!-- Review Card -->
        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
            <div class="flex items-start mb-4">
                <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Avatar">
                <div class="flex-grow">
                    <p class="font-semibold text-gray-900 dark:text-white">Robert Johnson</p>
                    <div class="flex items-center text-yellow-500 dark:text-yellow-400">
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                    </div>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">July 1, 2023</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed">Outstanding performance! This is exactly what I was looking for. Setup was a breeze, and it's been working perfectly since day one. Five stars!</p>
        </div>

        <!-- Review Card with Product Image -->
        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
            <img class="w-full h-32 object-cover rounded-md mb-6" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
            <div class="flex items-start mb-4">
                <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/91.jpg" alt="Avatar">
                <div class="flex-grow">
                    <p class="font-semibold text-gray-900 dark:text-white">Emily Davis</p>
                     <div class="flex items-center text-yellow-500 dark:text-yellow-400">
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                     </div>
                </div>
                 <span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">June 28, 2023</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed">It's okay, does the job. Had some minor issues during installation, and the user interface is not as intuitive as I hoped. Decent for the price point, though.</p>
        </div>

    </div>
</div>

Componente de filtros

Un componente de filtros responsivo con diseño retro / vintage, compatible con el tema oscuro con Tailwind CSS.

Abrir vista previa

                <div class="container mx-auto p-6 bg-white dark:bg-gray-800 rounded-md shadow-lg">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Filters</h2>
    <div class="flex flex-col md:flex-row md:justify-around mb-4">
        <div class="filter-item mb-4 md:mb-0">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="category">Category</label>
            <select id="category" class="form-select block w-full px-3 py-2 text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-300 border border-gray-300 rounded-md focus:ring focus:ring-indigo-200">
                <option>All</option>
                <option>Electronics</option>
                <option>Fashion</option>
                <option>Home & Garden</option>
            </select>
        </div>
        <div class="filter-item mb-4 md:mb-0">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="price">Price Range</label>
            <input type="range" id="price" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-600" min="0" max="100" value="50" />
        </div>
    </div>
    <div class="flex flex-col md:flex-row md:justify-between mb-6">
        <div class="filter-item mb-4 md:mb-0">
            <label class="inline-flex items-center text-gray-700 dark:text-gray-300">
                <input type="checkbox" class="form-checkbox text-indigo-600 h-5 w-5" />
                <span class="ml-2">In Stock</span>
            </label>
        </div>
        <div class="filter-item mb-4 md:mb-0">
            <label class="inline-flex items-center text-gray-700 dark:text-gray-300">
                <input type="checkbox" class="form-checkbox text-indigo-600 h-5 w-5" />
                <span class="ml-2">Free Shipping</span>
            </label>
        </div>
    </div>
    <div class="text-center">
        <button class="bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring focus:ring-indigo-200">Apply Filters</button>
    </div>
    <div class="mt-8">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Results</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
            <div class="result-item bg-gray-100 dark:bg-gray-700 rounded-md p-4 shadow">
                <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Item Name 1</h4>
                <img src="https://picsum.photos/200/150?random=1" alt="Item 1" class="rounded-md w-full" />
                <p class="text-gray-600 dark:text-gray-300">Description of item 1.</p>
                <div class="text-right mt-2">
                    <span class="text-gray-800 dark:text-gray-200 font-bold">$49.99</span>
                </div>
            </div>
            <div class="result-item bg-gray-100 dark:bg-gray-700 rounded-md p-4 shadow">
                <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Item Name 2</h4>
                <img src="https://picsum.photos/200/150?random=2" alt="Item 2" class="rounded-md w-full" />
                <p class="text-gray-600 dark:text-gray-300">Description of item 2.</p>
                <div class="text-right mt-2">
                    <span class="text-gray-800 dark:text-gray-200 font-bold">$29.99</span>
                </div>
            </div>
            <div class="result-item bg-gray-100 dark:bg-gray-700 rounded-md p-4 shadow">
                <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Item Name 3</h4>
                <img src="https://picsum.photos/200/150?random=3" alt="Item 3" class="rounded-md w-full" />
                <p class="text-gray-600 dark:text-gray-300">Description of item 3.</p>
                <div class="text-right mt-2">
                    <span class="text-gray-800 dark:text-gray-200 font-bold">$19.99</span>
                </div>
            </div>
        </div>
    </div>
</div>

Componente Columnas

Un componente de columnas receptivo diseñado con una estética retro / vintage, que admite temas claros y oscuros. Cuenta con imágenes de marcador de posición y avatares de picsum.photos y randomuser.me respectivamente.

Abrir vista previa

                <div class="container mx-auto px-4 py-8">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200 mb-8">Retro Columns</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Random placeholder image">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel risus vitae nisl euismod aliquam.</p>
                <div class="flex items-center mt-4">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                    <p class="ml-2 text-gray-800 dark:text-gray-200">John Doe</p>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Random placeholder image">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <div class="flex items-center mt-4">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
                    <p class="ml-2 text-gray-800 dark:text-gray-200">Jane Doe</p>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Random placeholder image">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <div class="flex items-center mt-4">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
                    <p class="ml-2 text-gray-800 dark:text-gray-200">John Smith</p>
                </div>
            </div>
        </div>
    </div>
</div>

Botones Me gusta/Reacción

Componente de botones Me gusta/Reacción con microinteracciones, capacidad de respuesta y compatibilidad con temas oscuros

Abrir vista previa

                <div class="flex items-center justify-center bg-gray-100 dark:bg-gray-800 min-h-screen">
  <div class="flex space-x-4">
    <button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200 ease-in-out transform hover:scale-110">
      <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="M14 10h4.764a2 2 0 011.808 2.808l-7.922 8.802a1.995 1.995 0 01-2.808.01z"></path>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 10h.01M7 10v7a3 3 0 003 3h.01M7 10h10.929c.795 0 1.549-.394 2-.664"></path>
      </svg>
      <span>Like</span>
    </button>
    <button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition duration-200 ease-in-out transform hover:scale-110">
      <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="M20.84 4.91a2.14 2.14 0 00-3.03 0L12 10.78l-5.81-5.87a2.14 2.14 0 00-3.03 0 2.18 2.18 0 000 3.07L12 17l8.84-8.92a2.18 2.18 0 000-3.07z"></path>
      </svg>
      <span>Love</span>
    </button>
    <button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-yellow-500 dark:hover:text-yellow-400 transition duration-200 ease-in-out transform hover:scale-110">
      <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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
      </svg>
      <span>Haha</span>
    </button>
  </div>
</div>

Componente de la galería de productos

Componente de la galería de productos basado en los principios de Material Design, con diseño responsivo y soporte para temas oscuros. Incluye imágenes de marcador de posición.

Abrir vista previa

                <div class="container mx-auto p-4">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <img src="https://picsum.photos/seed/product1/500/300" alt="Product Image 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between">
          <span class="text-gray-900 dark:text-white font-bold text-xl">$19.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
        </div>
      </div>
    </div>
    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <img src="https://picsum.photos/seed/product2/500/300" alt="Product Image 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between">
          <span class="text-gray-900 dark:text-white font-bold text-xl">$29.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
        </div>
      </div>
    </div>
    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <img src="https://picsum.photos/seed/product3/500/300" alt="Product Image 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between">
          <span class="text-gray-900 dark:text-white font-bold text-xl">$39.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
        </div>
      </div>
    </div>
     <!-- Product Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <img src="https://picsum.photos/seed/product4/500/300" alt="Product Image 4" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 4</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between">
          <span class="text-gray-900 dark:text-white font-bold text-xl">$49.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
</div>

Categorías