Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de diseño de cuadrícula

Un componente de diseño de cuadrícula minimalista para comercio electrónico con un esquema de color triádico y compatibilidad con modo oscuro, diseñado para experiencias de compra en línea.

Abrir Vista previa

                <div class="container mx-auto px-4">
  <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Shop Our Collection</h1>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
      <img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
        <span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$39.99</span>
        <button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
      <img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
        <span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$49.99</span>
        <button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
      <img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
        <span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$59.99</span>
        <button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
      <img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 4</h2>
        <p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
        <span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$69.99</span>
        <button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
      <img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 5</h2>
        <p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
        <span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$79.99</span>
        <button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
      <img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 6</h2>
        <p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
        <span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$89.99</span>
        <button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
      </div>
    </div>
  </div>
</div>

Componente de comercio electrónico de mapa de calor

Un componente minimalista de mapa de calor en escala de grises para comercio electrónico, con un diseño complejo e interactivo. Responsivo y admite el modo oscuro.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-900 p-4 shadow-md rounded-lg">
  <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Product Activity Heat Map</h2>
  <div class="grid grid-cols-31 gap-1">
    <!-- Days of the week column -->
    <div class="col-span-1 flex flex-col justify-around">
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Mon</div>
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Tue</div>
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Wed</div>
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Thu</div>
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Fri</div>
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Sat</div>
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Sun</div>
    </div>
    <!-- Heat map grid -->
    <div class="col-span-30 grid grid-cols-30 gap-1">
      <!-- Placeholder for days of the month (simplified) -->
      <div class="col-span-30 grid grid-cols-30 gap-1">
        
        <!-- Example cells with varying intensity -->
        <div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 1: 10 sales"></div>
        <div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 2: 25 sales"></div>
        <div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 3: 50 sales"></div>
        <div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 4: 75 sales"></div>
        <div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 5: 100 sales"></div>
        <div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 6: 12 sales"></div>
        <div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 7: 30 sales"></div>
        <div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 8: 60 sales"></div>
        <div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 9: 80 sales"></div>
        <div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 10: 110 sales"></div>
         <div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 1: 10 sales"></div>
        <div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 2: 25 sales"></div>
        <div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 3: 50 sales"></div>
        <div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 4: 75 sales"></div>
        <div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 5: 100 sales"></div>
        <div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 6: 12 sales"></div>
        <div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 7: 30 sales"></div>
        <div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 8: 60 sales"></div>
        <div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 9: 80 sales"></div>
        <div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 10: 110 sales"></div>
         <div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 1: 10 sales"></div>
        <div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 2: 25 sales"></div>
        <div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 3: 50 sales"></div>
        <div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 4: 75 sales"></div>
        <div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 5: 100 sales"></div>
        <div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 6: 12 sales"></div>
        <div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 7: 30 sales"></div>
        <div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 8: 60 sales"></div>
        <div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 9: 80 sales"></div>
        <div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 10: 110 sales"></div>
      
        <!-- ... add more cells for the rest of the month ... -->
      </div>
    </div>
  </div>
</div>

Componente de formas brutalistas

Un componente de formularios web diseñado con un estilo brutalista con alto contraste y diseños inusuales, adecuado para el comercio electrónico y responsivo con soporte para temas oscuros.

Abrir Vista previa

                <div class="max-w-md mx-auto p-6 bg-gray-300 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Create Your Account</h2>
    <form class="space-y-4">
        <div>
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
            <input type="text" id="name" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your name" required />
        </div>
        <div>
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
            <input type="email" id="email" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your email" required />
        </div>
        <div>
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
            <input type="password" id="password" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your password" required />
        </div>
        <div>
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Avatar</label>
            <input type="file" id="avatar" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" required />
            <img src="https://picsum.photos/100/100" alt="Avatar" class="mt-2 rounded-full" />
        </div>
        <button type="submit" class="w-full p-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 text-white font-bold rounded">Register</button>
    </form>
    <p class="mt-4 text-gray-600 dark:text-gray-400">
        Already have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Login here</a>.
    </p>
</div>

Componente de información sobre herramientas

Un componente de descripción emergente con estilo Neumorphism para la presentación de carteras con soporte de modo oscuro, diseño receptivo y uso de Tailwind CSS.

Abrir Vista previa

                <div class="relative group">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-lg dark:shadow-none">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-none p-4">
            <h2 class="text-gray-800 dark:text-gray-200 font-semibold">Project Title</h2>
            <p class="text-gray-600 dark:text-gray-400">This is a brief description of the project or product showcased in the portfolio.</p>
        </div>
    </div>
    <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block">
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-3 text-center transition-all duration-300">
            <p class="text-sm text-gray-800 dark:text-gray-200">More details about the project.</p>
            <img src="https://picsum.photos/200/100" alt="Project Image" class="mt-2 rounded-lg shadow-md dark:shadow-none">
        </div>
        <div class="w-3 h-3 bg-white dark:bg-gray-800 absolute left-1/2 transform -translate-x-1/2 -bottom-1 rotate-45"></div>
    </div>
</div>

Barra de navegación del blog

Barra de navegación responsiva con soporte de modo oscuro para sitios web de blogs/contenido. Presenta un diseño minimalista / plano con una combinación de colores pastel.

Abrir Vista previa

                <nav class="bg-pink-100 dark:bg-purple-900 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-lg font-semibold text-gray-800 dark:text-white">My Blog</a>
    <div class="flex space-x-4">
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Blog</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a>
    </div>
  </div>
</nav>

Componentes de diseño

Un componente de diseño de panel receptivo que utiliza microinteracciones y un esquema de color pastel, diseñado para mostrar paneles de control y visualización de datos con soporte para modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-white dark:bg-gray-900 flex flex-col p-5">
  <header class="flex justify-between items-center mb-5">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Dashboard</h1>
    <button class="py-2 px-4 bg-blue-500 dark:bg-blue-700 text-white rounded-lg transition-transform transform hover:scale-105 hover:bg-blue-600 dark:hover:bg-blue-800 focus:outline-none">Logout</button>
  </header>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-pink-100 dark:bg-pink-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Statistics</h2>
      <p class="text-gray-600 dark:text-gray-400">Here are some stats about users.</p>
      <img src="https://picsum.photos/200/100" alt="User Stats" class="mt-2 rounded-md">
    </div>

    <div class="bg-green-100 dark:bg-green-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sales Overview</h2>
      <p class="text-gray-600 dark:text-gray-400">View the sales data.</p>
      <img src="https://picsum.photos/200/100" alt="Sales Overview" class="mt-2 rounded-md">
    </div>

    <div class="bg-blue-100 dark:bg-blue-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Recent Activity</h2>
      <p class="text-gray-600 dark:text-gray-400">Check out the latest activity.</p>
      <img src="https://picsum.photos/200/100" alt="Recent Activity" class="mt-2 rounded-md">
    </div>

    <div class="bg-yellow-100 dark:bg-yellow-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Server Status</h2>
      <p class="text-gray-600 dark:text-gray-400">Monitor server health.</p>
      <img src="https://picsum.photos/200/100" alt="Server Status" class="mt-2 rounded-md">
    </div>

    <div class="bg-purple-100 dark:bg-purple-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Notifications</h2>
      <p class="text-gray-600 dark:text-gray-400">Your latest notifications.</p>
      <img src="https://picsum.photos/200/100" alt="Notifications" class="mt-2 rounded-md">
    </div>

    <div class="bg-red-100 dark:bg-red-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Profile</h2>
      <div class="flex items-center mt-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile" class="w-12 h-12 rounded-full mr-3">
        <p class="text-gray-600 dark:text-gray-400">John Doe</p>
      </div>
    </div>
  </div>

  <footer class="mt-5 text-center text-gray-500 dark:text-gray-400">
    <p>&copy; 2023 Dashboard. All rights reserved.</p>
  </footer>
</div>

Componente de menciones de usuario

Un usuario complejo menciona el componente diseñado para paneles con soporte para modo oscuro y esquema de color triádico.

Abrir Vista previa

                <div class="bg-gray-800 dark:bg-gray-900 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold mb-4">User Mentions</h2>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-700">
            <thead class="bg-gray-700">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Avatar</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Username</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Mentioned At</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-gray-800 divide-y divide-gray-700">
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-white">@johndoe</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">2 hours ago</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">View</button>
                    </td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-white">@janedoe</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">3 hours ago</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">View</button>
                    </td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/52.jpg" alt="User Avatar">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-white">@alexsmith</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">5 hours ago</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">View</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Componente de nube de etiquetas de neumorfismo

Un componente de nube de etiquetas receptivo con diseño de neumorfismo, combinación de colores pastel e interacciones complejas, adaptado para el comercio electrónico. Incluye soporte para el modo oscuro y usa Tailwind CSS.

Abrir Vista previa

                <div class="p-4 dark:bg-gray-800">
  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    <div class="col-span-2 md:col-span-3 lg:col-span-4 text-center text-lg font-semibold text-gray-700 dark:text-gray-300">Popular Tags</div>
    
    <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg shadow-neumorphism-light dark:shadow-neumorphism-dark flex flex-wrap gap-2 justify-center">
      <span class="bg-pastel-blue text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Electronics</span>
      <span class="bg-pastel-green text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Apparel</span>
      <span class="bg-pastel-pink text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Home & Garden</span>
      <span class="bg-pastel-yellow text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Books</span>
      <span class="bg-pastel-purple text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Toys & Games</span>
      <span class="bg-pastel-blue text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Beauty</span>
      <span class="bg-pastel-green text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Sports</span>
      <span class="bg-pastel-pink text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Outdoors</span>
      <span class="bg-pastel-yellow text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Automotive</span>
      <span class="bg-pastel-purple text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Jewelry</span>
    </div>
  </div>
</div>


<style>
  .shadow-neumorphism-light {
    box-shadow: 5px 5px 10px #babecc, -5px -5px 10px #f2f3f7;
  }
  .dark .shadow-neumorphism-dark {
    box-shadow: 5px 5px 10px #333, -5px -5px 10px #555;
  }
  .shadow-inner-neumorphism-light {
    box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #f2f3f7;
  }
  .dark .shadow-inner-neumorphism-dark {
     box-shadow: inset 2px 2px 5px #333, inset -5px -5px 10px #555;
  }
  .hover\:shadow-outer-neumorphism-light:hover {
    box-shadow: 5px 5px 10px #babecc, -5px -5px 10px #f2f3f7;
  }
   .dark .hover\:shadow-outer-neumorphism-dark:hover {
    box-shadow: 5px 5px 10px #333, -5px -5px 10px #555;
  }
  .bg-pastel-blue { background-color: #a7c7e7; }
  .bg-pastel-green { background-color: #b2dfdb; }
  .bg-pastel-pink { background-color: #f8c8dc; }
  .bg-pastel-yellow { background-color: #ffecb3; }
  .bg-pastel-purple { background-color: #e1bee7; }
</style>

Componente de incrustación de medios

Un componente responsivo de Media Embed con un estilo esqueuomórfico, utilizando colores en tono tierra y adecuado para el comercio electrónico, con soporte para temas oscuros.

Abrir Vista previa

                <div class="max-w-lg mx-auto p-4 bg-slate-200 dark:bg-slate-800 rounded-lg shadow-lg">
    <div class="relative overflow-hidden rounded-lg">
        <img class="w-full h-64 object-cover mb-4" src="https://picsum.photos/600/400" alt="Product Image">
        <div class="absolute top-2 right-2 bg-white dark:bg-gray-800 rounded-full shadow">
            <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        </div>
    </div>
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Product Title</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">This is a description of the product that mimics natural textures and colors, providing an earthy feel.</p>
    <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$29.99</span>
        <button class="px-4 py-2 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow hover:bg-green-600 dark:hover:bg-green-800 transition duration-300">Add to Cart</button>
    </div>
</div>

Componente Columnas

Componente de columnas responsivas con modo oscuro

Abrir Vista previa

                <div class="dark:bg-gray-900 p-8">
  <div class="container mx-auto">
    <div class="md:flex md:space-x-6">
      <div class="md:w-1/3">
        <div class="rounded-lg shadow-md p-6 dark:bg-gray-800">
          <h3 class="text-xl font-semibold mb-4 dark:text-white">Column One</h3>
          <p class="dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="md:w-1/3">
        <div class="rounded-lg shadow-md p-6 dark:bg-gray-800">
          <h3 class="text-xl font-semibold mb-4 dark:text-white">Column Two</h3>
          <p class="dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
      <div class="md:w-1/3">
        <div class="rounded-lg shadow-md p-6 dark:bg-gray-800">
          <h3 class="text-xl font-semibold mb-4 dark:text-white">Column Three</h3>
          <p class="dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 121 122 123 124 125 ... 242

Categorías

Todos los componentes