Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de carrito de compras

Un componente de carrito de compras receptivo con efectos de neón / brillo y esquema de color azul corporativo, compatible con el modo oscuro. Presenta listados de productos, ajustes de cantidad y un resumen total.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 duration-300 p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="w-full max-w-6xl bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden mb-8 transform transition-all duration-500 scale-95 md:scale-100
    dark:border dark:border-blue-700 dark:shadow-blue-500/30 shadow-lg">
    <div class="relative p-6 sm:p-8 bg-gradient-to-r from-blue-600 to-blue-800 dark:from-blue-800 dark:to-blue-950 text-white
      before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-blue-400/20 before:to-transparent before:animate-pulse-slow
      dark:before:from-blue-600/30 dark:before:to-transparent">
      <h2 class="relative z-10 text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-2 leading-tight tracking-tight text-shadow-lg
        dark:text-blue-200 dark:shadow-blue-300/50">
        Your Shopping Cart
      </h2>
      <p class="relative z-10 text-lg sm:text-xl font-light opacity-90">
        Review your items before checkout.
      </p>
      <div class="absolute inset-0 pointer-events-none glowing-lines"></div>
    </div>

    <div class="p-4 sm:p-6 lg:p-8 grid grid-cols-1 lg:grid-cols-3 gap-6 sm:gap-8">
      <div class="lg:col-span-2 space-y-6 sm:space-y-8">
        <!-- Cart Item 1 -->
        <div class="flex flex-col sm:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-3 sm:p-4 shadow-md
          dark:border dark:border-blue-600/50 dark:hover:shadow-blue-500/40 transition-all duration-300 hover:shadow-lg">
          <img src="https://picsum.photos/seed/item1/150/150" alt="Product Image" class="w-24 h-24 sm:w-32 sm:h-32 rounded-md object-cover mr-4 sm:mr-6 flex-shrink-0 border border-blue-300 dark:border-blue-500 shadow-md">
          <div class="flex-grow text-center sm:text-left mt-3 sm:mt-0">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">
              Ergonomic Wireless Mouse
            </h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Color: Midnight Blue</p>
            <div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-800 dark:text-gray-200">
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                -
              </button>
              <span class="font-medium text-lg">1</span>
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                +
              </button>
              <span class="ml-4 text-basesm:text-lg font-bold text-gray-900 dark:text-gray-100">$49.99</span>
            </div>
          </div>
          <button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1 glow-on-hover">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m7 4v6m-4-6v6m4-6v6M6 7V4a1 1 0 011-1h10a1 1 0 011 1v3M4 7h16"></path>
            </svg>
          </button>
        </div>

        <!-- Cart Item 2 -->
        <div class="flex flex-col sm:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-3 sm:p-4 shadow-md
          dark:border dark:border-blue-600/50 dark:hover:shadow-blue-500/40 transition-all duration-300 hover:shadow-lg">
          <img src="https://picsum.photos/seed/item2/150/150" alt="Product Image" class="w-24 h-24 sm:w-32 sm:h-32 rounded-md object-cover mr-4 sm:mr-6 flex-shrink-0 border border-blue-300 dark:border-blue-500 shadow-md">
          <div class="flex-grow text-center sm:text-left mt-3 sm:mt-0">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Premium USB-C Hub</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Ports: 7-in-1</p>
            <div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-800 dark:text-gray-200">
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                -
              </button>
              <span class="font-medium text-lg">2</span>
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                +
              </button>
              <span class="ml-4 text-basesm:text-lg font-bold text-gray-900 dark:text-gray-100">$75.00</span>
            </div>
          </div>
          <button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1 glow-on-hover">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m7 4v6m-4-6v6m4-6v6M6 7V4a1 1 0 011-1h10a1 1 0 011 1v3M4 7h16"></path>
            </svg>
          </button>
        </div>

        <!-- Cart Item 3 -->
        <div class="flex flex-col sm:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-3 sm:p-4 shadow-md
          dark:border dark:border-blue-600/50 dark:hover:shadow-blue-500/40 transition-all duration-300 hover:shadow-lg">
          <img src="https://picsum.photos/seed/item3/150/150" alt="Product Image" class="w-24 h-24 sm:w-32 sm:h-32 rounded-md object-cover mr-4 sm:mr-6 flex-shrink-0 border border-blue-300 dark:border-blue-500 shadow-md">
          <div class="flex-grow text-center sm:text-left mt-3 sm:mt-0">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Noise-Cancelling Headphones</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Model: ProAudio 3000</p>
            <div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-800 dark:text-gray-200">
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                -
              </button>
              <span class="font-medium text-lg">1</span>
              <button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
              text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
                +
              </button>
              <span class="ml-4 text-basesm:text-lg font-bold text-gray-900 dark:text-gray-100">$199.99</span>
            </div>
          </div>
          <button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1 glow-on-hover">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m7 4v6m-4-6v6m4-6v6M6 7V4a1 1 0 011-1h10a1 1 0 011 1v3M4 7h16"></path>
            </svg>
          </button>
        </div>

        <div class="flex justify-between items-center mt-6">
          <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 flex items-center space-x-2 transition-colors duration-200
            py-2 px-4 rounded-lg border border-blue-400 dark:border-blue-700 hover:bg-blue-50 dark:hover:bg-blue-900 glow-on-hover">
            <svg class="w-5 h-5" 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="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
            <span>Continue Shopping</span>
          </button>
          <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 flex items-center space-x-2 transition-colors duration-200
            py-2 px-4 rounded-lg border border-red-400 dark:border-red-700 hover:bg-red-50 dark:hover:bg-red-900 glow-on-hover">
            <svg class="w-5 h-5" 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m7 4v6m-4-6v6m4-6v6M6 7V4a1 1 0 011-1h10a1 1 0 011 1v3M4 7h16"/>
            </svg>
            <span>Clear Cart</span>
          </button>
        </div>
      </div>

      <!-- Order Summary -->
      <div class="lg:col-span-1 bg-gray-50 dark:bg-gray-700 rounded-lg p-4 sm:p-6 shadow-xl
        dark:border dark:border-blue-600/50 dark:shadow-blue-500/30
        relative overflow-hidden before:content-[''] before:absolute before:inset-0 before:bg-blue-500/10 before:blur-md before:animate-pulse-light">
        <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 sm:mb-6 leading-tight relative">Order Summary</h3>
        <div class="space-y-3 sm:space-y-4 text-lg text-gray-800 dark:text-gray-200 relative z-10">
          <div class="flex justify-between items-center">
            <span>Subtotal (4 items)</span>
            <span class="font-semibold">$400.00</span>
          </div>
          <div class="flex justify-between items-center">
            <span>Shipping</span>
            <span class="font-semibold">$15.00</span>
          </div>
          <div class="flex justify-between items-center">
            <span>Tax (8%)</span>
            <span class="font-semibold">$32.00</span>
          </div>
          <div class="h-px bg-gray-300 dark:bg-gray-600 my-4"></div>
          <div class="flex justify-between items-center font-bold text-xl sm:text-2xl text-blue-700 dark:text-blue-300">
            <span>Total</span>
            <span>$447.00</span>
          </div>
        </div>
        <button class="mt-6 w-full py-3 px-6 rounded-lg text-white font-bold text-lg sm:text-xl
          bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800
          focus:outline-none focus:ring-4 focus:ring-blue-500/50 dark:focus:ring-blue-400/50
          transition-all duration-300 transform hover:scale-105 shadow-lg border border-blue-700 dark:border-blue-900
          relative overflow-hidden glowing-button">
          Proceed to Checkout
          <span class="absolute top-0 left-0 w-full h-full bg-blue-500 opacity-0 animate-pulse-effect"></span>
        </button>
        <p class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400 relative z-10">
          Shipping calculated at next step.
        </p>
      </div>
    </div>
  </div>

  <!-- Tailwind JIT / Custom styles for glow effects -->
  <style>
    @keyframes pulse-slow {
      0%, 100% { opacity: 0.1; }
      50% { opacity: 0.3; }
    }
    @keyframes pulse-light {
      0%, 100% { opacity: 0.05; }
      50% { opacity: 0.15; }
    }
    @keyframes button-glow {
      0%, 100% { box-shadow: 0 0 5px var(--glow-color), 0 0 10px var(--glow-color), 0 0 15px var(--glow-color); }
      50% { box-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color), 0 0 30px var(--glow-color); }
    }
    @keyframes text-shadow-glow {
      0%, 100% { text-shadow: 0 0 2px rgba(255,255,255,0.7), 0 0 5px rgba(255,255,255,0.5); }
      50% { text-shadow: 0 0 3px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.7); }
    }
    @keyframes pulse-effect {
      0% { transform: scale(0); opacity: 0.5; }
      100% { transform: scale(1); opacity: 0; }
    }

    .animate-pulse-slow { animation: pulse-slow 5s infinite ease-in-out; }
    .animate-pulse-light { animation: pulse-light 4s infinite ease-in-out; }
    .text-shadow-lg { text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
    .dark .text-shadow-lg { text-shadow: 0 2px 4px rgba(0,0,0,0.4); }

    .dark .text-shadow-glow {
      text-shadow: 0 0 5px #60A5FA, 0 0 10px #3B82F6;
      animation: text-shadow-glow 3s infinite alternate;
    }
    .glowing-button {
      --glow-color: #3B82F6;
      transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
    }
    .dark .glowing-button {
      --glow-color: #60A5FA;
      box-shadow: 0 0 5px var(--glow-color), 0 0 10px var(--glow-color) !important;
    }
    .glowing-button:hover {
      box-shadow: 0 0 8px var(--glow-color), 0 0 15px var(--glow-color), 0 0 25px var(--glow-color) !important;
    }
    .dark .glowing-button:hover {
      box-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color), 0 0 30px var(--glow-color) !important;
    }
    .glowing-button:focus {
        box-shadow: 0 0 0 4px var(--glow-color), 0 0 10px var(--glow-color) !important;
    }

    .glow-on-hover {
      transition: box-shadow 0.3s, background-color 0.3s;
    }
    .glow-on-hover:hover {
      box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
    }
    .dark .glow-on-hover:hover {
      box-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
    }

    .glowing-lines {
      pointer-events: none;
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: radial-gradient(circle at top left, transparent 50%, rgba(59, 130, 246, 0.2) 70%, transparent 80%),
                  radial-gradient(circle at bottom right, transparent 50%, rgba(59, 130, 246, 0.2) 70%, transparent 80%);
      filter: blur(10px);
      opacity: 0.6;
      animation: glowing-lines-effect 8s infinite alternate;
    }
    .dark .glowing-lines {
      background: radial-gradient(circle at top left, transparent 50%, rgba(96, 165, 250, 0.2) 70%, transparent 80%),
                  radial-gradient(circle at bottom right, transparent 50%, rgba(96, 165, 250, 0.2) 70%, transparent 80%);
    }
    @keyframes glowing-lines-effect {
      0% { transform: scale(1); opacity: 0.6; }
      50% { transform: scale(1.02); opacity: 0.7; }
      100% { transform: scale(1); opacity: 0.6; }
    }
    .animate-pulse-effect {
      animation: pulse-effect 1.5s infinite;
    }
  </style>
</div>

Job_Application_Data_Table

Un componente de tabla de datos interactivo y con capacidad de respuesta para aplicaciones de trabajo, diseñado con un estilo tipográfico suizo/internacional limpio y minimalista y una combinación de colores apagados. Incluye filtrado, ordenación, paginación y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">
  <div class="max-w-full mx-auto bg-white dark:bg-gray-850 shadow-lg rounded-lg overflow-hidden ring-1 ring-gray-200 dark:ring-gray-700">
    <div class="px-4 py-5 sm:px-6 flex flex-col sm:flex-row items-center justify-between border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-xl sm:text-2xl font-semibold leading-6 text-gray-900 dark:text-gray-100 mb-4 sm:mb-0">Job Applications</h2>
      <div class="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
        <div class="relative w-full sm:w-64">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
            </svg>
          </div>
          <input type="text" name="search" id="search" class="block w-full rounded-md border-0 py-1.5 pl-10 pr-3 text-gray-900 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-400 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-500 dark:focus:ring-blue-400 sm:text-sm sm:leading-6" placeholder="Search...">
        </div>
        <button type="button" class="inline-flex items-center gap-x-1.5 rounded-md bg-gray-100 dark:bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-200 dark:hover:bg-gray-600">
          <svg class="-ml-0.5 h-5 w-5 text-gray-600 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M2.628 1.601C5.817 1.025 9.045 1 12.25 1h.062c3.21.002 6.425.042 9.619.117a.75.75 0 01.554.757l-.002.001c-.137 1.833-.217 3.666-.217 5.5V14.5c0 1.25.792 2.38 1.95 2.76A.75.75 0 0024 17.5V19c0 .828-.672 1.5-1.5 1.5H1.5C.672 20.5 0 19.828 0 19v-1.5a.75.75 0 00-.75-.75L-.75 2.5a.75.75 0 01.75-.75c.148 0 .292.016.435.045l.002-.001c.137-1.833.217-3.666.217-5.5V5.5c0-.828.672-1.5 1.5-1.5h17c.828 0 1.5.672 1.5 1.5v2c0 .828-.672 1.5-1.5 1.5H4.25c-.828 0-1.5.672-1.5 1.5v2c0 .828.672 1.5 1.5 1.5H8.75c.828 0 1.5.672 1.5 1.5v2c0 .828-.672 1.5-1.5 1.5H2.628z" clip-rule="evenodd" />
            <path d="M8.25 12a.75.75 0 00-.75.75v1.5a.75.75 0 00.75.75h3.5a.75.75 0 00.75-.75v-1.5a.75.75 0 00-.75-.75H8.25z" />
          </svg>
          Filter
        </button>
      </div>
    </div>
    <div class="-mx-4 sm:-mx-6 lg:-mx-8 overflow-x-auto">
      <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
        <table class="min-w-full divide-y divide-gray-300 dark:bg-gray-850 dark:divide-gray-700">
          <thead class="bg-gray-50 dark:bg-gray-800">
            <tr>
              <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-100 sm:pl-0">
                <a href="#" class="group inline-flex">
                  Applicant
                  <span class="ml-2 flex-none rounded bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-200 group-hover:bg-gray-300 dark:group-hover:bg-gray-600">
                    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.25 9.5a.75.75 0 011.1 1.02L10 15.148l2.7-2.908a.75.75 0 011.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.55-.24z" clip-rule="evenodd" />
                    </svg>
                  </span>
                </a>
              </th>
              <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">
                <a href="#" class="group inline-flex">
                  Role Applied For
                  <span class="ml-2 flex-none rounded bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-200 group-hover:bg-gray-300 dark:group-hover:bg-gray-600 invisible group-hover:visible group-asc:visible group-desc:visible">
                    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.25 9.5a.75.75 0 011.1 1.02L10 15.148l2.7-2.908a.75.75 0 011.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.55-.24z" clip-rule="evenodd" />
                    </svg>
                  </span>
                </a>
              </th>
              <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">
                <a href="#" class="group inline-flex">
                  Status
                  <span class="ml-2 flex-none rounded bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-200 group-hover:bg-gray-300 dark:group-hover:bg-gray-600 invisible group-hover:visible group-asc:visible group-desc:visible">
                    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.25 9.5a.75.75 0 011.1 1.02L10 15.148l2.7-2.908a.75.75 0 011.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.55-.24z" clip-rule="evenodd" />
                    </svg>
                  </span>
                </a>
              </th>
              <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100 hidden md:table-cell">
                <a href="#" class="group inline-flex">
                  Submission Date
                  <span class="ml-2 flex-none rounded bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-200 group-hover:bg-gray-300 dark:group-hover:bg-gray-600 invisible group-hover:visible group-asc:visible group-desc:visible">
                    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.25 9.5a.75.75 0 011.1 1.02L10 15.148l2.7-2.908a.75.75 0 011.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.55-.24z" clip-rule="evenodd" />
                    </svg>
                  </span>
                </a>
              </th>
              <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-0">
                <span class="sr-only">Actions</span>
              </th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
            <tr>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-0">
                <div class="flex items-center">
                  <div class="h-10 w-10 flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
                  </div>
                  <div class="ml-4">
                    <div class="font-medium text-gray-900 dark:text-gray-100">Jane Cooper</div>
                    <div class="text-gray-500 dark:text-gray-400">[email protected]</div>
                  </div>
                </div>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">Senior Software Engineer</td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                <span class="inline-flex items-center rounded-md bg-yellow-50 dark:bg-yellow-900/20 px-2 py-1 text-xs font-medium text-yellow-800 dark:text-yellow-400 ring-1 ring-inset ring-yellow-600/20 dark:ring-yellow-800/30">Pending Review</span>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">2023-11-15</td>
              <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">View<span class="sr-only">, Jane Cooper</span></a>
              </td>
            </tr>
            <tr>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-0">
                <div class="flex items-center">
                  <div class="h-10 w-10 flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                  </div>
                  <div class="ml-4">
                    <div class="font-medium text-gray-900 dark:text-gray-100">John Doe</div>
                    <div class="text-gray-500 dark:text-gray-400">[email protected]</div>
                  </div>
                </div>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">Product Manager</td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                <span class="inline-flex items-center rounded-md bg-green-50 dark:bg-green-900/20 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400 ring-1 ring-inset ring-green-600/20 dark:ring-green-800/30">Interview Scheduled</span>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">2023-11-10</td>
              <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">View<span class="sr-only">, John Doe</span></a>
              </td>
            </tr>
            <tr>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-0">
                <div class="flex items-center">
                  <div class="h-10 w-10 flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/7.jpg" alt="">
                  </div>
                  <div class="ml-4">
                    <div class="font-medium text-gray-900 dark:text-gray-100">Alice Smith</div>
                    <div class="text-gray-500 dark:text-gray-400">[email protected]</div>
                  </div>
                </div>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">UI/UX Designer</td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                <span class="inline-flex items-center rounded-md bg-gray-50 dark:bg-gray-700/20 px-2 py-1 text-xs font-medium text-gray-600 dark:text-gray-400 ring-1 ring-inset ring-gray-500/10 dark:ring-gray-600/30">Application Received</span>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">2023-11-18</td>
              <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">View<span class="sr-only">, Alice Smith</span></a>
              </td>
            </tr>
            <tr>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-0">
                <div class="flex items-center">
                  <div class="h-10 w-10 flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/50.jpg" alt="">
                  </div>
                  <div class="ml-4">
                    <div class="font-medium text-gray-900 dark:text-gray-100">Robert Brown</div>
                    <div class="text-gray-500 dark:text-gray-400">[email protected]</div>
                  </div>
                </div>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">Software Development Intern</td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                <span class="inline-flex items-center rounded-md bg-red-50 dark:bg-red-900/20 px-2 py-1 text-xs font-medium text-red-700 dark:text-red-400 ring-1 ring-inset ring-red-600/20 dark:ring-red-800/30">Rejected</span>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">2023-10-25</td>
              <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">View<span class="sr-only">, Robert Brown</span></a>
              </td>
            </tr>
            <tr>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-0">
                <div class="flex items-center">
                  <div class="h-10 w-10 flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/22.jpg" alt="">
                  </div>
                  <div class="ml-4">
                    <div class="font-medium text-gray-900 dark:text-gray-100">Emily White</div>
                    <div class="text-gray-500 dark:text-gray-400">[email protected]</div>
                  </div>
                </div>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">Marketing Specialist</td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                <span class="inline-flex items-center rounded-md bg-green-50 dark:bg-green-900/20 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400 ring-1 ring-inset ring-green-600/20 dark:ring-green-800/30">Interview Scheduled</span>
              </td>
              <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">2023-11-01</td>
              <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">View<span class="sr-only">, Emily White</span></a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <nav class="flex items-center justify-between border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-850 px-4 py-3 sm:px-6" aria-label="Pagination">
      <div class="hidden sm:block">
        <p class="text-sm text-gray-700 dark:text-gray-300">
          Showing
          <span class="font-medium">1</span>
          to
          <span class="font-medium">5</span>
          of
          <span class="font-medium">12</span>
          results
        </p>
      </div>
      <div class="flex flex-1 justify-between sm:justify-end gap-2">
        <a href="#" class="relative inline-flex items-center rounded-md bg-white dark:bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 focus-visible:outline-offset-0">
          Previous
        </a>
        <a href="#" class="relative inline-flex items-center rounded-md bg-white dark:bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 focus-visible:outline-offset-0">
          Next
        </a>
      </div>
    </nav>
  </div>
</div>

Componente CAPTCHA

Un componente CAPTCHA limpio y minimalista con un estilo de diseño de tipografía suiza/internacional, con tonos océano/azules. Diseñado para sitios web de eventos y conferencias, es responsivo e incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] dark:border dark:border-gray-700">
    <div class="p-6 sm:p-8 space-y-6">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-blue-800 dark:text-blue-300 text-center">
        Verify Humanity
      </h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 text-center leading-relaxed">
        To proceed, please complete the security check below.
      </p>

      <div class="space-y-4">
        <!-- CAPTCHA Main Area -->
        <div class="p-4 bg-blue-50 dark:bg-gray-700 rounded-md border border-blue-200 dark:border-gray-600 shadow-inner flex flex-col items-center justify-center min-h-[140px] relative">
          <!-- Loading/Placeholder state -->
          <div class="absolute inset-0 flex items-center justify-center bg-blue-50 dark:bg-gray-700 rounded-md z-0 opacity-100 transition-opacity duration-300" id="captcha_loading_state">
            <div class="w-8 h-8 border-4 border-blue-400 border-t-transparent rounded-full animate-spin"></div>
            <span class="ml-3 text-blue-600 dark:text-blue-400 text-sm">Loading CAPTCHA...</span>
          </div>

          <!-- Simulated CAPTCHA content (initially hidden) -->
          <div class="flex flex-col items-center justify-center space-y-4 opacity-0 transition-opacity duration-300" id="captcha_content_state">
            <img src="https://picsum.photos/seed/captcha/300/100" alt="Image CAPTCHA" class="w-full max-w-[300px] h-auto rounded-sm border border-gray-300 dark:border-gray-500 shadow-sm">
            <p class="text-sm text-gray-700 dark:text-gray-300 font-medium">What do you see in the image?</p>
            <input type="text" placeholder="Enter text here" class="w-full p-2.5 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white text-base transition-all duration-200">
          </div>
        </div>

        <!-- Refresh/Audio Buttons -->
        <div class="flex justify-between items-center gap-2">
          <button class="flex-1 py-2 px-4 rounded-md border border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-gray-700 transition-colors duration-200 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
            <svg class="inline-block w-4 h-4 mr-1 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12c0 2.21.823 4.239 2.207 5.768m0-11.536c1.384-1.529 3.314-2.207 5.346-2.207 4.493 0 8.002 3.614 8.002 8s-3.509 8-8.002 8c-2.21 0-4.239-.823-5.768-2.207m0-11.536H16h-4" /></svg>
            Refresh
          </button>
          <button class="flex-1 py-2 px-4 rounded-md border border-blue-300 dark:border-blue-600 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-gray-700 transition-colors duration-200 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
            <svg class="inline-block w-4 h-4 mr-1 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.899a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.647 11 4.103 11 5v14c0 .897-.077 1.353-.293 1.586l-4.707-4.707z" /></svg>
            Audio
          </button>
        </div>
      </div>

      <!-- Submit Button -->
      <button class="w-full flex justify-center items-center py-3 px-6 border border-transparent rounded-md shadow-sm text-base font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-offset-gray-800 transition-colors duration-200">
        Verify
        <svg class="w-5 h-5 ml-2 -mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
      </button>

      <p class="text-xs text-gray-500 dark:text-gray-400 text-center leading-snug pt-2">
        This site is protected by reCAPTCHA and the Google
        <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Privacy Policy</a> and
        <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Terms of Service</a> apply.
      </p>
    </div>
  </div>
</div>

<script>
  // Simulate CAPTCHA loading
  document.addEventListener('DOMContentLoaded', () => {
    const loadingState = document.getElementById('captcha_loading_state');
    const contentState = document.getElementById('captcha_content_state');

    setTimeout(() => {
      loadingState.classList.add('opacity-0');
      loadingState.classList.remove('z-0');
      loadingState.classList.add('z-10');
      contentState.classList.remove('opacity-0');
      contentState.classList.add('opacity-100');
    }, 1500);
  });
</script>

Componente de formulario de pago lúdico

Un componente de formulario de pago simple, divertido y receptivo con elementos redondeados y colores apagados, adecuado para plataformas de trabajo/carrera. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-gradient-to-br from-indigo-50 to-blue-50 dark:from-gray-900 dark:to-blue-950 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-gray-100 dark:border-gray-700">
    <div class="p-6 sm:p-8">
      <div class="text-center mb-6 sm:mb-8">
        <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-600 dark:text-blue-400 mb-2 font-['Inter',sans-serif]">Yay! Let's Get Started</h2>
        <p class="text-gray-500 dark:text-gray-400 text-lg sm:text-xl">Complete your registration</p>
      </div>

      <form class="space-y-5 sm:space-y-6">
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>
          <input type="text" id="full-name" placeholder="Jane Doe" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
        </div>

        <div>
          <label for="email-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
          <input type="email" id="email-address" placeholder="[email protected]" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
          <input type="password" id="password" placeholder="Minimum 8 characters" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
        </div>

        <div>
          <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm Password</label>
          <input type="password" id="confirm-password" placeholder="Repeat your password" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
        </div>

        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 transform transition duration-200 ease-in-out hover:scale-105 active:scale-95">
          <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          Complete Registration!
        </button>
      </form>

      <div class="mt-6 text-center text-sm">
        <p class="text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition duration-150 ease-in-out">Sign In Here!</a></p>
      </div>
    </div>
    <div class="bg-blue-100 dark:bg-gray-900 py-4 px-6 sm:px-8 text-center text-gray-600 dark:text-gray-400 text-sm border-t border-blue-200 dark:border-gray-700">
      <p>&copy; 2023 Your Company. All rights reserved.</p>
    </div>
  </div>
</div>

Earth_Tones_Gradient_Breadcrumb_Navigation

Un componente de navegación de migas de pan complejo y receptivo diseñado para sitios web de noticias/periodismo, con transiciones de degradado terroso y soporte completo para el modo oscuro.

Abrir Vista previa

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse bg-gradient-to-r from-stone-100 via-stone-50 to-amber-50 dark:from-stone-800 dark:via-stone-700 dark:to-amber-950 p-2 sm:p-3 rounded-lg shadow-lg dark:shadow-stone-950/50 transition-all duration-300 ease-in-out">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center text-sm font-medium text-stone-700 hover:text-stone-900 dark:text-stone-300 dark:hover:text-white transition-colors duration-200">
        <svg class="w-4 h-4 me-2.5 text-amber-600 dark:text-amber-400 transition-colors duration-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
        </svg>
        Home
      </a>
    </li>
    <li class="group">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-stone-500 mx-1 transition-colors duration-200 group-hover:text-amber-600 dark:text-stone-400 dark:group-hover:text-amber-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <a href="#" class="ms-1 text-sm font-medium text-stone-700 hover:text-stone-900 md:ms-2 dark:text-stone-300 dark:hover:text-white transition-colors duration-200 group-hover:text-amber-700 dark:group-hover:text-amber-500">
          Categories
        </a>
      </div>
    </li>
    <li class="group">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-stone-500 mx-1 transition-colors duration-200 group-hover:text-amber-600 dark:text-stone-400 dark:group-hover:text-amber-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <a href="#" class="ms-1 text-sm font-medium text-stone-700 hover:text-stone-900 md:ms-2 dark:text-stone-300 dark:hover:text-white transition-colors duration-200 group-hover:text-amber-700 dark:group-hover:text-amber-500">
          Politics
        </a>
      </div>
    </li>
    <li aria-current="page" class="group">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-stone-500 mx-1 transition-colors duration-200 group-hover:text-amber-600 dark:text-stone-400 dark:group-hover:text-amber-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <span class="ms-1 text-sm font-semibold text-amber-800 md:ms-2 dark:text-amber-300 transition-colors duration-200 group-hover:text-amber-900 dark:group-hover:text-amber-200">
          Current Affairs Article Title
        </span>
      </div>
    </li>
  </ol>
</nav>

Luxury_Premium_Manufacturing_Data_Table

Un componente de tabla de datos complejo y receptivo para uso industrial/de fabricación, con un diseño de lujo/premium con un esquema de color en blanco y negro y un solo color de acento brillante. Incluye soporte para modo oscuro y elementos interactivos.

Abrir Vista previa

                <div class="font-sans antialiased text-gray-800 bg-gray-100 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 min-h-screen">

  <!-- Component Header -->
  <div class="mb-6 md:mb-8 flex flex-col md:flex-row items-start md:items-center justify-between">
    <div>
      <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight mb-2 text-gray-900 dark:text-gray-50">Production Line Overview</h1>
      <p class="text-lg text-gray-600 dark:text-gray-400">Real-time data and historical trends for all active manufacturing units.</p>
    </div>
    <div class="mt-4 md:mt-0 flex items-center space-x-3">
      <button class="px-5 py-2.5 bg-indigo-600 text-white dark:bg-indigo-700 hover:bg-indigo-700 dark:hover:bg-indigo-800 transition-colors duration-200 rounded-lg shadow-md font-semibold text-sm flex items-center">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"></path></svg>
        Add New Line
      </button>
      <button class="px-4 py-2.5 border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200 rounded-lg shadow-sm font-semibold text-sm flex items-center">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3zm3 1a1 1 0 00-1 1v1.586l2 2V17h2v-5.586l2-2V5a1 1 0 00-1-1H6z" fill-rule="evenodd"></path></svg>
        Filter
      </button>
    </div>
  </div>

  <!-- Controls and Search -->
  <div class="mb-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-4 flex flex-col sm:flex-row items-center justify-between space-y-3 sm:space-y-0 sm:space-x-4">
    <div class="relative w-full sm:w-1/2 lg:w-1/3">
      <input type="text" placeholder="Search production lines..." class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 outline-none transition-all duration-200">
      <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
    </div>
    <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 w-full sm:w-auto">
      <select class="block w-full sm:w-auto px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-100 appearance-none transition-all duration-200">
        <option>All Status</option>
        <option>Active</option>
        <option>Maintenance</option>
        <option>Idle</option>
      </select>
      <select class="block w-full sm:w-auto px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-gray-50 dark:bg-gray-700 dark:text-gray-100 appearance-none transition-all duration-200">
        <option>Sort by Date</option>
        <option>Sort by Throughput</option>
        <option>Sort by Efficiency</option>
      </select>
    </div>
  </div>

  <!-- Data Table -->
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead class="bg-gray-50 dark:bg-gray-700">
          <tr>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Line ID
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Product
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Status
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Last Updated
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Throughput (Units/Hr)
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Efficiency
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
              Operator
            </th>
            <th scope="col" class="relative px-6 py-3">
              <span class="sr-only">Actions</span>
            </th>
          </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
          <!-- Row 1 -->
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">PL-001</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Medical Gauze</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-3 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">
                Active
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">2023-10-26 14:30</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900 dark:text-gray-100">1,250</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-indigo-600 dark:text-indigo-400 border-l-2 border-indigo-500 dark:border-indigo-600">98.2%</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300 flex items-center">
              <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Operator Avatar">
              Marcus Bell
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <button class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-150">View Details</button>
            </td>
          </tr>

          <!-- Row 2 -->
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">PL-002</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Automotive Sensor</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-3 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">
                Maintenance
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">2023-10-26 10:00</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900 dark:text-gray-100">0</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-500 dark:text-gray-400 border-l-2 border-gray-400 dark:border-gray-500">N/A</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300 flex items-center">
              <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Operator Avatar">
              Sarah Lee
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <button class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-150">View Details</button>
            </td>
          </tr>

          <!-- Row 3 -->
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">PL-003</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Food Packaging</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-3 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">
                Active
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">2023-10-26 15:05</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900 dark:text-gray-100">2,100</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-indigo-600 dark:text-indigo-400 border-l-2 border-indigo-500 dark:border-indigo-600">99.5%</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300 flex items-center">
              <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Operator Avatar">
              David Kim
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <button class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-150">View Details</button>
            </td>
          </tr>

          <!-- Row 4 -->
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">PL-004</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Electronic Components</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-3 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-100">
                Idle
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">2023-10-25 18:00</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900 dark:text-gray-100">0</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-500 dark:text-gray-400 border-l-2 border-gray-400 dark:border-gray-500">N/A</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300 flex items-center">
              <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/7.jpg" alt="Operator Avatar">
              Emily Chen
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <button class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-150">View Details</button>
            </td>
          </tr>

          <!-- Row 5 -->
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">PL-005</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Textile Fabric</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-3 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">
                Active
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">2023-10-26 14:55</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-900 dark:text-gray-100">1,800</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-indigo-600 dark:text-indigo-400 border-l-2 border-indigo-500 dark:border-indigo-600">97.8%</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300 flex items-center">
              <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Operator Avatar">
              Alex Johnson
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <button class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-150">View Details</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    <nav class="px-4 py-3 flex items-center justify-between border-t border-gray-200 dark:border-gray-700 sm:px-6" aria-label="Pagination">
      <div class="flex-1 flex justify-between sm:hidden">
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
          Previous
        </a>
        <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
          Next
        </a>
      </div>
      <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
        <div>
          <p class="text-sm text-gray-700 dark:text-gray-300">
            Showing
            <span class="font-medium">1</span>
            to
            <span class="font-medium">5</span>
            of
            <span class="font-medium">100</span>
            results
          </p>
        </div>
        <div>
          <nav class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
              <span class="sr-only">Previous</span>
              <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="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 dark:bg-indigo-900 dark:border-indigo-600 dark:text-indigo-100 relative inline-flex items-center px-4 py-2 border text-sm font-semibold transition-colors duration-200">
              1
            </a>
            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
              2
            </a>
            <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
              3
            </a>
            <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300">
              ...
            </span>
            <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
              9
            </a>
            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
              10
            </a>
            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
              <span class="sr-only">Next</span>
              <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 10 7.293 6.707a1 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>
        </div>
      </div>
    </nav>
  </div>

</div>

Monospace_Developer_Media_Component

Un componente multimedia complejo y orientado a la educación con un estilo de diseño monoespaciado/desarrollador y una combinación de colores océano/azul, diseñado para plataformas de aprendizaje. Incluye reproducción de medios, fragmentos de código y secciones de contenido estructurado.

Abrir Vista previa

                <div class="font-['Menlo',_Monaco,_Consolas,_'Liberation_Mono',_'Courier_New',_monospace] bg-gray-50 text-blue-900 min-h-screen p-4 dark:bg-gray-900 dark:text-blue-100 transition-colors duration-300">
  <div class="max-w-7xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
    <!-- Header/Title Section -->
    <header class="bg-blue-800 text-white p-4 flex items-center justify-between dark:bg-blue-900">
      <h1 class="text-xl font-bold flex items-center">
        <svg class="w-6 h-6 mr-2 text-blue-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.316 3.051A1 1 0 0113 2v2.247a1 1 0 01-.018.067L10.021 12.5h-2.11C5.698 12.5 5 13.197 5 14s.698 1.5 1.5 1.5h1.968l-3.328 3.328A1 1 0 016.328 20L9 17.328l3.328 3.328A1 1 0 0113.672 20L11 17.328l3.672-3.672A1 1 0 0115 13c-.001-.01-.004-.019-.009-.028-.684-1.12-1.921-1.872-3.327-1.977l.006-8.084zM10 5.25v6.5h-2.25v-6.5zm-3 3.5v-3.5h-1.5v3.5zm6 0v-3.5h1.5v3.5zM12 7.75v3.5h1.5v-3.5zm-3 3.5v-3.5h-1.5v3.5z" clip-rule="evenodd"></path></svg>
        Module: Introduction to Data Structures
      </h1>
      <div class="flex space-x-3">
        <button class="px-3 py-1 bg-blue-700 rounded text-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Download Resources</button>
        <button class="px-3 py-1 bg-blue-700 rounded text-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Mark Complete</button>
      </div>
    </header>

    <!-- Main Content Area -->
    <div class="md:flex">
      <!-- Left Column: Video Player & Description -->
      <section class="md:w-3/5 p-6 border-r border-blue-100 dark:border-blue-700">
        <div class="aspect-w-16 aspect-h-9 bg-black rounded overflow-hidden mb-6 border border-blue-500 dark:border-blue-600">
          <iframe class="w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>

        <h2 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-200">Lesson 1: Understanding Arrays</h2>
        <p class="mb-4 leading-relaxed text-gray-700 dark:text-gray-300">
          Arrays are fundamental data structures that store a fixed-size sequential collection of elements of the same type. This lesson covers their basic definition, memory allocation, and common operations like initialization, accessing elements, and basic traversal.
        </p>
        \div class="text-sm text-gray-600 dark:text-gray-400 mb-6">
          <p>Published: <time datetime="2023-10-26">October 26, 2023</time></p>
          <p>Instructor: Dr. Alice Smith</p>
        </div">

        <!-- Key Concepts Section -->
        <article class="border-t border-b border-blue-200 py-6 mb-6 dark:border-blue-700">
          <h3 class="text-xl font-semibold mb-4 text-blue-800 dark:text-blue-200">Key Concepts</h3>
          <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 marker:text-blue-600 dark:marker:text-blue-400">
            <li class="mb-2">Definition of an array and its contiguous memory allocation.</li>
            <li class="mb-2">Indexing: zero-based vs. one-based.</li>
            <li class="mb-2">Common operations: declaration, initialization, element access, and update.</li>
            <li>Distinction between static and dynamic arrays.</li>
          </ul>
        </article>

        <!-- Further Reading -->
        <article>
          <h3 class="text-xl font-semibold mb-4 text-blue-800 dark:text-blue-200">Further Reading</h3>
          <ul class="space-y-3">
            <li><a href="#" class="flex items-center text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors"><svg class="w-4 h-4 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg> Wikipedia: Array Data Structure</a></li>
            <li><a href="#" class="flex items-center text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors"><svg class="w-4 h-4 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg> GeeksforGeeks: Arrays</a></li>
          </ul>
        </article>
      </section>

      <!-- Right Column: Code Snippets, Q&A, and Navigation -->
      <aside class="md:w-2/5 p-6 bg-blue-50 dark:bg-gray-850">
        <!-- Code Snippet Section -->
        <div class="mb-6">
          <h3 class="text-xl font-semibold mb-3 text-blue-800 dark:text-blue-200">Code Example: Array Initialization (Python)</h3>
          <pre class="bg-blue-900 text-blue-50 p-4 rounded-md text-sm overflow-x-auto dark:bg-gray-950 dark:text-gray-100 border border-blue-700 dark:border-blue-700">
            <code class="language-python">
# Declaring and initializing an array
my_array = [10, 20, 30, 40, 50]

# Accessing an element
print(f"First element: {my_array[0]}") # Output: 10

# Iterating through an array
for element in my_array:
    print(element)
            </code>
          </pre>
        </div>

        <!-- Table of Contents / Navigation -->
        <nav class="mb-6">
          <h3 class="text-xl font-semibold mb-3 text-blue-800 dark:text-blue-200">Module Navigation</h3>
          <ul class="space-y-2">
            <li><a href="#" class="block p-3 bg-blue-100 rounded hover:bg-blue-200 text-blue-800 font-medium dark:bg-blue-700 dark:hover:bg-blue-600 dark:text-blue-100 transition-colors"><span class="mr-2 text-blue-600 dark:text-blue-200">&#9658;</span> Lesson 1: Understanding Arrays <span class="text-xs text-blue-500 dark:text-blue-300 ml-2">(Current)</span></a></li>
            <li><a href="#" class="block p-3 rounded hover:bg-blue-100 text-gray-700 dark:text-gray-300 dark:hover:bg-blue-700 dark:hover:text-blue-100 transition-colors"><span class="mr-2 text-gray-400 dark:text-blue-500">&#9658;</span> Lesson 2: Array Operations</a></li>
            <li><a href="#" class="block p-3 rounded hover:bg-blue-100 text-gray-700 dark:text-gray-300 dark:hover:bg-blue-700 dark:hover:text-blue-100 transition-colors"><span class="mr-2 text-gray-400 dark:text-blue-500">&#9658;</span> Lesson 3: Multidimensional Arrays</a></li>
            <li><a href="#" class="block p-3 rounded hover:bg-blue-100 text-gray-700 dark:text-gray-300 dark:hover:bg-blue-700 dark:hover:text-blue-100 transition-colors"><span class="mr-2 text-gray-400 dark:text-blue-500">&#9658;</span> Quiz: Array Fundamentals</a></li>
          </ul>
        </nav>

        <!-- Instructor Profile -->
        <div class="bg-white rounded-lg shadow-sm p-4 text-center dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
          <h3 class="text-xl font-semibold mb-4 text-blue-800 dark:text-blue-200">Instructor Info</h3>
          <img class="w-24 h-24 rounded-full mx-auto mb-3 border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Instructor Alice Smith">
          <p class="text-lg font-bold text-blue-800 dark:text-blue-200">Dr. Alice Smith</p>
          <p class="text-xs text-gray-600 dark:text-gray-400 mb-3">Lead Data Scientist & Adjunct Professor</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Specializing in algorithms and complex data structures. Passionate about making computer science accessible.</p>
        </div>
      </aside>
    </div>

    <!-- Comments/Questions Section (Placeholder) -->
    <section class="bg-blue-50 p-6 border-t border-blue-100 dark:bg-gray-850 dark:border-blue-700">
      <h2 class="text-2xl font-bold mb-4 text-blue-800 dark:text-blue-200">Questions & Discussion</h2>
      <div class="bg-white rounded-lg p-4 shadow-sm dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
        <p class="text-gray-700 dark:text-gray-300">No questions yet. Be the first to ask!</p>
        <button class="mt-4 px-4 py-2 bg-blue-700 text-white rounded hover:bg-blue-600 dark:bg-blue-800 dark:hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Ask a Question</button>
      </div>
    </section>

    <!-- Footer -->
    <footer class="bg-blue-800 text-white p-4 text-center text-sm dark:bg-blue-900">
      &copy; 2023 Learning Platform. All rights reserved.
    </footer>
  </div>
</div>

Componente de Visualización de Datos - Agricultura Industrial

Un componente de visualización de datos con una estética industrial y cruda, que utiliza un esquema de color púrpura / violeta, adecuado para sitios web de agricultura y ganadería. Muestra métricas clave en un diseño responsivo con soporte para modo oscuro.

Abrir Vista previa

                <section class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="max-w-7xl mx-auto space-y-8">
    
    <div class="text-center">
      <h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-purple-800 dark:text-purple-400 mb-2 tracking-tight uppercase">
        Farm Analytics Dashboard
      </h1>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 max-w-2xl mx-auto">
        Real-time insights for optimized agricultural operations.
      </p>
    </div>

    
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg overflow-hidden relative group transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
        <div class="p-6">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Soil Moisture</h3>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">68%</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center mt-2">
            <svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 110-2h4a1 1 0 011 1v4a1 1 0 11-2 0V4.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
            <span class="text-green-500 font-medium">+3%</span> last 24h
          </p>
        </div>
        <div class="absolute inset-x-0 bottom-0 h-1 bg-purple-500 dark:bg-purple-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
      </div>

      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg overflow-hidden relative group transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
        <div class="p-6">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Air Temperature</h3>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">24°C</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center mt-2">
            <svg class="w-4 h-4 mr-1 text-red-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414L9.414 17H13a1 1 0 110 2H9a1 1 0 01-1-1v-4a1 1 0 112 0v1.586l5.293-5.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
            <span class="text-red-500 font-medium">-1°C</span> last hour
          </p>
        </div>
        <div class="absolute inset-x-0 bottom-0 h-1 bg-purple-500 dark:bg-purple-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
      </div>

      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg overflow-hidden relative group transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
        <div class="p-6">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Yield Forecast</h3>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">+15%</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center mt-2">
            <svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 110-2h4a1 1 0 011 1v4a1 1 0 11-2 0V4.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
            <span class="text-green-500 font-medium">Expected</span> growth
          </p>
        </div>
        <div class="absolute inset-x-0 bottom-0 h-1 bg-purple-500 dark:bg-purple-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
      </div>

      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg overflow-hidden relative group transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
        <div class="p-6">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Water Usage</h3>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">3500L</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center mt-2">
            <svg class="w-4 h-4 mr-1 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 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            <span class="text-yellow-500 font-medium">Steady</span> daily
          </p>
        </div>
        <div class="absolute inset-x-0 bottom-0 h-1 bg-purple-500 dark:bg-purple-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
      </div>
    </div>

    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      
      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg p-6 relative overflow-hidden">
        <h3 class="text-xl font-semibold text-purple-700 dark:text-purple-300 mb-4">Historical Data Trends</h3>
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-violet-700 dark:from-purple-600 dark:to-violet-800 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
        <div class="relative z-10">
          <img src="https://picsum.photos/700/300?random=1" alt="Placeholder chart for historical trends" class="object-cover w-full h-auto rounded-md border border-gray-200 dark:border-gray-700 aspect-[7/3] dark:opacity-80">
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-3">Insights on growth performance over the past quarter.</p>
        </div>
      </div>

      
      <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg p-6 relative overflow-hidden">
        <h3 class="text-xl font-semibold text-purple-700 dark:text-purple-300 mb-4">Crop Health Status</h3>
        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-violet-700 dark:from-purple-600 dark:to-violet-800 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
        <div class="relative z-10">
          <div class="flex flex-col sm:flex-row items-center gap-4">
            <img src="https://picsum.photos/150/150?random=2" alt="Healthy crop placeholder" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-full border-4 border-green-500 shadow-md dark:border-green-600">
            <ul class="flex-1 text-gray-700 dark:text-gray-300 leading-relaxed">
              <li class="flex items-center mb-1"><span class="w-2 h-2 mr-2 bg-green-500 rounded-full"></span> All fields showing optimal growth.</li>
              <li class="flex items-center mb-1"><span class="w-2 h-2 mr-2 bg-yellow-500 rounded-full"></span> Minor nutrient variance in Sector B.</li>
              <li class="flex items-center"><span class="w-2 h-2 mr-2 bg-red-500 rounded-full"></span> No critical health alerts detected.</li>
            </ul>
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-4">Regular drone scans provide detailed health assessments.</p>
        </div>
      </div>
    </div>

    
    <div class="bg-white dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 rounded-lg shadow-lg p-6 relative overflow-hidden">
      <h3 class="text-xl font-semibold text-purple-700 dark:text-purple-300 mb-4">Resource Allocation Overview</h3>
      <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-purple-500 to-violet-700 dark:from-purple-600 dark:to-violet-800 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
      <div class="relative z-10">
        <div class="flex flex-col md:flex-row gap-6 mb-6">
          <div class="flex-1">
            <h4 class="text-md font-medium text-gray-800 dark:text-gray-200 mb-2">Water Distribution</h4>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 mb-2">
              <div class="bg-purple-600 h-4 rounded-full" style="width: 85%;"></div>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-400">85% of capacity utilized across all zones.</p>
          </div>
          <div class="flex-1">
            <h4 class="text-md font-medium text-gray-800 dark:text-gray-200 mb-2">Equipment Deployment</h4>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 mb-2">
              <div class="bg-violet-600 h-4 rounded-full" style="width: 70%;"></div>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-400">70% of machinery actively deployed or on standby.</p>
          </div>
        </div>
        
        <div class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 rounded-md">
          <h4 class="text-lg font-semibold text-purple-600 dark:text-purple-400 mb-2">Team Activity</h4>
          <ul class="space-y-3">
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Avatar of John Doe" class="w-8 h-8 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600">
                <span>John Doe - Field A Maintenance</span>
              </div>
              <span class="text-sm text-green-600 dark:text-green-400">Active</span>
            </li>
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/66.jpg" alt="Avatar of Jane Smith" class="w-8 h-8 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600">
                <span>Jane Smith - QA Check, Sector C</span>
              </div>
              <span class="text-sm text-yellow-600 dark:text-yellow-400">Paused</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</section>

Luxury_Autumn_Maps_Component

Un componente de mapa elegante y receptivo diseñado para sitios web de viajes y turismo de lujo, con colores otoñales y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="bg-stone-50 dark:bg-stone-950 min-h-screen p-4 sm:p-8 font-serif text-stone-800 dark:text-stone-200 transition-colors duration-300">
  <div class="max-w-7xl mx-auto bg-white dark:bg-stone-900 rounded-3xl shadow-xl overflow-hidden md:flex elevation-200">
    
    <!-- Left Panel: Map Preview -->
    <div class="md:w-3/5 relative min-h-[300px] md:min-h-auto">
      <img src="https://picsum.photos/1200/800/?random=1&blur=2" alt="Map Preview" class="w-full h-full object-cover brightness-90 dark:brightness-75">
      <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent flex items-end p-6 md:p-10">
        <h2 class="text-4xl sm:text-5xl font-bold text-white leading-tight mb-2">
          Explore Hidden Gems
        </h2>
      </div>
      <button class="absolute top-6 right-6 p-3 rounded-full bg-white dark:bg-stone-800 text-stone-700 dark:text-stone-300 shadow-lg hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-4 focus:ring-stone-300 dark:focus:ring-stone-700" aria-label="View Live Map">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h-5v-1h5.381c.217 0 .419-.074.587-.206 1.745-1.229 2.542-3.873 1.282-5.733L7.02 9.083c-.882-1.322-.44-3.109 1.096-3.771 1.764-.784 3.731-.225 4.542 1.411.085.176.136.377.144.584L14.5 12h2.5l-.276-2.76A5 5 0 0013.2 4.14C11.5 1.458 8 1.875 6.07 4.128L3.11 7.24a4.998 4.998 0 00-1.07 4.137l.45 2.25c.162.81.71 1.636 1.44 2.115l.235.155c.677.447 1.503.654 2.316.654H9.75z" />
        </svg>
      </button>
    </div>

    <!-- Right Panel: Location Details & Search -->
    <div class="md:w-2/5 p-6 sm:p-8 md:p-10 flex flex-col justify-between">
      <div>
        <h3 class="text-3xl font-bold text-stone-800 dark:text-stone-100 mb-4">Discover Your Next Adventure</h3>
        <p class="text-stone-600 dark:text-stone-300 leading-relaxed mb-6">
          Uncover curated experiences and stunning destinations. From serene landscapes to bustling cityscapes, find your perfect escape.
        </p>

        <!-- Search Bar -->
        <div class="relative mb-6">
          <input type="text" placeholder="Search locations, landmarks..." class="w-full py-3 pl-12 pr-4 rounded-xl bg-stone-100 dark:bg-stone-800 border border-stone-200 dark:border-stone-700 text-stone-800 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 transition-all duration-200 placeholder:text-stone-400 dark:placeholder:text-stone-500">
          <div class="absolute inset-y-0 left-0 flex items-center pl-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-500 dark:text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
        </div>

        <!-- Featured Locations -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 auto-rows-fr">
          <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-100 dark:border-orange-800 shadow-sm transition-transform hover:scale-[1.02] duration-200">
            <img src="https://picsum.photos/60/60?random=2" alt="Location Image" class="w-10 h-10 rounded-full object-cover mr-3">
            <div>
              <p class="font-semibold text-orange-800 dark:text-orange-200 text-sm">Autumn Peaks</p>
              <p class="text-xs text-orange-600 dark:text-orange-400">Mountains, SCENIC</p>
            </div>
          </div>
          <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-100 dark:border-orange-800 shadow-sm transition-transform hover:scale-[1.02] duration-200">
            <img src="https://picsum.photos/60/60?random=3" alt="Location Image" class="w-10 h-10 rounded-full object-cover mr-3">
            <div>
              <p class="font-semibold text-orange-800 dark:text-orange-200 text-sm">Vineyard Valley</p>
              <p class="text-xs text-orange-600 dark:text-orange-400">WINE, RURAL</p>
            </div>
          </div>
          <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-100 dark:border-orange-800 shadow-sm transition-transform hover:scale-[1.02] duration-200">
            <img src="https://picsum.photos/60/60?random=4" alt="Location Image" class="w-10 h-10 rounded-full object-cover mr-3">
            <div>
              <p class="font-semibold text-orange-800 dark:text-orange-200 text-sm">Lakeside Retreat</p>
              <p class="text-xs text-orange-600 dark:text-orange-400">NATURE, CALM</p>
            </div>
          </div>
          <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-100 dark:border-orange-800 shadow-sm transition-transform hover:scale-[1.02] duration-200">
            <img src="https://picsum.photos/60/60?random=5" alt="Location Image" class="w-10 h-10 rounded-full object-cover mr-3">
            <div>
              <p class="font-semibold text-orange-800 dark:text-orange-200 text-sm">Historic Old Town</p>
              <p class="text-xs text-orange-600 dark:text-orange-400">CITY, CULTURAL</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Call to Action -->
      <div class="mt-8">
        <a href="#" class="inline-flex items-center justify-center w-full px-6 py-3 rounded-xl bg-orange-700 text-white font-semibold tracking-wide hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 transition-colors duration-300 shadow-lg transform hover:-translate-y-0.5 active:translate-y-0 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.727A8 8 0 016.343 5.273L3 9.77v.068a.5.5 0 01-.5.5h-.069l-.16.03a.5.5 0 01-.177.018l-1.077.016a.5.5 0 01-.497-.48l-.001-.01c0-.27.224-.492.497-.492a.5.5 0 01.49-.408l.01-.01.01-.005a.5.5 0 01.372-.09m14.975 1.01a8 8 0 00-11.314-11.314M12 17.5V12h-.01m0 0l-5-5m5 5l5-5" />
          </svg>
          Plan Your Trip Now
        </a>
      </div>
    </div>

  </div>
</div>

Gradient_Forest_Maps_Component

Un componente de mapa simple y receptivo para plataformas educativas, con una paleta de degradados verde bosque y transiciones suaves, con soporte para modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-emerald-50 to-lime-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-500 min-h-screen flex items-center justify-center">
  <div class="max-w-4xl w-full rounded-xl shadow-2xl overflow-hidden bg-white dark:bg-gray-800 transition-colors duration-500 backdrop-blur-sm bg-opacity-80 dark:bg-opacity-80 border border-emerald-200 dark:border-emerald-700">
    <div class="p-6 sm:p-8 lg:p-10 text-center">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-emerald-800 dark:text-emerald-300 mb-4 sm:mb-6 leading-tight transition-colors duration-500">
        Explore Geographic Concepts
      </h2>
      <p class="text-lg sm:text-xl text-emerald-700 dark:text-emerald-400 mb-6 sm:mb-8 transition-colors duration-500">
        Visualize and understand complex geographic data with interactive maps.
      </p>

      <div class="relative w-full h-64 sm:h-80 md:h-96 lg:h-112 rounded-lg overflow-hidden shadow-xl border border-emerald-300 dark:border-emerald-600 group">
        <!-- Placeholder for an interactive map -->
        <img src="https://picsum.photos/1200/800?random=1&blur=2" alt="Placeholder map illustration with abstract geographical features" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 group-focus-within:scale-105 opacity-80 dark:opacity-70" aria-hidden="true">
        <div class="absolute inset-0 bg-gradient-to-br from-emerald-400/30 to-lime-200/30 dark:from-emerald-800/40 dark:to-lime-900/40 flex items-center justify-center p-4 rounded-lg">
          <div class="text-white drop-shadow-lg text-center">
            <p class="text-xl sm:text-2xl font-bold mb-2">Interactive Map Area</p>
            <p class="text-sm sm:text-base">Content for map embedding would go here.</p>
          </div>
        </div>
      </div>

      <div class="mt-8 text-center">
        <a href="#" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full shadow-lg text-white 
        bg-gradient-to-r from-emerald-500 to-lime-600 hover:from-emerald-600 hover:to-lime-700 
        dark:from-emerald-600 dark:to-lime-700 dark:hover:from-emerald-700 dark:hover:to-lime-800 
        transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 focus:ring-offset-white dark:focus:ring-offset-gray-900">
          
          View Course Maps
          <svg class="ml-3 -mr-1 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="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>

1 ... 48 49 50 51 52 ... 282

Categorías

Todos los componentes