Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Industrial_Site_Map_Component

Un componente de mapa del sitio para sitios web de agricultura/ganadería con una estética de diseño industrial, que utiliza neutros cálidos. Cuenta con diseño responsivo, soporte para modo oscuro y secciones de enlaces interactivos.

Abrir Vista previa

                <section class="bg-stone-50 text-stone-800 py-16 dark:bg-stone-900 dark:text-stone-200 transition-colors duration-300">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-12 uppercase tracking-wide border-b-4 border-b-amber-500 pb-4 dark:border-b-amber-600">
      Site Map
    </h2>

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

      <!-- Column 1: Company Info -->
      <div class="bg-white p-8 rounded-lg shadow-xl border-t-4 border-amber-400 dark:bg-stone-800 dark:border-amber-700 transition-all duration-300 transform hover:scale-105">
        <h3 class="text-2xl font-bold mb-6 text-amber-700 dark:text-amber-500 border-b-2 border-stone-200 pb-3 dark:border-stone-700">Our Farm</h3>
        <ul class="space-y-3 ">
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-seedling mr-2 text-amber-500"></i> About Us</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-award mr-2 text-amber-500"></i> Our Heritage</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-tractor mr-2 text-amber-500"></i> Farming Practices</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-users mr-2 text-amber-500"></i> Meet the Team</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-map-marker-alt mr-2 text-amber-500"></i> Contact Us</a></li>
        </ul>
      </div>

      <!-- Column 2: Products & Services -->
      <div class="bg-white p-8 rounded-lg shadow-xl border-t-4 border-amber-400 dark:bg-stone-800 dark:border-amber-700 transition-all duration-300 transform hover:scale-105">
        <h3 class="text-2xl font-bold mb-6 text-amber-700 dark:text-amber-500 border-b-2 border-stone-200 pb-3 dark:border-stone-700">Crops & Goods</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-wheat-alt mr-2 text-amber-500"></i> Grains & Cereals</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-apple-alt mr-2 text-amber-500"></i> Fruits & Vegetables</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-leaf mr-2 text-amber-500"></i> Organic Produce</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-mortar-pestle mr-2 text-amber-500"></i> Processed Goods</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-truck-moving mr-2 text-amber-500"></i> Delivery Services</a></li>
        </ul>
      </div>

      <!-- Column 3: Resources & Insights -->
      <div class="bg-white p-8 rounded-lg shadow-xl border-t-4 border-amber-400 dark:bg-stone-800 dark:border-amber-700 transition-all duration-300 transform hover:scale-105">
        <h3 class="text-2xl font-bold mb-6 text-amber-700 dark:text-amber-500 border-b-2 border-stone-200 pb-3 dark:border-stone-700">Resources</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-newspaper mr-2 text-amber-500"></i> Blog & News</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-book-open mr-2 text-amber-500"></i> Research & Reports</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-cogs mr-2 text-amber-500"></i> Farm Technology</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-question-circle mr-2 text-amber-500"></i> FAQs</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-map mr-2 text-amber-500"></i> Sitemap</a></li>
        </ul>
      </div>

      <!-- Column 4: Legal & Policies -->
      <div class="bg-white p-8 rounded-lg shadow-xl border-t-4 border-amber-400 dark:bg-stone-800 dark:border-amber-700 transition-all duration-300 transform hover:scale-105">
        <h3 class="text-2xl font-bold mb-6 text-amber-700 dark:text-amber-500 border-b-2 border-stone-200 pb-3 dark:border-stone-700">Legal & Privacy</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-file-contract mr-2 text-amber-500"></i> Terms of Service</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-user-shield mr-2 text-amber-500"></i> Privacy Policy</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-cookie-bite mr-2 text-amber-500"></i> Cookie Policy</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-gavel mr-2 text-amber-500"></i> Legal Disclaimer</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-sitemap mr-2 text-amber-500"></i> XML Sitemap</a></li>
        </ul>
      </div>

    </div>

    <div class="mt-16 text-center text-stone-600 dark:text-stone-400">
      <p>&copy; 2023 AgroFarm Inc. All rights reserved. Cultivating the future, responsibly.</p>
    </div>
  </div>
</section>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Componente de caja de luz de imagen

Un componente de caja de luz de imagen simple, receptivo, de estilo glassmorphism, con tonos océano/azul para redes sociales, compatible con el modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-100 via-blue-200 to-blue-300 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4 font-sans">

  <!-- Lightbox Container (visible only when 'open', hidden by default using styling concepts, not direct JS) -->
  <!-- In a real scenario, this would be toggled by JS. For pure HTML/CSS, it's assumed to be 'open' for demonstration. -->
  <!-- To simulate true hidden/shown: display: none initially, display: flex on active class. -->
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-blue-900 bg-opacity-30 dark:bg-black dark:bg-opacity-70 backdrop-blur-sm">
    
    <div class="relative w-full max-w-3xl mx-auto p-4 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-30 rounded-2xl shadow-xl border border-blue-500 border-opacity-30 dark:border-gray-600 dark:border-opacity-30 backdrop-filter backdrop-blur-lg">
      
      <!-- Close Button -->
      <button class="absolute top-3 right-3 text-white hover:text-blue-200 dark:text-gray-300 dark:hover:text-gray-100 text-3xl font-bold transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full w-10 h-10 flex items-center justify-center">
        &times;
      </button>

      <!-- Lightbox Content -->
      <div class="flex flex-col md:flex-row gap-4 items-center">
        
        <!-- Image Area -->
        <div class="w-full md:w-3/5 rounded-lg overflow-hidden border border-blue-400 dark:border-gray-500 shadow-md">
          <img src="https://picsum.photos/800/600?random=1" alt="Full size image" class="w-full h-auto object-cover">
        </div>

        <!-- Details Area -->
        <div class="w-full md:w-2/5 text-white dark:text-gray-200 p-2 md:p-0">
          <h3 class="text-2xl font-semibold mb-2 text-white dark:text-white">Ocean Sunset</h3>
          <p class="text-sm mb-4 text-blue-100 dark:text-gray-300">A breathtaking view of the sunset over the serene ocean. Captured during my recent trip, truly mesmerizing.</p>

          <!-- User Info -->
          <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-blue-300 dark:border-gray-400">
            <div>
              <p class="font-medium text-blue-50 dark:text-gray-100">Jane Doe</p>
              <p class="text-xs text-blue-100 dark:text-gray-300">@janedoe | 2 hours ago</p>
            </div>
          </div>

          <!-- Action Buttons -->
          <div class="flex gap-3 mt-4">
            <button class="flex-1 py-2 px-4 bg-blue-600 bg-opacity-70 dark:bg-blue-700 dark:bg-opacity-60 text-white rounded-lg hover:bg-blue-700 hover:bg-opacity-80 dark:hover:bg-blue-800 dark:hover:bg-opacity-70 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-70">
              <span class="mr-2 text-lg">&hearts;</span> Like
            </button>
            <button class="flex-1 py-2 px-4 bg-blue-600 bg-opacity-70 dark:bg-blue-700 dark:bg-opacity-60 text-white rounded-lg hover:bg-blue-700 hover:bg-opacity-80 dark:hover:bg-blue-800 dark:hover:bg-opacity-70 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-70">
              <span class="mr-2 text-lg">&#x1F4AD;</span> Comment
            </button>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Componente de ventana de chat

Un complejo componente de ventana de chat inspirado en 3D con una paleta de colores bosque/verde, diseñado para aplicaciones industriales/de fabricación, con capacidad de respuesta y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="flex h-screen w-full bg-gradient-to-br from-green-50 to-green-100 p-4 dark:from-gray-900 dark:to-gray-800 lg:p-8">
  <div class="relative flex w-full max-w-7xl mx-auto overflow-hidden rounded-3xl bg-white shadow-2xl dark:bg-gray-800 lg:flex-row flex-col">

    <!-- Left Sidebar - Contacts/Channels -->
    <div class="relative w-full lg:w-1/4 bg-gradient-to-b from-green-600 to-green-700 p-6 shadow-inner-xl dark:from-green-900 dark:to-green-800 flex flex-col overflow-hidden transform perspective-1000 rotateY-minus-2deg origin-left transition duration-700 hover:rotateY-0 lg:transform-none">
        <div class="absolute inset-0 bg-pattern-grid opacity-10 pointer-events-none"></div>

      <div class="flex items-center justify-between mb-6 pb-4 border-b border-green-500 dark:border-green-700 z-10">
        <h2 class="text-2xl font-bold text-white shadow-text-sm">Contacts</h2>
        <button class="p-2 rounded-full bg-green-500 text-white hover:bg-green-400 dark:bg-green-700 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /></svg></button>
      </div>

      <div class="mb-6 z-10">
        <div class="relative flex items-center">
          <input type="text" placeholder="Search..." class="w-full p-3 pl-10 rounded-full bg-green-500 bg-opacity-70 text-white placeholder-white focus:outline-none focus:ring-2 focus:ring-green-400 focus:bg-opacity-100 dark:bg-green-700 dark:bg-opacity-70 dark:focus:ring-green-600 dark:focus:bg-opacity-100">
          <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 text-white h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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" /></svg>
        </div>
      </div>

      <div class="flex-1 overflow-y-auto space-y-4 pr-2 custom-scrollbar z-10 pt-2">
        <!-- Contact Item -->
        <div class="flex items-center p-3 rounded-xl bg-green-500 bg-opacity-40 hover:bg-opacity-60 transition duration-200 cursor-pointer dark:bg-green-800 dark:bg-opacity-40 dark:hover:bg-opacity-60 transform translateZ-10 hover:translateZ-20">
          <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
          <div class="ml-4 flex-1">
            <p class="text-lg font-semibold text-white shadow-text-sm">John Doe</p>
            <p class="text-white text-sm opacity-80 truncate">Ok, the new batch is ready...</p>
          </div>
          <span class="text-xs text-white opacity-70 ml-2">11:30 AM</span>
        </div>
        <!-- Active Contact Item -->
        <div class="flex items-center p-3 rounded-xl bg-green-400 bg-opacity-70 border border-green-300 dark:bg-green-600 dark:bg-opacity-70 transform translateZ-20 shadow-lg">
          <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
          <div class="ml-4 flex-1">
            <p class="text-lg font-bold text-white shadow-text-sm">Jane Smith</p>
            <p class="text-white text-sm opacity-90 truncate">Confirmed order #123.</p>
          </div>
          <span class="text-xs text-white font-medium ml-2">Now</span>
        </div>
        <div class="flex items-center p-3 rounded-xl bg-green-500 bg-opacity-40 hover:bg-opacity-60 transition duration-200 cursor-pointer dark:bg-green-800 dark:bg-opacity-40 dark:hover:bg-opacity-60 transform translateZ-10 hover:translateZ-20">
            <img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
            <div class="ml-4 flex-1">
              <p class="text-lg font-semibold text-white shadow-text-sm">Robert Garcia</p>
              <p class="text-white text-sm opacity-80 truncate">Machine A-3 needs maintenance.</p>
            </div>
            <span class="text-xs text-white opacity-70 ml-2">Yesterday</span>
          </div>
          <div class="flex items-center p-3 rounded-xl bg-green-500 bg-opacity-40 hover:bg-opacity-60 transition duration-200 cursor-pointer dark:bg-green-800 dark:bg-opacity-40 dark:hover:bg-opacity-60 transform translateZ-10 hover:translateZ-20">
            <img src="https://randomuser.me/api/portraits/women/8.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
            <div class="ml-4 flex-1">
              <p class="text-lg font-semibold text-white shadow-text-sm">Emily White</p>
              <p class="text-white text-sm opacity-80 truncate">About the next production run...</p>
            </div>
            <span class="text-xs text-white opacity-70 ml-2">Fri</span>
          </div>
      </div>
    </div>

    <!-- Right Chat Area -->
    <div class="relative flex-1 flex flex-col bg-green-50 bg-opacity-60 dark:bg-gray-700 dark:bg-opacity-60 p-6 transform translateZ-10 transition-transform duration-700 hover:translateZ-20 lg:transform-none">
        <div class="absolute inset-0 bg-texture-subtle opacity-10 pointer-events-none"></div>

      <!-- Chat Header -->
      <div class="flex items-center justify-between pb-4 border-b border-green-200 dark:border-gray-600 mb-6 z-10">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar" class="w-14 h-14 rounded-full border-2 border-green-500 dark:border-green-400 shadow-lg">
          <div class="ml-4">
            <h3 class="text-xl font-bold text-green-800 dark:text-white">Jane Smith</h3>
            <p class="text-green-600 dark:text-green-300 text-sm">Online <span class="text-green-500 dark:text-green-400 text-xs">(Production Manager)</span></p>
          </div>
        </div>
        <div class="flex space-x-3">
          <button class="p-3 rounded-full bg-green-200 text-green-700 hover:bg-green-300 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-green-400 transform translateZ-5 hover:translateZ-10 transition duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5v10a2 2 0 002 2h2v4l4-4h4a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2zM7 7h10M7 11h10M7 15h6" /></svg>
          </button>
          <button class="p-3 rounded-full bg-green-200 text-green-700 hover:bg-green-300 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-green-400 transform translateZ-5 hover:translateZ-10 transition duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /></svg>
          </button>
        </div>
      </div>

      <!-- Chat Messages -->
      <div class="flex-1 overflow-y-auto space-y-4 pr-2 custom-scrollbar z-10 pt-2">
        <!-- Received Message -->
        <div class="flex items-end">
          <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border border-green-300 shadow-md">
          <div class="max-w-[70%] bg-white p-4 rounded-tl-xl rounded-tr-xl rounded-br-xl shadow-lg border border-green-200 dark:bg-gray-600 dark:border-gray-500 transform translateZ-5">
            <p class="text-sm text-gray-700 dark:text-gray-200">Good morning, John. The new batch of components for the A-series assembly line is ready for inspection. We've just completed the QC checks.</p>
            <span class="block text-right text-xs text-gray-500 mt-2 dark:text-gray-400">10:45 AM</span>
          </div>
        </div>

        <!-- Sent Message -->
        <div class="flex justify-end">
          <div class="max-w-[70%] bg-green-500 text-white p-4 rounded-tl-xl rounded-tr-xl rounded-bl-xl shadow-lg border border-green-400 dark:bg-green-700 dark:border-green-600 transform translateZ-5">
            <p class="text-sm">Excellent! Please send over the inspection report and high-res photos. I'll need to forward it to the clients by end of day.</p>
            <span class="block text-right text-xs text-white opacity-80 mt-2">10:48 AM</span>
          </div>
        </div>

        <!-- Received Message with Image -->
        <div class="flex items-end">
          <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border border-green-300 shadow-md">
          <div class="max-w-[70%] bg-white p-3 rounded-tl-xl rounded-tr-xl rounded-br-xl shadow-lg border border-green-200 dark:bg-gray-600 dark:border-gray-500 transform translateZ-5">
            <p class="text-sm text-gray-700 mb-2 dark:text-gray-200">Here's a preview of the report and some detailed shots:</p>
            <img src="https://picsum.photos/400/250?random=1" alt="Factory Image" class="w-full rounded-lg mb-2 shadow-md">
            <img src="https://picsum.photos/400/250?random=2" alt="Product Image" class="w-full rounded-lg shadow-md">
            <span class="block text-right text-xs text-gray-500 mt-2 dark:text-gray-400">10:55 AM</span>
          </div>
        </div>

        <!-- Sent Message -->
        <div class="flex justify-end">
            <div class="max-w-[70%] bg-green-500 text-white p-4 rounded-tl-xl rounded-tr-xl rounded-bl-xl shadow-lg border border-green-400 dark:bg-green-700 dark:border-green-600 transform translateZ-5">
              <p class="text-sm">Looks good, Jane. The precision on these is impeccable. Great work by the team!</p>
              <span class="block text-right text-xs text-white opacity-80 mt-2">10:58 AM</span>
            </div>
        </div>

      </div>

      <!-- Chat Input -->
      <div class="mt-6 pt-4 border-t border-green-200 dark:border-gray-600 flex items-center space-x-3 z-10">
        <button class="p-3 rounded-full bg-green-200 text-green-700 hover:bg-green-300 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-green-400 transform translateZ-5 hover:translateZ-10 transition duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13.5" /></svg>
        </button>
        <input type="text" placeholder="Type your message..." class="flex-1 p-4 rounded-full bg-green-100 border border-green-300 text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-green-400 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400 transform translateZ-5">
        <button class="p-3 rounded-full bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 transform translateZ-10 hover:translateZ-20 transition duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" /></svg>
        </button>
        <button class="p-3 rounded-full bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 transform translateZ-10 hover:translateZ-20 transition duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /></svg>
        </button>
      </div>
    </div>
  </div>
</div>

<style>
/* Define CSS variables for easier theme switching if needed (though Tailwind dark: handles most) */
:root {
  --green-primary: #34d399; /* emerald-500 */
  --green-dark: #059669; /* emerald-600 */
  --green-light: #a7f3d0; /* emerald-200 */
}

.dark {
  --green-primary: #10b981; /* emerald-600 */
  --green-dark: #065f46; /* emerald-800 */
  --green-light: #047857; /* emerald-700 */
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(var(--green-light-rgb, 240, 253, 244), 0.3); /* green-100 with opacity */
  border-radius: 10px;
}

.dark .custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(var(--gray-700-rgb, 55, 65, 81), 0.3);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--green-dark);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--green-primary);
}

/* 3D Effects */
.perspective-1000 {
  perspective: 1000px;
}

.rotateY-minus-2deg {
  transform: rotateY(-2deg); /* Initial slight rotation for 3D depth */
}

.shadow-inner-xl {
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.dark .shadow-inner-xl {
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.shadow-text-sm {
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Pseudo 3D transforms */
.transform {
  transform-style: preserve-3d;
}

.translateZ-5 {
  transform: translateZ(5px);
}
.hover\:translateZ-10:hover {
  transform: translateZ(10px);
}
.translateZ-1_5-2deg { /* for active contact */
    transform: translateZ(20px);
}
.translateZ-10 {
  transform: translateZ(10px);
}
.hover\:translateZ-20:hover {
  transform: translateZ(20px);
}

/* Background Patterns for 3D depth */
.bg-pattern-grid {
  background-image: linear-gradient(0deg, transparent 24%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.15) 26%, transparent 27%, transparent 74%, rgba(0,0,0,.15) 75%, rgba(0,0,0,.15) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.15) 26%, transparent 27%, transparent 74%, rgba(0,0,0,.15) 75%, rgba(0,0,0,.15) 76%, transparent 77%, transparent);
  background-size: 50px 50px;
}

.bg-texture-subtle {
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239e9e9e' fill-opacity='0.15' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z' /%3E%3C/g%3E%3C/svg%3E");
}

.dark .bg-texture-subtle {
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%234a4a4a' fill-opacity='0.25' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z' /%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 1023px) {
    /* For smaller screens, remove 3D rotation and flatten perspective */
    .lg\:transform-none {
        transform: none !important;
        perspective: none !important;
    }
    .lg\:w-1\/4 {
        width: 100%;
        height: 300px; /* Limit height of sidebar on smaller screens */
    }
    .lg\:flex-col {
        flex-direction: column;
    }
}
</style>

Componente de reproductor de vídeo inmobiliario

Un componente de reproductor de video complejo y receptivo para plataformas inmobiliarias, con una estética de Material Design con una paleta de colores bosque/verde. Incluye control de video, detalles de propiedades y una lista de reproducción, con soporte completo para el modo oscuro.

Abrir Vista previa

                <div class="font-sans antialiased text-gray-900 bg-gray-100 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl max-w-7xl mx-auto my-8">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
    <!-- Main Video Player Section -->
    <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden relative pb-9/16 aspect-video">
      <iframe class="absolute top-0 left-0 w-full h-full rounded-lg" src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&controls=1&modestbranding=1&rel=0" title="Property Showcase Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

      <!-- Overlay for play/pause/volume (simplified as this is complex for pure HTML/CSS) -->
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 rounded-lg">
        <div class="flex justify-between items-center w-full text-white">
          <div class="flex items-center space-x-4">
            <button class="p-3 rounded-full bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 transition duration-300">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M8 5v14l11-7z" />
              </svg>
            </button>
            <span class="text-sm hidden sm:block">0:45 / 3:20</span>
          </div>
          <div class="flex items-center space-x-4">
            <button class="p-2 rounded-full hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 transition duration-300">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M18 10v6c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1zm-4 0v6c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1zm-4 0v6c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1zm-4 0v6c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1z"/>
              </svg>
            </button>
            <button class="p-2 rounded-full hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 transition duration-300">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 4.5c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm-2 12.5H8V7h2v10zm4 0h-2V7h2v10zm4 0h-2V7h2v10z" />
              </svg>
            </button>
            <button class="p-2 rounded-full hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 transition duration-300">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 3C6.48 3 2 7.48 2 13s4.48 10 10 10 10-4.48 10-10S17.52 3 12 3zm-1 15H9v-8h2v8zm4 0h-2v-8h2v8zm-2-10h-2V3h2v5z" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Property Details & Playlist Section -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col">
      <!-- Property Details -->
      <div class="mb-6 pb-6 border-b border-gray-200 dark:border-gray-700">
        <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100">Luxurious Forest-View Retreat</h2>
        <p class="text-emerald-700 dark:text-emerald-400 text-sm font-semibold mb-3">$1,250,000</p>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">123 Evergreen Lane, Pine Ridge, CA 90210</p>
        <div class="flex items-center space-x-4 text-gray-600 dark:text-gray-400 text-sm ">
          <span class="flex items-center">
            <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3.5L5 9v11h14V9l-7-5.5zm0 2.31l5 4V19h-5v-6h-2v6H7V10.81l5-4z"/></svg>
            4 Beds
          </span>
          <span class="flex items-center">
            <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3.5c-2.49 0-4.5 2.01-4.5 4.5 0 2.49 2.01 4.5 4.5 4.5s4.5-2.01 4.5-4.5c0-2.49-2.01-4.5-4.5-4.5zM12 2c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 14c-4.42 0-8 3.58-8 8h16c0-4.42-3.58-8-8-8z"/></svg>
            3 Baths
          </span>
          <span class="flex items-center">
            <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 24 24"><path d="M16 13l-4 4-4-4V7h8v6z"/></svg>
            2,800 sqft
          </span>
        </div>
      </div>

      <!-- Agent Information (Optional, but good for real estate) -->
      <div class="flex items-center mb-6">
        <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Agent Name" class="w-12 h-12 rounded-full object-cover border-2 border-emerald-500 dark:border-emerald-400 mr-4 shadow-sm">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Senior Real Estate Agent</p>
        </div>
        <button class="ml-auto bg-emerald-500 hover:bg-emerald-600 text-white font-semibold py-2 px-4 rounded-full text-sm shadow-md focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-opacity-75 transition duration-300">
          Contact
        </button>
      </div>

      <!-- Video Playlist -->
      <div class="flex-grow overflow-y-auto custom-scrollbar pr-2">
        <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">More Videos</h3>
        <div class="space-y-4">

          <!-- Playlist Item 1 -->
          <div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-transparent hover:border-emerald-500 dark:hover:border-emerald-400 cursor-pointer">
            <img src="https://picsum.photos/120/80?random=1" alt="Video Thumbnail" class="w-24 h-16 object-cover rounded-md flex-shrink-0 mr-4 border border-gray-200 dark:border-gray-600">
            <div class="flex-grow">
              <p class="font-medium text-gray-800 dark:text-gray-200 line-clamp-2">Interactive 3D Floor Plan Tour</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">2:15 min</p>
            </div>
            <button class="ml-4 p-2 rounded-full text-emerald-600 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            </button>
          </div>

          <!-- Playlist Item 2 (Currently Playing) -->
          <div class="flex items-center p-3 bg-emerald-50 dark:bg-emerald-900 rounded-lg shadow-md border border-emerald-500 dark:border-emerald-400 relative overflow-hidden">
            <span class="absolute top-0 right-0 bg-emerald-500 dark:bg-emerald-400 text-white text-xs px-2 py-1 rounded-bl-lg font-semibold">Playing</span>
            <img src="https://picsum.photos/120/80?random=2" alt="Video Thumbnail" class="w-24 h-16 object-cover rounded-md flex-shrink-0 mr-4 border border-emerald-400 dark:border-emerald-300">
            <div class="flex-grow">
              <p class="font-semibold text-emerald-800 dark:text-emerald-100 line-clamp-2">Full Property Walkthrough (Current)</p>
              <p class="text-xs text-emerald-600 dark:text-emerald-300">3:20 min</p>
            </div>
            <button class="ml-4 p-2 rounded-full text-emerald-700 dark:text-emerald-200 bg-emerald-100 dark:bg-emerald-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-600 focus:ring-opacity-50">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
            </button>
          </div>

          <!-- Playlist Item 3 -->
          <div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-transparent hover:border-emerald-500 dark:hover:border-emerald-400 cursor-pointer">
            <img src="https://picsum.photos/120/80?random=3" alt="Video Thumbnail" class="w-24 h-16 object-cover rounded-md flex-shrink-0 mr-4 border border-gray-200 dark:border-gray-600">
            <div class="flex-grow">
              <p class="font-medium text-gray-800 dark:text-gray-200 line-clamp-2">Aerial Drone Footage of Estate</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">1:50 min</p>
            </div>
            <button class="ml-4 p-2 rounded-full text-emerald-600 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            </button>
          </div>

          <!-- Playlist Item 4 -->
          <div class="flex items-center p-3 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-transparent hover:border-emerald-500 dark:hover:border-emerald-400 cursor-pointer">
            <img src="https://picsum.photos/120/80?random=4" alt="Video Thumbnail" class="w-24 h-16 object-cover rounded-md flex-shrink-0 mr-4 border border-gray-200 dark:border-gray-600">
            <div class="flex-grow">
              <p class="font-medium text-gray-800 dark:text-gray-200 line-clamp-2">Neighborhood & Community Highlights</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">4:00 min</p>
            </div>
            <button class="ml-4 p-2 rounded-full text-emerald-600 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            </button>
          </div>

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

  <!-- Custom Scrollbar Styles (Pure CSS approximation, requires more robust JS for full functionality) -->
  <style>
    .custom-scrollbar::-webkit-scrollbar {
      width: 8px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: #f0fdf4; /* light emerald/green tone */
      border-radius: 10px;
    }
    .dark .custom-scrollbar::-webkit-scrollbar-track {
      background: #374151; /* gray-700 */
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: #059669; /* emerald-600 */
      border-radius: 10px;
      border: 2px solid #f0fdf4;
    }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: #34d399; /* emerald-400 */
      border: 2px solid #374151;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background-color: #047857; /* emerald-700 */
    }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background-color: #10b981; /* emerald-500 */
    }

    /* Aspect ratio for video player */
    .pb-9\/16 {
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
    }
  </style>
</div>

Luxury_Portfolio_Cards_Ocean_Blue

Un componente complejo de tarjetas de cartera, de lujo/premium diseñado con tonos océano/azul para exhibir trabajos o productos. Cuenta con un diseño responsivo, tipografía sofisticada, imágenes elegantes y compatibilidad total con el modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-950 dark:to-blue-900 py-12 px-4 sm:px-6 lg:px-8 font-serif text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-6 drop-shadow-lg text-blue-900 dark:text-blue-200 leading-tight">
      Our Exquisite Creations
    </h2>
    <p class="text-xl sm:text-2xl text-center mb-16 max-w-3xl mx-auto dark:text-gray-300">
      Dive into a curated collection of our most distinguished projects, crafted with precision and an unwavering pursuit of perfection.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">

      <!-- Card 1 -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700 ">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1018/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Azure Sky Residency</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">A beacon of modern architecture, featuring bespoke interiors and breathtaking panoramic views.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Designer Avatar">
              <span>Anya Sharma</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">Architecture</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            View Project
          </a>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1042/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Symphony of the Seas</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">An opulent yacht interior design, blending classic elegance with cutting-edge marine technology.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Designer Avatar">
              <span>Julian Thorne</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">Interior Design</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            Explore Details
          </a>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1044/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Elysian Gardens Revitalization</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">A transformative landscape design, harmonizing natural beauty with sustainable urban living.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/9.jpg" alt="Designer Avatar">
              <span>Lena Petrov</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">Landscape</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            See Portfolio
          </a>
        </div>
      </div>

      <!-- Card 4 (Placeholder - could be dynamic) -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/10/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Oceanic Brand Identity</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">Crafting a distinctive visual language for a luxury coastal resort brand.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/71.jpg" alt="Designer Avatar">
              <span>Marcus Finn</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">Branding</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            Discover More
          </a>
        </div>
      </div>

      <!-- Card 5 (Placeholder) -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1025/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Digital Horizon App</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">An intuitive and visually stunning mobile application designed for premium travel experiences.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Designer Avatar">
              <span>Chloe Rivers</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">UI/UX Design</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            View Case Study
          </a>
        </div>
      </div>

      <!-- Card 6 (Placeholder) -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1049/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Timeless Sculpture Series</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">A collection of bespoke artistic sculptures, blending classical forms with contemporary abstract elements.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Designer Avatar">
              <span>David Hayes</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">Art & Craft</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            Discover Collection
          </a>
        </div>
      </div>

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

Componente de línea de tiempo

Un componente de línea de tiempo simple y receptivo con un esquema de color monocromático y sutiles efectos 3D, adecuado para sitios web de viajes / turismo. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-900 py-12 sm:py-16 lg:py-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-center text-gray-900 dark:text-gray-50 mb-12 sm:mb-16 tracking-tight">
      Your Journey So Far
    </h2>

    <div class="relative before:absolute before:inset-y-0 before:left-1/2 before:-ml-px before:w-0.5 before:bg-gray-300 dark:before:bg-gray-700 before:hidden md:before:block pb-10">

      <!-- Event 1: Left Aligned -->
      <div class="relative flex flex-col md:flex-row items-center md:justify-start mb-10">
        <div class="md:w-1/2 md:pr-8 text-right">
          <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-xl relative transform transition-all duration-300 hover:scale-105 hover:shadow-2xl border border-gray-200 dark:border-gray-700 md:translate-x-12">
            <div class="absolute -left-3 top-1/2 -translate-y-1/2 hidden md:block">
              <div class="w-6 h-6 rounded-full bg-blue-500 dark:bg-blue-600 ring-4 ring-white dark:ring-gray-900 shadow-lg"></div>
            </div>
            <img src="https://picsum.photos/400/250?random=1" alt="Event image" class="rounded-md mb-4 shadow-md object-cover h-40 w-full">
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">June 15, 2023</p>
            <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Arrival in Paris</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">Kicking off the adventure with the iconic Eiffel Tower and charming Parisian cafes. A dream come true!</p>
          </div>
        </div>
      </div>

      <!-- Event 2: Right Aligned -->
      <div class="relative flex flex-col md:flex-row items-center md:justify-end mb-10">
        <div class="md:w-1/2 md:pl-8 text-left">
          <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-xl relative transform transition-all duration-300 hover:scale-105 hover:shadow-2xl border border-gray-200 dark:border-gray-700 md:-translate-x-12">
            <div class="absolute -right-3 top-1/2 -translate-y-1/2 hidden md:block">
              <div class="w-6 h-6 rounded-full bg-blue-500 dark:bg-blue-600 ring-4 ring-white dark:ring-gray-900 shadow-lg"></div>
            </div>
            <img src="https://picsum.photos/400/250?random=2" alt="Event image" class="rounded-md mb-4 shadow-md object-cover h-40 w-full">
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">June 20, 2023</p>
            <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2"> gondola Ride in Venice</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">Experiencing the beauty of Venice from its canals. Pure romance and breathtaking architecture at every turn.</p>
          </div>
        </div>
      </div>

      <!-- Event 3: Left Aligned -->
      <div class="relative flex flex-col md:flex-row items-center md:justify-start mb-10">
        <div class="md:w-1/2 md:pr-8 text-right">
          <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-xl relative transform transition-all duration-300 hover:scale-105 hover:shadow-2xl border border-gray-200 dark:border-gray-700 md:translate-x-12">
            <div class="absolute -left-3 top-1/2 -translate-y-1/2 hidden md:block">
              <div class="w-6 h-6 rounded-full bg-blue-500 dark:bg-blue-600 ring-4 ring-white dark:ring-gray-900 shadow-lg"></div>
            </div>
            <img src="https://picsum.photos/400/250?random=3" alt="Event image" class="rounded-md mb-4 shadow-md object-cover h-40 w-full">
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">June 25, 2023</p>
            <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Hiking in the Swiss Alps</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">Majestic mountains and pristine nature. An invigorating escape into the heart of the Alps.</p>
          </div>
        </div>
      </div>

      <!-- Event 4: Right Aligned -->
      <div class="relative flex flex-col md:flex-row items-center md:justify-end mb-10">
        <div class="md:w-1/2 md:pl-8 text-left">
          <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-xl relative transform transition-all duration-300 hover:scale-105 hover:shadow-2xl border border-gray-200 dark:border-gray-700 md:-translate-x-12">
            <div class="absolute -right-3 top-1/2 -translate-y-1/2 hidden md:block">
              <div class="w-6 h-6 rounded-full bg-blue-500 dark:bg-blue-600 ring-4 ring-white dark:ring-gray-900 shadow-lg"></div>
            </div>
            <img src="https://picsum.photos/400/250?random=4" alt="Event image" class="rounded-md mb-4 shadow-md object-cover h-40 w-full">
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">July 01, 2023</p>
            <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Culinary Tour in Rome</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">Savoring authentic Italian pasta, pizza, and gelato. Rome's delights are a feast for the senses!</p>
          </div>
        </div>
      </div>

      <!-- Add more events following the pattern if needed -->

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

Brutalism_News_Carousel

Un componente deslizante de carrusel simple de estilo brutalista para sitios web de noticias y periodismo, con alto contraste, neutros fríos y capacidad de respuesta total con soporte para modo oscuro. Utiliza imágenes de marcador de posición y enfatiza los elementos visuales sin procesar.

Abrir Vista previa

                <div class="w-full mx-auto p-4 md:p-8 bg-neutral-100 dark:bg-neutral-900 font-mono text-neutral-900 dark:text-neutral-100 border-t-4 border-b-4 border-neutral-900 dark:border-neutral-100">
  <div class="max-w-7xl mx-auto overflow-hidden relative">
    <!-- Hidden but accessible labels for screen readers -->
    <h2 class="sr-only">News Carousel</h2>

    <!-- Carousel Wrapper (using scroll-snap for simplicity, can be replaced with JS for full carousel functionality) -->
    <div class="flex w-full snap-x snap-mandatory overflow-x-scroll scrollbar-hide space-x-4 md:space-x-8 lg:space-x-12 pb-4">

      <!-- Slide 1 -->
      <div class="flex-none w-full md:w-1/2 lg:w-1/3 snap-center border-4 border-neutral-900 dark:border-neutral-100 p-4 md:p-6 bg-neutral-200 dark:bg-neutral-800">
        <img src="https://picsum.photos/600/400?random=1" alt="Image for news article 1" class="w-full h-48 md:h-64 object-cover object-center border-2 border-neutral-900 dark:border-neutral-100 mb-4">
        <a href="#" class="block text-xl md:text-2xl lg:text-3xl font-bold uppercase leading-tight tracking-tighter hover:underline text-neutral-900 dark:text-neutral-100 mb-2">
          Breaking News: Headline One Exposes New Details
        </a>
        <p class="text-sm md:text-base leading-snug mb-4 text-neutral-700 dark:text-neutral-300">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...
        </p>
        <span class="block text-xs md:text-sm font-semibold uppercase text-neutral-600 dark:text-neutral-400">Category 1 // October 26, 2023</span>
      </div>

      <!-- Slide 2 -->
      <div class="flex-none w-full md:w-1/2 lg:w-1/3 snap-center border-4 border-neutral-900 dark:border-neutral-100 p-4 md:p-6 bg-neutral-200 dark:bg-neutral-800">
        <img src="https://picsum.photos/600/400?random=2" alt="Image for news article 2" class="w-full h-48 md:h-64 object-cover object-center border-2 border-neutral-900 dark:border-neutral-100 mb-4">
        <a href="#" class="block text-xl md:text-2xl lg:text-3xl font-bold uppercase leading-tight tracking-tighter hover:underline text-neutral-900 dark:text-neutral-100 mb-2">
          In-Depth Report: The Impact of Global Warming Escalates
        </a>
        <p class="text-sm md:text-base leading-snug mb-4 text-neutral-700 dark:text-neutral-300">
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident...
        </p>
        <span class="block text-xs md:text-sm font-semibold uppercase text-neutral-600 dark:text-neutral-400">Environment // October 25, 2023</span>
      </div>

      <!-- Slide 3 -->
      <div class="flex-none w-full md:w-1/2 lg:w-1/3 snap-center border-4 border-neutral-900 dark:border-neutral-100 p-4 md:p-6 bg-neutral-200 dark:bg-neutral-800">
        <img src="https://picsum.photos/600/400?random=3" alt="Image for news article 3" class="w-full h-48 md:h-64 object-cover object-center border-2 border-neutral-900 dark:border-neutral-100 mb-4">
        <a href="#" class="block text-xl md:text-2xl lg:text-3xl font-bold uppercase leading-tight tracking-tighter hover:underline text-neutral-900 dark:text-neutral-100 mb-2">
          Local Story: Community Rallies Despite New Challenges
        </a>
        <p class="text-sm md:text-base leading-snug mb-4 text-neutral-700 dark:text-neutral-300">
          Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt...
        </p>
        <span class="block text-xs md:text-sm font-semibold uppercase text-neutral-600 dark:text-neutral-400">Community // October 24, 2023</span>
      </div>

      <!-- Slide 4 -->
      <div class="flex-none w-full md:w-1/2 lg:w-1/3 snap-center border-4 border-neutral-900 dark:border-neutral-100 p-4 md:p-6 bg-neutral-200 dark:bg-neutral-800">
        <img src="https://picsum.photos/600/400?random=4" alt="Image for news article 4" class="w-full h-48 md:h-64 object-cover object-center border-2 border-neutral-900 dark:border-neutral-100 mb-4">
        <a href="#" class="block text-xl md:text-2xl lg:text-3xl font-bold uppercase leading-tight tracking-tighter hover:underline text-neutral-900 dark:text-neutral-100 mb-2">
          Opinion: Rethinking Modern Economics for Sustainable Growth
        </a>
        <p class="text-sm md:text-base leading-snug mb-4 text-neutral-700 dark:text-neutral-300">
          At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias...
        </p>
        <span class="block text-xs md:text-sm font-semibold uppercase text-neutral-600 dark:text-neutral-400">Opinion // October 23, 2023</span>
      </div>

    </div>
  </div>

  <!-- Simple Scroll Indicator / Navigation - can be replaced with JS for full carousel controls -->
  <div class="flex justify-center mt-6 space-x-2">
    <span class="block w-4 h-4 md:w-5 md:h-5 bg-neutral-900 dark:bg-neutral-100 border-2 border-neutral-900 dark:border-neutral-100"></span>
    <span class="block w-4 h-4 md:w-5 md:h-5 border-2 border-neutral-900 dark:border-neutral-100"></span>
    <span class="block w-4 h-4 md:w-5 md:h-5 border-2 border-neutral-900 dark:border-neutral-100"></span>
  </div>

  <!-- Custom Scrollbar Hide - add this to your CSS or a style tag if not using a utility class -->
  <style>
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  </style>
</div>

Luxury_SaaS_Navigation_Candy

Un componente de navegación de lujo/estilo premium para aplicaciones SaaS, con una combinación de colores con temática de caramelos (rosa chicle, verde menta) y una tipografía sofisticada. Es responsivo, incluye soporte para el modo oscuro y tiene elementos interactivos.

Abrir Vista previa

                <nav class="relative bg-white dark:bg-gray-900 shadow-lg font-['Quicksand',_sans-serif]" x-data="{ open: false }">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-20">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <a href="#" class="text-pink-500 dark:text-pink-400 text-3xl font-extrabold tracking-tight">
            SaaS<span class="text-teal-400 dark:text-teal-300">Flow</span>
          </a>
        </div>
        <div class="hidden sm:ml-6 sm:flex sm:space-x-8 items-center">
          <a href="#" class="border-b-2 border-transparent hover:border-pink-300 dark:hover:border-pink-500 text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400 px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out">Features</a>
          <a href="#" class="border-b-2 border-transparent hover:border-teal-300 dark:hover:border-teal-500 text-gray-700 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out">Pricing</a>
          <a href="#" class="border-b-2 border-transparent hover:border-pink-300 dark:hover:border-pink-500 text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400 px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out">Solutions</a>
          <a href="#" class="border-b-2 border-transparent hover:border-teal-300 dark:hover:border-teal-500 text-gray-700 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out">Contact</a>
        </div>
      </div>
      <div class="hidden sm:ml-6 sm:flex sm:items-center">
        <button class="p-2 rounded-full text-pink-400 dark:text-pink-300 hover:text-pink-600 dark:hover:text-pink-500 hover:bg-pink-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transition duration-300 ease-in-out">
          <span class="sr-only">View notifications</span>
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
        </button>
        <button x-on:click="$store.darkMode.toggle()" class="ml-4 p-2 rounded-full text-teal-400 dark:text-teal-300 hover:text-teal-600 dark:hover:text-teal-500 hover:bg-teal-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 transition duration-300 ease-in-out">
          <span class="sr-only">Toggle dark mode</span>
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path x-show="$store.darkMode.on" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-4.575l.707-.707M6.025 18.025l-.707.707M18.025 6.025l.707-.707M6.025 6.025l-.707-.707M12 7a5 5 0 110 10 5 5 0 010-10z" />
            <path x-show="!$store.darkMode.on" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
          </svg>
        </button>
        <button type="button" class="ml-4 inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-gradient-to-r from-pink-400 to-pink-600 hover:from-pink-500 hover:to-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transform hover:scale-105 transition duration-300 ease-in-out">
          Sign Up
        </button>
      </div>
      <div class="-mr-2 flex items-center sm:hidden">
        <!-- Mobile menu button -->
        <button x-on:click="open = !open" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 transition duration-300 ease-in-out" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <svg x-show="!open" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg x-show="open" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div x-show="open" x-transition:enter="duration-200 ease-out" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="duration-100 ease-in" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="sm:hidden absolute inset-x-0 top-full z-10 bg-white dark:bg-gray-900 shadow-md transform origin-top-right" id="mobile-menu">
    <div class="pt-2 pb-3 space-y-1">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-pink-50 dark:hover:bg-gray-800 hover:text-pink-500 dark:hover:text-pink-400 transition duration-300 ease-in-out">Features</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-teal-50 dark:hover:bg-gray-800 hover:text-teal-500 dark:hover:text-teal-400 transition duration-300 ease-in-out">Pricing</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-pink-50 dark:hover:bg-gray-800 hover:text-pink-500 dark:hover:text-pink-400 transition duration-300 ease-in-out">Solutions</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-teal-50 dark:hover:bg-gray-800 hover:text-teal-500 dark:hover:text-teal-400 transition duration-300 ease-in-out">Contact</a>
      <div class="flex items-center justify-between px-3 py-2">
        <button class="flex-shrink-0 p-2 rounded-full text-pink-400 dark:text-pink-300 hover:text-pink-600 dark:hover:text-pink-500 hover:bg-pink-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transition duration-300 ease-in-out">
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
        </button>
        <button x-on:click="$store.darkMode.toggle()" class="ml-4 flex-shrink-0 p-2 rounded-full text-teal-400 dark:text-teal-300 hover:text-teal-600 dark:hover:text-teal-500 hover:bg-teal-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 transition duration-300 ease-in-out">
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path x-show="$store.darkMode.on" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-4.575l.707-.707M6.025 18.025l-.707.707M18.025 6.025l.707-.707M6.025 6.025l-.707-.707M12 7a5 5 0 110 10 5 5 0 010-10z" />
            <path x-show="!$store.darkMode.on" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
          </svg>
        </button>
      </div>
      <a href="#" class="block w-full text-center px-4 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-gradient-to-r from-pink-400 to-pink-600 hover:from-pink-500 hover:to-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transform hover:scale-105 transition duration-300 ease-in-out mt-4 mx-3">Sign Up</a>
    </div>
  </div>
</nav>
<script>
  // This Alpine.js store provides dark mode functionality.
  // It's a simple example and can be extended for persistence.
  
  // Required for Alpine.js to function
  document.addEventListener('alpine:init', () => {
    Alpine.store('darkMode', {
      on: localStorage.getItem('darkMode') === 'true' || (localStorage.getItem('darkMode') === null && window.matchMedia('(prefers-color-scheme: dark)').matches),
      toggle() {
        this.on = !this.on;
        localStorage.setItem('darkMode', this.on);
        document.documentElement.classList.toggle('dark', this.on);
      }
    });

    // Initialize dark mode class on html tag based on store value
    Alpine.effect(() => {
      if (Alpine.store('darkMode').on) {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
    });
  });
</script>

Componente de formulario de inicio de sesión orgánico

Un componente de formulario de inicio de sesión complejo y receptivo con un estilo de diseño orgánico inspirado en la naturaleza y una combinación de colores apagados, adecuado para plataformas de música/audio. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-lime-100 via-green-50 to-blue-50 dark:from-slate-800 dark:via-gray-900 dark:to-stone-950">
  <div class="max-w-md w-full p-8 space-y-8 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm rounded-3xl shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden relative group">
    <!-- Organic Shape Background -->
    <div class="absolute top-0 left-0 w-full h-full transform -translate-x-1/2 -translate-y-1/2 -rotate-45 bg-gradient-to-br from-green-200/50 to-blue-200/50 dark:from-emerald-900/50 dark:to-cyan-900/50 rounded-full opacity-60 group-hover:scale-110 transition-transform duration-500 ease-in-out" style="width: 200%; height: 200%; border-radius: 60% 40% 70% 30% / 30% 60% 40% 70%;"></div>
    <div class="absolute bottom-0 right-0 w-full h-full transform translate-x-1/2 translate-y-1/2 rotate-45 bg-gradient-to-tl from-yellow-100/50 to-lime-100/50 dark:from-orange-900/50 dark:to-lime-900/50 rounded-full opacity-60 group-hover:scale-110 transition-transform duration-500 ease-in-out" style="width: 150%; height: 150%; border-radius: 40% 60% 30% 70% / 70% 30% 60% 40%;"></div>

    <div class="relative z-10">
      <div class="text-center">
        <img class="mx-auto h-16 w-auto mb-4 rounded-full shadow-lg border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/lego/6.jpg" alt="Music Wave Logo">
        <h2 class="mt-6 text-3xl font-extrabold text-gray-900 dark:text-white leading-tight tracking-wider">
          Harmony Connect
        </h2>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
          Sign in to your musical journey
        </p>
      </div>

      <form class="mt-8 space-y-6" action="#" method="POST">
        <div class="rounded-md shadow-sm -space-y-px">
          <div>
            <label for="email-address" class="sr-only">Email address</label>
            <input id="email-address" name="email" type="email" autocomplete="email" required
                   class="appearance-none rounded-t-lg relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:focus:ring-emerald-600 dark:focus:border-emerald-600 sm:text-base bg-white/80 dark:bg-gray-700/80 transition-colors duration-200"
                   placeholder="Email address">
          </div>
          <div>
            <label for="password" class="sr-only">Password</label>
            <input id="password" name="password" type="password" autocomplete="current-password" required
                   class="appearance-none rounded-b-lg relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 dark:focus:ring-emerald-600 dark:focus:border-emerald-600 sm:text-base bg-white/80 dark:bg-gray-700/80 transition-colors duration-200"
                   placeholder="Password">
          </div>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox"
                   class="h-4 w-4 text-green-600 dark:text-emerald-500 focus:ring-green-500 dark:focus:ring-emerald-600 border-gray-300 dark:border-gray-600 rounded cursor-pointer">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
              Remember me
            </label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-green-600 hover:text-green-500 dark:text-emerald-500 dark:hover:text-emerald-400 transtion-colors duration-200">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit"
                  class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-xl text-white bg-gradient-to-br from-green-600 to-lime-600 hover:from-green-700 hover:to-lime-700 dark:from-emerald-600 dark:to-cyan-600 dark:hover:from-emerald-700 dark:hover:to-cyan-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-emerald-600 transition-all transform hover:-translate-y-0.5 shadow-md hover:shadow-lg focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
              <svg class="h-5 w-5 text-green-200 group-hover:text-green-100 dark:text-emerald-200 dark:group-hover:text-emerald-100 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
              </svg>
            </span>
            Sign in
          </button>
        </div>

        <div class="relative">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-white/70 dark:bg-gray-800/70 text-gray-500 dark:text-gray-400 rounded-full shadow-sm">
              Or continue with
            </span>
          </div>
        </div>

        <div class="mt-6 grid grid-cols-2 gap-3">
          <div>
            <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm text-sm font-medium text-gray-700 dark:text-gray-100 bg-white/80 dark:bg-gray-700/80 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:-translate-y-0.5">
              <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 1792 1792">
                <path d="M1344 640q-.25 43.75-29.75 87.75t-68 81.75q-38 37-97.5 76t-129.5 73q-69 34-118 34-93 0-141-55.5t-48-142.5v-288q0-74 48-142.5t141-55.5q49 0 118 34 60 29 129.5 73t97.5 76q38.25 37.75 68 81.75t29.75 87.75zM1792 896q0 307-178.5 547.5T1143 1792V1088h-308V896h308V672q0-109 45-168t141-59q75 0 114 4t67 2zm-1792 0q0-307 178.5-547.5T649 0l-7 1h308v192H0v608z"/>
              </svg>
              Google
            </button>
          </div>

          <div>
            <button class="w-full flex items-center justify-center px-4 py-2 border border-blue-400 dark:border-[#4267B2] rounded-xl shadow-sm text-sm font-medium text-[#4267B2] dark:text-[#E0E0E0] bg-blue-50/80 dark:bg-[#4267B2]/80 hover:bg-blue-100 dark:hover:bg-[#3D5A9C] transition-colors duration-200 transform hover:-translate-y-0.5">
              <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
                <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.99 3.65 9.12 8.43 9.87v-7.74H7.63V12h2.8V9.39c0-2.78 1.6-4.32 4.19-4.32 1.25 0 2.37.09 2.68.13v2.96h-1.76c-1.38 0-1.65.65-1.65 1.62V12h3.29l-.53 3.25h-2.76V22C18.35 21.12 22 16.99 22 12z"/>
              </svg>
              Facebook
            </button>
          </div>
        </div>

        <div class="text-center text-sm mt-6 text-gray-600 dark:text-gray-400">
          Don't have an account? 
          <a href="#" class="font-medium text-green-600 hover:text-green-500 dark:text-emerald-500 dark:hover:text-emerald-400 transtion-colors duration-200">
            Sign up
          </a>
        </div>

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

Componente de mapa del sitio

Un componente de mapa del sitio simple y receptivo con un diseño inspirado en papel/impresión y un esquema de color análogo, adecuado para sitios web industriales/de fabricación, incluida la compatibilidad con el modo oscuro.

Abrir Vista previa

                <section class="font-sans bg-amber-50 dark:bg-gray-900 text-stone-800 dark:text-gray-200 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-amber-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-amber-100 dark:border-gray-700">
      <h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-stone-900 dark:text-gray-100 mb-2 font-serif">Site Overview</h2>
      <p class="text-amber-700 dark:text-gray-400 text-lg sm:text-xl font-medium">Navigate our operational blueprint.</p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-y-8 sm:gap-x-6 sm:gap-y-10 p-6 sm:p-8 lg:p-10">

      <!-- Column 1: Company -->
      <div>
        <h3 class="text-xl font-semibold text-amber-700 dark:text-amber-400 mb-4 tracking-wide border-b pb-2 border-dashed border-amber-300 dark:border-gray-600">Company</h3>
        <nav class="space-y-3">
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">About Us</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Our History</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Leadership</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Careers</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Contact Us</a>
        </nav>
      </div>

      <!-- Column 2: Products -->
      <div>
        <h3 class="text-xl font-semibold text-amber-700 dark:text-amber-400 mb-4 tracking-wide border-b pb-2 border-dashed border-amber-300 dark:border-gray-600">Products</h3>
        <nav class="space-y-3">
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Machinery</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Components</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Raw Materials</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Custom Solutions</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Product Catalog</a>
        </nav>
      </div>

      <!-- Column 3: Services -->
      <div>
        <h3 class="text-xl font-semibold text-amber-700 dark:text-amber-400 mb-4 tracking-wide border-b pb-2 border-dashed border-amber-300 dark:border-gray-600">Services</h3>
        <nav class="space-y-3">
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Maintenance</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Installation</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Consulting</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Training</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Support</a>
        </nav>
      </div>

      <!-- Column 4: Resources -->
      <div>
        <h3 class="text-xl font-semibold text-amber-700 dark:text-amber-400 mb-4 tracking-wide border-b pb-2 border-dashed border-amber-300 dark:border-gray-600">Resources</h3>
        <nav class="space-y-3">
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Case Studies</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Blog</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Downloads</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">FAQs</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Glossary</a>
        </nav>
      </div>

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

1 ... 24 25 26 27 28 ... 307

Categorías

Todos los componentes