Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Información sobre herramientas neumórficas

Información sobre herramientas neumórficas para portafolio

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-10">
  <div class="relative flex items-center group">
    <button class="px-6 py-3 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-800 dark:text-gray-200 font-semibold focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition-all duration-300">
      Hover Me
    </button>
    <div class="absolute bottom-full mb-3 hidden group-hover:block px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-700 dark:text-gray-300 text-sm opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300">
      This is a neumorphic tooltip!
      <div class="absolute left-1/2 transform -translate-x-1/2 top-full w-0 h-0 border-t-8 border-t-gray-200 dark:border-t-gray-700 border-x-8 border-x-transparent"></div>
    </div>
  </div>
</div>

Componente de lista de deseos

Componente de lista de deseos de skeuomorfismo complejo con combinación de colores complementaria, para fines de redes sociales. Responsivo, con soporte para Dark Theme.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex flex-col items-center justify-center font-sans">

    <!-- Skeuomorphic Container -->
    <div class="w-full max-w-4xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-3xl 
                shadow-2xl dark:shadow-none 
                border-t-2 border-l-2 border-gray-50 dark:border-gray-600 
                border-r-2 border-b-2 border-gray-400 dark:border-gray-900 
                p-8 space-y-8 
                relative 
                overflow-hidden">

        <!-- Inner Bevel/Emboss Effect -->
        <div class="absolute inset-4 rounded-2xl 
                    bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-700 
                    shadow-inner-xl dark:shadow-inner-dark 
                    opacity-75">
        </div>

        <div class="relative z-10">
            <h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center 
                        drop-shadow-lg dark:drop-shadow-none 
                        [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)] dark:[text-shadow:_0_2px_0_rgb(0_0_0_/_60%)]">
                My Wishlist
            </h1>

            <!-- Wishlist Items Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

                <!-- Wishlist Item 1 -->
                <div class="bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800 
                            rounded-2xl p-6 
                            shadow-lg dark:shadow-xl 
                            border-t border-l border-slate-50 dark:border-slate-600 
                            border-r border-b border-slate-300 dark:border-slate-900 
                            flex flex-col items-center space-y-4 
                            transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
                    <img src="https://picsum.photos/seed/item1/300/200" alt="Item Image" class="rounded-xl shadow-md border border-slate-200 dark:border-slate-600 w-full h-40 object-cover">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Retro Gaming Console</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-center text-sm">A classic console for nostalgic gaming sessions.</p>
                    <div class="flex items-center space-x-2">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-teal-400 shadow-md">
                        <span class="text-sm text-gray-700 dark:text-gray-200">@john_doe</span>
                    </div>
                    <button class="w-full py-3 rounded-xl 
                                bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-600 dark:to-blue-700 
                                text-white font-bold 
                                shadow-md dark:shadow-lg 
                                border-t border-l border-indigo-400 dark:border-indigo-500 
                                border-r border-b border-blue-700 dark:border-blue-800 
                                active:shadow-inner active:from-blue-600 active:to-indigo-500 
                                transform transition duration-200 
                                focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
                        <i class="fas fa-heart mr-2"></i> Add to Cart
                    </button>
                </div>

                <!-- Wishlist Item 2 -->
                <div class="bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800 
                            rounded-2xl p-6 
                            shadow-lg dark:shadow-xl 
                            border-t border-l border-slate-50 dark:border-slate-600 
                            border-r border-b border-slate-300 dark:border-slate-900 
                            flex flex-col items-center space-y-4 
                            transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
                    <img src="https://picsum.photos/seed/item2/300/200" alt="Item Image" class="rounded-xl shadow-md border border-slate-200 dark:border-slate-600 w-full h-40 object-cover">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Vintage Camera</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-center text-sm">Capture moments with a classic aesthetic.</p>
                    <div class="flex items-center space-x-2">
                        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-teal-400 shadow-md">
                        <span class="text-sm text-gray-700 dark:text-gray-200">@jane_smith</span>
                    </div>
                    <button class="w-full py-3 rounded-xl 
                                bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-600 dark:to-blue-700 
                                text-white font-bold 
                                shadow-md dark:shadow-lg 
                                border-t border-l border-indigo-400 dark:border-indigo-500 
                                border-r border-b border-blue-700 dark:border-blue-800 
                                active:shadow-inner active:from-blue-600 active:to-indigo-500 
                                transform transition duration-200 
                                focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
                        <i class="fas fa-heart mr-2"></i> Add to Cart
                    </button>
                </div>

                <!-- Wishlist Item 3 -->
                <div class="bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800 
                            rounded-2xl p-6 
                            shadow-lg dark:shadow-xl 
                            border-t border-l border-slate-50 dark:border-slate-600 
                            border-r border-b border-slate-300 dark:border-slate-900 
                            flex flex-col items-center space-y-4 
                            transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
                    <img src="https://picsum.photos/seed/item3/300/200" alt="Item Image" class="rounded-xl shadow-md border border-slate-200 dark:border-slate-600 w-full h-40 object-cover">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Mechanical Keyboard</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-center text-sm">Satisfying clicks for your typing pleasure.</p>
                    <div class="flex items-center space-x-2">
                        <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-teal-400 shadow-md">
                        <span class="text-sm text-gray-700 dark:text-gray-200">@mike_wong</span>
                    </div>
                    <button class="w-full py-3 rounded-xl 
                                bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-600 dark:to-blue-700 
                                text-white font-bold 
                                shadow-md dark:shadow-lg 
                                border-t border-l border-indigo-400 dark:border-indigo-500 
                                border-r border-b border-blue-700 dark:border-blue-800 
                                active:shadow-inner active:from-blue-600 active:to-indigo-500 
                                transform transition duration-200 
                                focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
                        <i class="fas fa-heart mr-2"></i> Add to Cart
                    </button>
                </div>

            </div>

            <!-- Call to Action / Share Wishlist Button -->
            <div class="mt-10 text-center">
                <button class="py-4 px-8 rounded-full 
                            bg-gradient-to-br from-green-400 to-emerald-500 dark:from-green-600 dark:to-emerald-700 
                            text-white font-extrabold text-lg 
                            shadow-xl dark:shadow-none 
                            border-t border-l border-green-200 dark:border-green-500 
                            border-r border-b border-emerald-600 dark:border-emerald-800 
                            active:shadow-inner active:from-emerald-500 active:to-green-400 
                            transform transition duration-200 
                            focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-opacity-75">
                    <i class="fas fa-share-alt mr-3"></i> Share My Wishlist
                </button>
            </div>

        </div>
    </div>
</div>

<!-- FontAwesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<!-- Custom Tailwind CSS (for inner shadow) -->
<style>
    .shadow-inner-xl {
        box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
    }

    .dark .shadow-inner-dark {
        box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.05), inset 0 0 30px rgba(255, 255, 255, 0.02);
    }
</style>

Componente de cargadores

Un componente de carga complejo, receptivo, de estilo Glassmorphism para comercio electrónico, con un esquema de color triádico y soporte para modo oscuro, que utiliza HTML y Tailwind CSS.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-8">
  <div class="relative bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl p-8 w-full max-w-2xl border border-white border-opacity-30 dark:border-gray-700 dark:border-opacity-30">
    <div class="absolute inset-0 bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 rounded-xl opacity-20 dark:from-purple-700 dark:via-pink-800 dark:to-red-800"></div>
    <div class="relative z-10 flex flex-col md:flex-row items-center justify-center space-y-8 md:space-y-0 md:space-x-8">
      <!-- Product Image Skeleton -->
      <div class="w-48 h-48 md:w-64 md:h-64 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse shadow-lg flex-shrink-0"></div>
      
      <!-- Product Info Skeletons -->
      <div class="flex-1 space-y-6 w-full">
        <div class="h-8 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-3/4 animate-pulse"></div>
        <div class="h-6 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-1/2 animate-pulse"></div>
        <div class="space-y-4">
          <div class="h-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-full animate-pulse"></div>
          <div class="h-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-5/6 animate-pulse"></div>
          <div class="h-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-3/4 animate-pulse"></div>
        </div>
        <div class="h-12 bg-purple-500 bg-opacity-50 dark:bg-purple-700 dark:bg-opacity-50 rounded-lg w-full animate-bounce"></div>
      </div>
    </div>
    
    <!-- Additional Loader Elements -->
    <div class="relative z-10 mt-8 grid grid-cols-2 md:grid-cols-4 gap-6">
      <div class="h-32 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse"></div>
      <div class="h-32 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse"></div>
      <div class="h-32 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse"></div>
      <div class="h-32 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse"></div>
    </div>

    <!-- Overlay for interactivity indication -->
    <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10 pointer-events-none rounded-xl">
      <div class="w-24 h-24 border-8 border-t-8 border-purple-400 dark:border-purple-600 border-opacity-70 dark:border-opacity-70 rounded-full animate-spin"></div>
    </div>
  </div>
</div>

Componente de botones OAuth

Componente de botones OAuth con microinteracciones para un portafolio, con un esquema de color vibrante y un diseño simple, con diseño receptivo y soporte de modo oscuro usando Tailwind CSS.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-gray-900 dark:to-gray-800 p-4">
  <h2 class="text-4xl font-extrabold text-white dark:text-gray-100 mb-8 animate-fade-in-down">Join the Future</h2>
  <div class="flex flex-col space-y-4">
    <button class="relative flex items-center justify-center px-6 py-3 rounded-full bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 text-lg font-semibold shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-50 group">
      <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo" class="w-6 h-6 mr-3 group-hover:animate-bounce">
      Sign in with Google
      <span class="absolute top-0 right-0 -mr-4 -mt-2 w-4 h-4 bg-yellow-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping"></span>
    </button>
    <button class="relative flex items-center justify-center px-6 py-3 rounded-full bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 text-lg font-semibold shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-50 group">
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Facebook_F_icon.svg" alt="Facebook Logo" class="w-6 h-6 mr-3 group-hover:animate-bounce">
      Sign in with Facebook
       <span class="absolute top-0 right-0 -mr-4 -mt-2 w-4 h-4 bg-blue-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping"></span>
    </button>
    <button class="relative flex items-center justify-center px-6 py-3 rounded-full bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 text-lg font-semibold shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-50 group">
      <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg" alt="GitHub Logo" class="w-6 h-6 mr-3 group-hover:animate-bounce">
      Sign in with GitHub
       <span class="absolute top-0 right-0 -mr-4 -mt-2 w-4 h-4 bg-gray-600 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping"></span>
    </button>
  </div>
</div>

<style>
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.8s ease-out forwards;
  }

  @keyframes bounce {
    0%, 100% {
      transform: translateY(-5%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: translateY(0);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }

  .group-hover\:animate-bounce:hover {
    animation: bounce 1s infinite;
  }

  @keyframes ping {
    0% {
      transform: scale(0.2); 
      opacity: 0.8;
    }
    100% {
      transform: scale(1.5); 
      opacity: 0;
    }
  }

  .group-hover\:animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
</style>

Componente Columnas

Un diseño simple de tres columnas para un tablero, con tarjetas similares a 3D con colores vibrantes y compatibilidad con modo oscuro.

Abrir Vista previa

                
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">

    <!-- Column 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition-all duration-300 hover:scale-105
                border-b-4 border-l-2 border-r-4 border-t-2 border-purple-500 dark:border-purple-700
                hover:border-purple-600 dark:hover:border-purple-800
                relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-400/30 via-pink-500/30 to-red-500/30 opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h2 class="text-2xl font-bold text-purple-700 dark:text-purple-400 mb-4 tracking-wide relative z-10">Sales Overview</h2>
      <p class="text-gray-700 dark:text-gray-300 relative z-10">Total sales increased by <span class="font-semibold text-green-500">+15%</span> this quarter. Dive into the details.</p>
      <div class="mt-6 p-4 rounded-md bg-purple-50 dark:bg-gray-700/50 relative z-10">
        <p class="text-sm text-purple-600 dark:text-purple-300">Revenue: <span class="font-bold">$1.2M</span></p>
        <p class="text-sm text-purple-600 dark:text-purple-300">Units Sold: <span class="font-bold">8,500</span></p>
      </div>
    </div>

    <!-- Column 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition-all duration-300 hover:scale-105
                border-b-4 border-l-2 border-r-4 border-t-2 border-indigo-500 dark:border-indigo-700
                hover:border-indigo-600 dark:hover:border-indigo-800
                relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-indigo-400/30 via-blue-500/30 to-cyan-500/30 opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-400 mb-4 tracking-wide relative z-10">User Engagement</h2>
      <p class="text-gray-700 dark:text-gray-300 relative z-10">New users are up <span class="font-semibold text-blue-500">+8%</span>. See active user statistics.</p>
      <div class="mt-6 p-4 rounded-md bg-indigo-50 dark:bg-gray-700/50 relative z-10">
        <p class="text-sm text-indigo-600 dark:text-indigo-300">Active Users: <span class="font-bold">25,000</span></p>
        <p class="text-sm text-indigo-600 dark:text-indigo-300">Bounce Rate: <span class="font-bold">35%</span></p>
      </div>
    </div>

    <!-- Column 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition-all duration-300 hover:scale-105
                border-b-4 border-l-2 border-r-4 border-t-2 border-green-500 dark:border-green-700
                hover:border-green-600 dark:hover:border-green-800
                relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-green-400/30 via-lime-500/30 to-yellow-500/30 opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h2 class="text-2xl font-bold text-green-700 dark:text-green-400 mb-4 tracking-wide relative z-10">Revenue Projections</h2>
      <p class="text-gray-700 dark:text-gray-300 relative z-10">Projected growth of <span class="font-semibold text-orange-500">+12%</span> for the next quarter.</p>
      <div class="mt-6 p-4 rounded-md bg-green-50 dark:bg-gray-700/50 relative z-10">
        <p class="text-sm text-green-600 dark:text-green-300">Q3 Target: <span class="font-bold">$1.5M</span></p>
        <p class="text-sm text-green-600 dark:text-green-300">Confidence: <span class="font-bold">High</span></p>
      </div>
    </div>

  </div>
</div>

Botón Añadir a la cesta

Un simple botón de agregar al carrito en tono tierra con efectos de desplazamiento inspirados en la microinteracción, con un diseño receptivo y compatibilidad con el modo oscuro.

Abrir Vista previa

                <button class="bg-brown-600 hover:bg-brown-700 text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:shadow-outline transition duration-300 ease-in-out transform hover:scale-105
                       dark:bg-brown-700 dark:hover:bg-brown-800">
  <span class="text-sm">Add to Cart</span>
</button>

Componente de caja de luz de imagen

Un componente de caja de luz de imagen receptivo con diseño de Skeuomorphism, colores vibrantes y compatibilidad con modo oscuro, construido con Tailwind CSS. Sin JavaScript para mejorar el rendimiento.

Abrir Vista previa

                <div class="relative w-full h-full bg-gradient-to-br from-gray-800 to-black p-8 md:p-12 font-sans overflow-hidden">

  <!-- Skeuomorphism background texture -->
  <div class="absolute inset-0 bg-repeat opacity-10" style="background-image: url('https://grainy-gradients.vercel.app/gradients/png/new-42.png');"></div>

  <!-- Lightbox Container -->
  <div class="relative z-10 max-w-6xl mx-auto bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 rounded-3xl shadow-[inset_0_1px_0px_rgba(255,255,255,0.8),0_20px_50px_rgba(0,0,0,0.5),0_0_0_1px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_20px_50px_rgba(0,0,0,0.8),0_0_0_1px_rgba(0,0,0,0.3)] p-6 md:p-10 border border-gray-300 dark:border-gray-600">

    <!-- Header -->
    <div class="flex justify-between items-center mb-8 pb-4 border-b border-gray-300 dark:border-gray-600">
      <h1 class="text-4xl md:text-5xl font-extrabold text-indigo-700 dark:text-indigo-400 drop-shadow-lg [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)]">
        Gallery Showcase
      </h1>
      <div class="flex space-x-3">
        <button class="w-10 h-10 rounded-full bg-red-500 hover:bg-red-600 transition-all duration-300 transform hover:scale-105 shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_2px_4px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_2px_4px_rgba(0,0,0,0.6)] flex items-center justify-center text-white text-xl font-bold">
          <span class="sr-only">Close</span> &times;
        </button>
        <button class="w-10 h-10 rounded-full bg-yellow-500 hover:bg-yellow-600 transition-all duration-300 transform hover:scale-105 shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_2px_4px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_2px_4px_rgba(0,0,0,0.6)] flex items-center justify-center text-white text-xl font-bold">
          <span class="sr-only">Minimize</span> &#8211;
        </button>
        <button class="w-10 h-10 rounded-full bg-green-500 hover:bg-green-600 transition-all duration-300 transform hover:scale-105 shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_2px_4px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_2px_4px_rgba(0,0,0,0.6)] flex items-center justify-center text-white text-xl font-bold">
          <span class="sr-only">Maximize</span> &#x25A1;
        </button>
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- Image Preview Section -->
      <div class="relative bg-gray-100 dark:bg-gray-800 rounded-2xl p-4 shadow-[inset_0_1px_0px_rgba(255,255,255,0.8),0_5px_15px_rgba(0,0,0,0.2)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_15px_rgba(0,0,0,0.5)] border border-gray-300 dark:border-gray-700">
        <img src="https://picsum.photos/id/1018/800/600" alt="Featured Image" class="w-full h-auto rounded-xl object-cover shadow-lg border-4 border-gray-200 dark:border-gray-700 transition-all duration-500 hover:scale-[1.02] cursor-pointer" />
        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-30 rounded-2xl pointer-events-none"></div>

        <!-- Navigation Buttons -->
        <div class="absolute top-1/2 left-0 right-0 flex justify-between px-4 transform -translate-y-1/2">
          <button class="w-12 h-12 rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-white text-3xl flex items-center justify-center shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_5px_10px_rgba(0,0,0,0.5)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_10px_rgba(0,0,0,0.8)] border border-indigo-400 dark:border-violet-700 transition-all duration-300 hover:scale-105 active:scale-95">
            &#8592;
          </button>
          <button class="w-12 h-12 rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-white text-3xl flex items-center justify-center shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_5px_10px_rgba(0,0,0,0.5)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_10px_rgba(0,0,0,0.8)] border border-indigo-400 dark:border-violet-700 transition-all duration-300 hover:scale-105 active:scale-95">
            &#8594;
          </button>
        </div>
      </div>

      <!-- Details and Thumbnails Section -->
      <div class="flex flex-col space-y-6">

        <!-- Image Title & Description -->
        <div class="bg-gradient-to-br from-white to-gray-200 dark:from-gray-800 dark:to-gray-900 p-6 rounded-2xl shadow-[inset_0_1px_0px_rgba(255,255,255,0.8),0_5px_15px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_15px_rgba(0,0,0,0.4)] border border-gray-300 dark:border-gray-700">
          <h2 class="text-3xl font-bold text-teal-600 dark:text-teal-400 mb-3 drop-shadow [text-shadow:_0_1px_0_rgb(0_0_0_/_30%)]">Forest Pathway</h2>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed">A serene pathway winding through a dense, vibrant forest, bathed in dappled sunlight. Perfect for a peaceful stroll or deep contemplation.</p>

          <!-- Author Info -->
          <div class="flex items-center mt-5 pt-4 border-t border-gray-200 dark:border-gray-700">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-12 h-12 rounded-full mr-4 border-2 border-indigo-500 dark:border-purple-400 shadow-md" />
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200">By John Doe</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Published on Oct 26, 2023</p>
            </div>
          </div>
        </div>

        <!-- Thumbnails Grid -->
        <div class="p-4 bg-gradient-to-br from-indigo-500 to-violet-600 rounded-2xl shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_5px_15px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_15px_rgba(0,0,0,0.7)] border border-indigo-400 dark:border-violet-700">
          <h3 class="text-2xl font-bold text-white mb-4 [text-shadow:_0_2px_0_rgb(0_0_0_/_30%)]">More from this collection:</h3>
          <div class="grid grid-cols-3 gap-4">
            <img src="https://picsum.photos/id/1003/150/150" alt="Thumbnail 1" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
            <img src="https://picsum.photos/id/1015/150/150" alt="Thumbnail 2" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
            <img src="https://picsum.photos/id/1016/150/150" alt="Thumbnail 3" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
            <img src="https://picsum.photos/id/1019/150/150" alt="Thumbnail 4" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
            <img src="https://picsum.photos/id/1024/150/150" alt="Thumbnail 5" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
            <img src="https://picsum.photos/id/1025/150/150" alt="Thumbnail 6" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
          </div>
        </div>
      </div>
    </div>

    <!-- Call to Action / Footer -->
    <div class="mt-10 pt-6 border-t border-gray-300 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-center">
      <a href="#" class="inline-block px-8 py-3 bg-teal-500 hover:bg-teal-600 text-white font-bold rounded-xl shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_5px_10px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_10px_rgba(0,0,0,0.7)] transition-all duration-300 transform hover:scale-105 tracking-wide text-lg text-center">
        Download High-Res
      </a>
      <p class="text-gray-600 dark:text-gray-400 text-sm mt-4 sm:mt-0">© 2023 Skew Photo Gallery. All rights reserved.</p>
    </div>

  </div>
</div>

Componente de información sobre herramientas

Un componente de información sobre herramientas complejo, receptivo, compatible con temas oscuros, Skeuomorphic-Vibrant para paneles que usan Tailwind CSS. No se necesita JavaScript, solo HTML con clases Tailwind. Para el modo oscuro, usa el prefijo dark: de Tailwind para el estilo. Las imágenes son de picsum.photos y randomuser.me.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative flex items-center group">
    <button class="px-6 py-3 text-white transition-all duration-300 transform bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg shadow-2xl hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
                   dark:from-blue-700 dark:to-indigo-800
                   font-bold text-lg
                   relative overflow-hidden
                   before:absolute before:inset-0 before:bg-gradient-to-br before:from-white before:to-transparent before:opacity-0 before:transition-opacity before:duration-300
                   hover:before:opacity-20
                   after:absolute after:inset-0 after:border-t-2 after:border-l-2 after:border-white after:opacity-0 after:transition-opacity after:duration-300
                   hover:after:opacity-100
                   ">
      Hover for Dashboard Insights
    </button>
    
    <div class="absolute bottom-full mb-6 w-96 p-6
                bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900
                text-gray-900 dark:text-gray-100
                rounded-2xl shadow-skeuomorphic
                opacity-0 group-hover:opacity-100 transition-opacity duration-500
                transform translate-y-4 group-hover:-translate-y-0
                pointer-events-none group-hover:pointer-events-auto
                border-t-4 border-l-4 border-gray-300 dark:border-gray-600
                overflow-hidden
                before:absolute before:inset-0 before:bg-gradient-to-br before:from-white before:to-transparent before:opacity-10 before:rounded-2xl
                after:absolute after:bottom-0 after:left-1/2 after:-mb-4 after:-ml-2 after:w-0 after:h-0 after:border-solid after:border-8 after:border-transparent
                after:border-t-gray-400 dark:after:border-t-gray-900 after:drop-shadow-lg
                ">
      
      <div class="flex items-center space-x-4 mb-4 border-b pb-4 border-gray-300 dark:border-gray-600">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-lg">
        <div>
          <p class="font-bold text-lg text-indigo-700 dark:text-indigo-300">Analytics Summary</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Last updated: 2 minutes ago</p>
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 mb-4">
        <div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
          <p class="text-sm text-gray-700 dark:text-gray-300">Total Sales:</p>
          <p class="font-bold text-xl text-green-600 dark:text-green-400">$12,450</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
          <p class="text-sm text-gray-700 dark:text-gray-300">New Users:</p>
          <p class="font-bold text-xl text-purple-600 dark:text-purple-400">320</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
          <p class="text-sm text-gray-700 dark:text-gray-300">Bounce Rate:</p>
          <p class="font-bold text-xl text-red-600 dark:text-red-400">1.5%</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
          <p class="text-sm text-gray-700 dark:text-gray-300">Avg. Session:</p>
          <p class="font-bold text-xl text-blue-600 dark:text-blue-400">8m 30s</p>
        </div>
      </div>

      <div class="flex justify-between items-center text-sm text-gray-700 dark:text-gray-300">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">View Full Report</a>
        <div class="flex items-center space-x-2">
          <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path>
          </svg>
          <span>Real-time Data</span>
        </div>
      </div>

      <div class="absolute inset-0 border-r-4 border-b-4 border-gray-300 dark:border-gray-600 rounded-2xl pointer-events-none opacity-50"></div>
      <div class="absolute inset-0 bg-stone-300 dark:bg-stone-800 opacity-20 rounded-2xl filter blur-sm"></div>

    </div>
  </div>
</div>

<style>
  /* Custom shadow for Skeuomorphism */
  .shadow-skeuomorphic {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), -10px -10px 20px rgba(255, 255, 255, 0.1);
  }
  .dark .shadow-skeuomorphic {
     box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7), -10px -10px 20px rgba(255, 255, 255, 0.05);
  }
  .shadow-inner-skeuomorphic {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.1);
  }
  .dark .shadow-inner-skeuomorphic {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.05);
  }
  .group:hover .absolute.bottom-full:after {
    border-top-color: #A0AEC0; /* Light Gray */
  }
  .dark .group:hover .absolute.bottom-full:after {
    border-top-color: #4A5568; /* Dark Gray */
  }
</style>

Skeuomorphic Añadir al carrito Botón

Botón Skeuomórfico Agregar al carrito con colores vibrantes para un sitio web de portafolio, con un diseño complejo con elementos interactivos y soporte de modo oscuro receptivo usando Tailwind CSS.

Abrir Vista previa

                <button class="relative flex items-center justify-center p-4 overflow-hidden text-lg font-bold text-white transition-all duration-300 ease-in-out bg-gradient-to-br from-purple-600 to-blue-500 rounded-2xl shadow-2xl group focus:outline-none focus:ring-4 focus:ring-purple-800 transform hover:scale-105 active:scale-95 dark:from-gray-800 dark:to-gray-900 dark:shadow-none dark:hover:from-gray-700 dark:hover:to-gray-800">
    <span class="relative z-10 flex items-center justify-center w-full h-full p-2 space-x-3 transition-all duration-300 ease-in-out bg-gradient-to-br from-purple-800 to-blue-600 rounded-xl shadow-inner-xl group-hover:from-purple-700 group-hover:to-blue-500 dark:from-gray-700 dark:to-gray-800 dark:group-hover:from-gray-600 dark:group-hover:to-gray-700">

        <!-- Texture Overlay -->
        <div class="absolute inset-0 z-0 bg-repeat opacity-20 dark:opacity-10" style="background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');"></div>

        <!-- Main Button Content -->
        <div class="relative z-10 flex items-center space-x-3">
            <svg class="w-8 h-8 text-white transform -rotate-12 group-hover:rotate-0 transition-transform duration-300 ease-in-out" 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0-10a2 2 0 110 4 2 2 0 010-4zm-8 4a2 2 0 110 4 2 2 0 010-4z"></path>
            </svg>
            <span class="text-white text-shadow-md">Add to Cart</span>
        </div>

        <!-- Dynamic Light Reflection -->
        <div class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-xl">
            <div class="absolute w-1/2 h-full bg-white opacity-20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-500 ease-in-out"></div>
        </div>

        <!-- Inner Shadow for Depth -->
        <div class="absolute inset-0 rounded-xl shadow-inner-2xl dark:shadow-inner-2xl-dark"></div>

    </span>

    <!-- Outer Bevel/Emboss Effect -->
    <div class="absolute inset-0 border-4 border-white border-opacity-10 rounded-2xl dark:border-opacity-5"></div>

</button>

<style>
    /* Custom shadow for Skeuomorphism */
    .shadow-inner-xl {
        box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.3), inset 0 -5px 10px rgba(255, 255, 255, 0.1);
    }

    .shadow-inner-2xl {
        box-shadow: inset 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 -8px 15px rgba(255, 255, 255, 0.15);
    }

    .shadow-inner-2xl-dark {
        box-shadow: inset 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 -8px 15px rgba(255, 255, 255, 0.05);
    }

    .text-shadow-md {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
</style>

Componente de paginación

Componente de paginación con microinteracciones para un portafolio, utilizando un esquema de color triádico. Diseño responsivo con soporte para temas oscuros, sin JavaScript.

Abrir Vista previa

                <nav class="flex justify-center items-center space-x-2 my-8 dark:bg-gray-900 bg-white p-4 rounded-lg shadow-lg" aria-label="Pagination">
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 leading-5 rounded-md hover:bg-purple-100 dark:hover:bg-purple-700 focus:outline-none focus:ring focus:border-purple-300 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300">
    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
    </svg>
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:bg-green-100 dark:hover:bg-green-700 focus:outline-none focus:ring focus:border-green-300 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300">
    1
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-blue-600 leading-5 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition ease-in-out duration-150 dark:bg-blue-600 dark:border-blue-600 dark:text-gray-100 transform scale-105 shadow-md">
    2
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:bg-red-100 dark:hover:bg-red-700 focus:outline-none focus:ring focus:border-red-300 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300">
    3
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 leading-5 rounded-md hover:bg-purple-100 dark:hover:bg-purple-700 focus:outline-none focus:ring focus:border-purple-300 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300">
    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
    </svg>
  </a>
</nav>

1 ... 76 77 78 79 80 ... 282

Categorías

Todos los componentes