Todos los componentes

Componente de carrito de compras

Un componente de carrito de compras de temática retro/vintage con combinación de colores monocromática, complejidad moderada, diseño receptivo y compatibilidad con modo oscuro. Adecuado para sitios web comerciales/corporativos.

Abrir vista previa

                <div class="container mx-auto p-4">
  <div class="max-w-md mx-auto rounded-lg shadow-lg bg-white dark:bg-gray-800 overflow-hidden">
    <div class="px-6 py-4">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
      <div class="flex items-center mb-4">
        <img src="https://picsum.photos/seed/retro1/80/80" alt="Product Image" class="w-16 h-16 object-cover rounded-lg dark:brightness-75">
        <div class="ml-4">
          <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>
        <div class="ml-auto">
          <span class="text-gray-700 dark:text-gray-200">Qty: 1</span>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <img src="https://picsum.photos/seed/retro2/80/80" alt="Product Image" class="w-16 h-16 object-cover rounded-lg dark:brightness-75">
        <div class="ml-4">
          <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>
        <div class="ml-auto">
          <span class="text-gray-700 dark:text-gray-200">Qty: 2</span>
        </div>
      </div>
      <div class="border-t border-gray-200 dark:border-gray-600 pt-4">
        <div class="flex justify-between">
          <span class="text-lg font-semibold text-gray-800 dark:text-white">Total:</span>
          <span class="text-lg font-semibold text-gray-800 dark:text-white">$79.97</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-50 dark:bg-gray-700 px-6 py-4">
      <button class="w-full bg-blue-500 dark:bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Checkout</button>
    </div>
  </div>
</div>

Paginación de comercio electrónico

Un componente de paginación responsivo inspirado en el diseño de materiales con soporte para temas oscuros, adecuado para listados de productos de comercio electrónico. Implementa un esquema de color complementario y una complejidad moderada con estados de botón interactivos que utilizan solo HTML y Tailwind CSS.

Abrir vista previa

                <nav aria-label="Pagination" class="flex justify-center items-center space-x-2 my-4 dark:bg-gray-800 p-2 rounded-md">
  <button class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    Previous
  </button>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-blue-200 rounded-md hover:bg-blue-300 dark:bg-blue-700 dark:text-blue-200 dark:hover:bg-blue-600">
    1
  </a>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    2
  </a>
  <a href="#" aria-current="page" class="px-3 py-2 text-sm font-medium text-white bg-blue-500 rounded-md dark:bg-blue-500">
    3
  </a>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    4
  </a>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    5
  </a>
  <button class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    Next
  </button>
</nav>

DarkTriadicSimpleBusinessHeader

Componente de encabezado responsivo con soporte de modo oscuro para sitios web comerciales

Abrir vista previa

                <header class="bg-gray-900 text-gray-300 dark:bg-gray-dark dark:text-gray-light shadow-md">
  <div class="container mx-auto px-6 py-4">
    <div class="flex items-center justify-between">
      <div class="text-xl font-bold text-white dark:text-white">Business Name</div>
      <nav class="space-x-4">
        <a href="#" class="hover:text-white dark:hover:text-white">Home</a>
        <a href="#" class="hover:text-white dark:hover:text-white">About</a>
        <a href="#" class="hover:text-white dark:hover:text-white">Services</a>
        <a href="#" class="hover:text-white dark:hover:text-white">Contact</a>
      </nav>
    </div>
  </div>
</header>

RetroVintage_CheckoutFormComponent

Formulario de pago retro/vintage con tonos tierra, complejidad moderada y compatibilidad con el modo oscuro

Abrir vista previa

                <div class="container mx-auto p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl font-mono">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Checkout Information</h2>
  <form>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="mb-4">
        <label for="full_name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Full Name</label>
        <input type="text" id="full_name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your full name">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email Address</label>
        <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your email address">
      </div>
    </div>

    <div class="mb-4">
      <label for="address" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Address</label>
      <input type="text" id="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your address">
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="mb-4">
        <label for="city" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">City</label>
        <input type="text" id="city" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your city">
      </div>
      <div class="mb-4">
        <label for="state" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">State</label>
        <input type="text" id="state" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your state">
      </div>
      <div class="mb-4">
        <label for="zip" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Zip Code</label>
        <input type="text" id="zip" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your zip code">
      </div>
    </div>

    <div class="mb-6">
      <label for="card_number" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Credit Card Number</label>
      <input type="text" id="card_number" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your credit card number">
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="mb-6">
        <label for="expiry_date" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Expiry Date</label>
        <input type="text" id="expiry_date" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="MM/YY">
      </div>
      <div class="mb-6">
        <label for="cvv" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">CVV</label>
        <input type="text" id="cvv" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="CVV">
      </div>
        <div class="mb-6">
            <label for="country" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Country</label>
            <input type="text" id="country" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your country">
        </div>
    </div>

    <div class="flex items-center justify-between">
      <button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-green-800 dark:hover:bg-green-900" type="button">
        Submit Payment
      </button>
    </div>
  </form>
</div>

Formulario de inicio de sesión skeuomórfico

Un sencillo formulario de inicio de sesión skeuomórfico con colores triádicos para un propósito de tablero, con un diseño receptivo y soporte para el modo oscuro mediante Tailwind CSS.

Abrir vista previa

                <div class="min-h-screen flex items-center justify-center p-4 dark:bg-gray-900 bg-gray-100">
  <div class="max-w-sm w-full bg-white dark:bg-gray-800 p-8 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Login</h2>
    <form>
      <div class="mb-4">
        <label for="username" class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Username</label>
        <input type="text" id="username" class="shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark appearance-none rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Enter your username">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Password</label>
        <input type="password" id="password" class="shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark appearance-none rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-200 dark:bg-gray-700" placeholder="Enter your password">
      </div>
      <div class="flex items-center justify-between">
        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded focus:outline-none focus:shadow-outline shadow-neumorphic-light dark:shadow-neumorphic-dark dark:bg-blue-700 dark:hover:bg-blue-800">
          Sign In
        </button>
        <a class="inline-block align-baseline font-bold text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-500" href="#">
          Forgot Password?
        </a>
      </div>
    </form>
  </div>
</div>

<style>
/* Basic neumorphic effect styles */
/* Light mode shadows */
.shadow-neumorphic-light {
    box-shadow: 8px 8px 15px #a3b1c6, -8px -8px 15px #ffffff;
}

.shadow-inner-neumorphic-light {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
}

/* Dark mode shadows */
.dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 15px #1c2027, -8px -8px 15px #2e3643;
}

.dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #1c2027, inset -5px -5px 10px #2e3643;
}

/* Triadic color examples (adjust as needed) */
/* Using shades of blue, yellow/orange, and red/pink for a triadic feel */
.bg-blue-600 { background-color: #2563eb; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.text-blue-600 { color: #2563eb; }
.hover\:text-blue-800:hover { color: #1e40af; }

.dark .bg-blue-700 { background-color: #1d4ed8; }
.dark .hover\:bg-blue-800:hover { background-color: #1e40af; }
.dark .text-blue-400 { color: #60a5fa; }
.dark .hover\:text-blue-500:hover { color: #3b82f6; }

/* Add subtle background colors for light/dark mode that aren't pure white/black to enhance neumorphism */
.bg-gray-100 { background-color: #f0f2f5; }
.dark .bg-gray-900 { background-color: #272c35; }
.bg-gray-200 { background-color: #e5e7eb; }
.dark .bg-gray-700 { background-color: #374151; }
.bg-white { background-color: #ffffff; }
.dark .bg-gray-800 { background-color: #1f2937; }

.text-gray-700 { color: #374151; }
.dark .text-gray-300 { color: #d1d5db; }
.text-gray-800 { color: #1f2937; }
.dark .text-white { color: #ffffff; }
.text-gray-200 { color: #e5e7eb; }

</style>

Componente Tarjetas de producto

Un componente de tarjeta de producto receptivo con diseño 3D, combinación de colores análoga y compatibilidad con modo oscuro, diseñado para interfaces de redes sociales.

Abrir vista previa

                <div class="max-w-sm mx-auto relative z-10 transform transition-transform duration-500 ease-in-out hover:scale-105">
  <div class="bg-gradient-to-br from-teal-400 via-blue-500 to-purple-600 dark:from-gray-700 dark:via-gray-800 dark:to-black shadow-xl rounded-lg overflow-hidden dark:shadow-lg">
    <div class="relative h-48">
      <img class="w-full h-full object-cover" src="https://picsum.photos/seed/picsum/400/300" alt="Product Image">
      <div class="absolute top-0 right-0 bg-blue-600 text-white px-3 py-1 m-2 rounded-lg text-sm font-bold dark:bg-blue-400">New</div>
    </div>
    <div class="p-4">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Awesome Product Title</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mt-1">This is a short description of the product, highlighting its key features and benefits.</p>
      <div class="flex items-center mt-4">
        <div class="text-xl font-bold text-blue-600 dark:text-blue-400">$99.99</div>
        <button class="ml-auto bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 dark:bg-blue-400 dark:hover:bg-blue-500">Add to Cart</button>
      </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <span class="text-sm text-gray-700 dark:text-gray-400">Posted by John Doe</span>
      </div>
    </div>
  </div>
</div>

<style>
  /* Basic 3D effect. More advanced 3D requires transforms on hover/active states combined with perspective on parent. */
  .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  .dark\:shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
</style>

Componente del Foro de la Comunidad

Un componente de foro de la comunidad retro / vintage para comercio electrónico con una combinación de colores vibrantes. Diseño responsivo con soporte para temas oscuros.

Abrir vista previa

                <div class="bg-gray-200 dark:bg-gray-800 min-h-screen p-8 font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
    <div class="bg-yellow-400 dark:bg-yellow-600 p-6">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Community Forum</h1>
    </div>
    <div class="p-6">
      <div class="flex items-center mb-6">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <textarea class="flex-grow p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" rows="3" placeholder="Share your thoughts..."></textarea>
      </div>
      <button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300">New Post</button>

      <div class="mt-8 space-y-6">
        <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow">
          <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
            <div>
              <h3 class="font-semibold text-gray-800 dark:text-white">Sarah Johnson</h3>
              <p class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300">Just received my order and I'm loving the quality!</p>
          <div class="flex justify-end mt-4">
            <button class="text-blue-500 hover:underline text-sm mr-4">Reply</button>
            <button class="text-red-500 hover:underline text-sm">Report</button>
          </div>
        </div>

        <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow">
          <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
            <div>
              <h3 class="font-semibold text-gray-800 dark:text-white">Michael Chen</h3>
              <p class="text-sm text-gray-600 dark:text-gray-400">1 day ago</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300">Are there any discounts available for loyal customers?</p>
          <div class="flex justify-end mt-4">
            <button class="text-blue-500 hover:underline text-sm mr-4">Reply</button>
            <button class="text-red-500 hover:underline text-sm">Report</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Botón Añadir a la cesta

Un componente receptivo del botón Agregar al carrito diseñado en un estilo esqueuomórfico, con colores vibrantes y soporte para temas oscuros, adecuado para interfaces de redes sociales.

Abrir vista previa

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 flex flex-col items-center relative overflow-hidden w-80">
        <img class="rounded-md w-full mb-4 h-32 object-cover" src="https://picsum.photos/400/200" alt="Product Image" />
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Name</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the product. It tells you what you can expect from this item.</p>
        <div class="flex items-center justify-between w-full mt-4">
            <span class="text-lg font-bold text-green-500 dark:text-green-400">$49.99</span>
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105">
                Add to Cart
            </button>
        </div>
        <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-800 dark:bg-gray-900 rounded-full w-16 h-16 shadow-lg flex items-center justify-center">
            <img class="rounded-full w-12 h-12 border-2 border-white" src="https://randomuser.me/api/portraits/men/65.jpg" alt="User Avatar" />
        </div>
    </div>
</div>

Componente de menciones de usuario

Un componente de mención de usuario simple y minimalista para blogs y consumo de contenido, con un diseño receptivo con soporte para temas oscuros.

Abrir vista previa

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">User Mentions</h2>
    <ul class="mt-4 space-y-4">
        <li class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div>
                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">John Doe</h3>
                <p class="text-gray-500 dark:text-gray-400">@john_doe</p>
            </div>
        </li>
        <li class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div>
                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Jane Smith</h3>
                <p class="text-gray-500 dark:text-gray-400">@jane_smith</p>
            </div>
        </li>
        <li class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div>
                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Mike Johnson</h3>
                <p class="text-gray-500 dark:text-gray-400">@mike_johnson</p>
            </div>
        </li>
    </ul>
    <div class="mt-6">
        <button class="bg-blue-500 text-white rounded-lg py-2 px-4 hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800">View More</button>
    </div>
</div>

Formulario de registro de neumorfismo

Componente de formulario de registro de neumorfismo con soporte de tema oscuro usando Tailwind CSS

Abrir vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-6">
  <div class="max-w-md w-full bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-8">
    <h2 class="text-2xl font-bold text-center text-gray-700 dark:text-gray-200 mb-8">Register</h2>
    <form>
      <div class="mb-6">
        <label for="username" class="block text-gray-600 dark:text-gray-300 text-sm font-semibold mb-2">Username</label>
        <input type="text" id="username" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:border-blue-400 dark:focus:border-blue-600 shadow-neumorphic-input-light dark:shadow-neumorphic-input-dark text-gray-700 dark:text-gray-200">
      </div>
      <div class="mb-6">
        <label for="email" class="block text-gray-600 dark:text-gray-300 text-sm font-semibold mb-2">Email</label>
        <input type="email" id="email" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:border-blue-400 dark:focus:border-blue-600 shadow-neumorphic-input-light dark:shadow-neumorphic-input-dark text-gray-700 dark:text-gray-200">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-600 dark:text-gray-300 text-sm font-semibold mb-2">Password</label>
        <input type="password" id="password" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:border-blue-400 dark:focus:border-blue-600 shadow-neumorphic-input-light dark:shadow-neumorphic-input-dark text-gray-700 dark:text-gray-200">
      </div>
      <div class="mb-6">
        <label for="confirm-password" class="block text-gray-600 dark:text-gray-300 text-sm font-semibold mb-2">Confirm Password</label>
        <input type="password" id="confirm-password" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:border-blue-400 dark:focus:border-blue-600 shadow-neumorphic-input-light dark:shadow-neumorphic-input-dark text-gray-700 dark:text-gray-200">
      </div>
      <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:shadow-outline shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark transform hover:scale-105 transition-transform duration-200 ease-in-out">Register</button>
    </form>
    <p class="text-center text-gray-600 dark:text-gray-300 text-sm mt-6">Already have an account? <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500">Login here</a>.</p>
  </div>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 14px #a7a7a7, -7px -7px 14px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 14px #4d4d4d, -7px -7px 14px #1a1a1a;
  }

  .shadow-neumorphic-input-light {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-input-dark {
    box-shadow: inset 5px 5px 10px #4d4d4d, inset -5px -5px 10px #1a1a1a;
  }

  .shadow-neumorphic-button-light {
      box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphic-button-dark {
      box-shadow: 5px 5px 10px #4d4d4d, -5px -5px 10px #1a1a1a;
  }
</style>

Categorías