Componentes de búsqueda

Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente de navegación de pie de página

Un componente de navegación de pie de página complejo y receptivo diseñado para un mercado, con una interfaz de usuario de modo oscuro con un esquema de color en blanco y negro y un color de acento brillante (índigo). Incluye múltiples secciones para navegación, información de la empresa, enlaces legales y redes sociales, con soporte completo para el modo oscuro.

Abrir Vista previa

                <footer class="bg-gray-950 text-gray-300 py-12 dark:bg-black dark:text-gray-400">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-y-10 gap-x-8">
      
      <!-- Company Info & Logo -->
      <div class="col-span-1 lg:col-span-1">
        <div class="flex items-center space-x-2 mb-4">
          <svg class="h-8 w-8 text-indigo-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <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>
            <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"></path>
          </svg>
          <span class="text-2xl font-bold text-white dark:text-white">Marketify</span>
        </div>
        <p class="text-sm mb-4">The ultimate marketplace for unique items and services around the globe.</p>
        <h3 class="text-lg font-semibold text-white dark:text-white mb-3">Subscribe to our Newsletter</h3>
        <form class="flex rounded-md shadow-sm">
          <input type="email" placeholder="Your email" aria-label="Your email" class="flex-1 min-w-0 block w-full px-4 py-2 rounded-l-md border-0 bg-gray-800 text-white placeholder-gray-500 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-900 dark:text-gray-300 dark:placeholder-gray-600">
          <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-r-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out">
            Go
          </button>
        </form>
      </div>

      <!-- Quick Links -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white dark:text-white mb-4">Quick Links</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Home</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Browse Categories</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">How It Works</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Seller Program</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Buyer's Guide</a></li>
        </ul>
      </div>

      <!-- Support & Help -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white dark:text-white mb-4">Support</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Help Center</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Contact Us</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Payments</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Shipping</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Returns</a></li>
        </ul>
      </div>

      <!-- Legal & Social -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white dark:text-white mb-4">Legal & Social</h3>
        <ul class="space-y-3 mb-6">
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Terms of Service</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Privacy Policy</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Cookie Policy</a></li>
        </ul>

        <h3 class="text-lg font-semibold text-white dark:text-white mb-3">Follow Us</h3>
        <div class="flex space-x-4">
          <a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400" aria-label="Facebook">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400" aria-label="Twitter">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-.03.012-.062.022-.094.031a15.753 15.753 0 01-4.87-1.1c-.6-.248-1.077-.736-1.393-1.314-.316-.578-.46-1.229-.425-1.898L.54 12.012c0-.528.106-1.05.316-1.547.21-.497.51-.946.883-1.319a.75.75 0 011.06 1.06c-.19.19-.347.4-.469.626s-.208.468-.231.716c-.024.248-.005.5-.028.747l-.145 1.54c-.035.352-.027.707.022 1.056.05.349.128.69.231 1.018.104.328.23.64.38.932.15.292.316.566.495.823.18.257.369.497.567.72.198.223.407.43.626.626.22.196.447.375.68.536.234.161.474.303.719.424.246.12.498.21.756.264.258.054.52.062.783.024.263-.038.52-.124.767-.257.247-.133.476-.301.688-.504.212-.203.403-.435.572-.68.169-.244.316-.508.438-.79.122-.284.21-.581.264-.889.054-.308.062-.619.024-.926.004-.047-.008-.094-.031-.14L18.423 7.376c-.053-.195-.124-.384-.213-.564-.09-.18-.198-.35-.32-.507-.122-.158-.258-.302-.408-.433-.15-.13-.309-.247-.477-.35-.168-.104-.345-.195-.53-.274-.186-.079-.379-.145-.58-.198-.201-.053-.408-.09-.62-.108-.212-.018-.426-.01-.64.024-.214.034-.424.088-.629.162-.206.074-.4.167-.584.278-.184.11-.357.234-.518.37A15.422 15.422 0 005.817 9.87c-.156.16-.31.332-.46.514-.15.182-.294.376-.432.58-.138.204-.268.419-.389.643-.121.224-.23.457-.324.697-.094.24-.173.486-.237.737-.064.25-.113.5-.147.75-.035.25-.048.5-.038.75s.035.5.094.75a.75.75 0 01-1.463.385l-.014-.044c-.035-.118-.052-.236-.052-.355 0-.203.023-.406.07-.607.046-.2.11-.397.19-.59s.174-.383.277-.565.215-.35.337-.506.26-.302.398-.444.281-.27.429-.39.298-.21.456-.296c.1 L20.25 4.754c.264-.264.55-.498.857-.704.307-.205.63-.377.968-.517.337-.14.686-.245 1.045-.315.359-.07.72-.093 1.082-.068.36.024.717.1.1.75l.135.044c.484.156.953.38 1.402.666.449.287.873.64 1.267 1.055.394.416.758.895 1.08 1.433.323.538.604 1.134.843 1.788.239.654.434 1.353.582 2.09c.147.738.24 1.51.277 2.304l.004.148c.02.483.013.97-.021 1.455-.035.485-.1.968-.194 1.442-.095.474-.221.939-.378 1.392-.158.453-.346.892-.565 1.315-.22.423-.47.828-.753 1.21-.283.381-.598.736-.944 1.066-.347.33-.726.632-1.137.896-.41.264-.845.49-1.299.678-.454.188-.92.338-1.397.449-.477.11-.964.183-1.456.216-.492.033-.984.024-1.472-.027-.488-.05-.968-.142-1.437-.272-.47-.13-.927-.3-1.365-.506-.438-.207-.853-.448-1.246-.723-.393-.275-.76-.583-1.097-.923L8.29 20.25z" />
            </svg>
          </a>
          <a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400" aria-label="Instagram">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12 2c2.716 0 3.056.012 4.122.06c.915.042 1.54.2 2.14.444.6.242 1.063.597 1.57.513a.75.75 0 01.513.513c-.084.507.271 1.007.444 1.607.244.6.402 1.225.444 2.14.048 1.066.06 1.406.06 4.122s-.012 3.056-.06 4.122c-.042.915-.2 1.54-.444 2.14-.242.6-.597 1.063-.513 1.57a.75.75 0 01-.513.513c-.507-.084-1.007.271-1.607.444-.6.244-1.225.402-2.14.444-1.066.048-1.406.06-4.122.06s-3.056-.012-4.122-.06c-.915-.042-1.54-.2-2.14-.444-.6-.242-1.063-.597-1.57-.513a.75.75 0 01-.513-.513c.084-.507-.271-1.007-.444-1.607-.244-.6-.402-1.225-.444-2.14-.048-1.066-.06-1.406-.06-4.122s.012-3.056.06-4.122c.042-.915.2-1.54.444-2.14.242-.6.597-1.063.513-1.57a.75.75 0 01.513-.513c.507.084 1.007-.271 1.607-.444.6-.244 1.225-.402 2.14-.444C8.944 2.012 9.284 2 12 2zm0 3.635l.019.001c.74.004 1.01.018 1.8.055.79.037 1.34.168 1.77.348.43.18.73.4.92.59.19.19.41.49.59.92.18.43.31.98.348 1.77.037.79.051 1.06.055 1.8l.001.019v.038c0 .74-.004 1.01-.055 1.8-.037.79-.168 1.34-.348 1.77-.18.43-.4.73-.59.92-.19.19-.49.41-.92.59-.43.18-.98.31-1.77.348-.79.037-1.06.051-1.8.055l-.019.001h-.038c-.74 0-1.01-.004-1.8-.055-.79-.037-1.34-.168-1.77-.348-.43-.18-.73-.4-.92-.59-.19-.19-.41-.49-.59-.92-.18-.43-.31-.98-.348-1.77-.037-.79-.051-1.06-.055-1.8l-.001-.019v-.038c0-.74.004-1.01.055-1.8.037-.79.168-1.34.348-1.77.18-.43.4-.73.59-.92.19-.19.49-.41.92-.59.43-.18.98-.31 1.77-.348.79-.037 1.06-.051 1.8-.055l.019-.001h.038zM12 7a5 5 0 100 10 5 5 0 000-10zm0 2.5a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm6.5-.25a1.25 1.25 0 11-2.5 0 1.25 1.2.9 0 012.5 0z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400" aria-label="LinkedIn">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400" aria-label="YouTube">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M19.615 3.1c.334-.143.722-.224 1.127-.224.977 0 1.905.39 2.593 1.082l.006.006c.697.697 1.082 1.63 1.082 2.593v8.835c0 .977-.39 1.905-1.082 2.593l-.006.006a3.67 3.67 0 01-2.593 1.082c-.413 0-.806-.082-1.144-.225L10.375 22.8c-.896.385-1.84.453-2.71.215-.87-.238-1.57-.75-1.996-1.42s-.652-1.517-.652-2.457V4.07c0-.94.218-1.83.652-2.457s1.126-1.182 1.996-1.42c.87-.238 1.814-.17 2.71.215L19.615 3.1zm-8.87 5.753l.008 1.722c.002.046.005.092.008.138.003.046.006.092.009.138l.004.062c.01.15.025.298.042.443.017.145.038.286.062.427.024.14.053.277.085.411.032.134.067.264.106.39.039.126.082.249.129.367.047.119.098.234.153.344.055.11.114.215.176.315.063.1.13.193.201.277.142.169.308.318.498.448.19.13.398.24.623.33.225.09.467.16.72.208.253.048.514.075.779.08.265.006.53-.004.79-.03.26-.027.514-.07.76-.13.245-.06.48-.138.705-.236.225-.098.44-.213.64-.34.2-.127.387-.268.56-.423.173-.156.33-.32.47-.492.278-.344.52-.714.735-1.112.215-.398.39-.82.525-1.265.136-.445.234-.908.297-1.385.063-.477.09-.962.08-1.45L20.47 7.64c-.053-.195-.124-.384-.213-.564-.09-.18-.198-.35-.32-.507-.122-.158-.258-.302-.408-.433-.15-.13-.309-.247-.477-.35-.168-.104-.345-.195-.53-.274-.186-.079-.379-.145-.58-.198-.201-.053-.408-.09-.62-.108-.212-.018-.426-.01-.64.024-.214.034-.424.088-.629.162-.206.074-.4.167-.584.278-.184.11-.357.234-.518.37l-.014.013c-.264.264-.55.498-.857.704-.307.205-.63.377-.968.517-.337.14-.686.245-1.045.315-.359.07-.72.093-1.082.068-.36-.024-.717-.1-.75-.75L3.528 7.376c-.053-.195-.124-.384-.213-.564-.09-.18-.198-.35-.32-.507-.122-.158-.258-.302-.408-.433z" />
            </svg>
          </a>
        </div>
      </div>

    </div>

    <div class="mt-12 pt-8 border-t border-gray-800 dark:border-gray-700 text-center text-sm text-gray-500 dark:text-gray-500">
      &copy; <span id="current-year"></span> Marketify. All rights reserved.
      <script>
        document.getElementById('current-year').textContent = new Date().getFullYear();
      </script>
    </div>
  </div>
</footer>

Industrial_Monochromatic_Navigation

Un componente de navegación complejo y centrado en el modo oscuro para empresas industriales y manufactureras, con un diseño monocromático y múltiples elementos interactivos adecuados para paneles de control e interfaces operativas.

Abrir Vista previa

                <header class="bg-gray-950 dark:bg-gray-950 text-gray-200 dark:text-gray-200 shadow-md sticky top-0 z-50">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between flex-wrap md:flex-nowrap">
    <!-- Logo & Brand Name -->
    <div class="flex items-center flex-shrink-0 mr-6 mb-4 md:mb-0">
      <svg class="h-8 w-8 mr-2 text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M9.504 1.134A1 1 0 0110 1h.496a1 1 0 01.496.504l.056.112.013.025.132.265.131.264.496.992.352.704.056.112.013.025.132.265.131.264.496.992.352.704a1 1 0 010 .984l-.352.704-.496.992-.131.264-.132.265-.013.025-.056.112-.352.704-.496.992-.131.264-.132.265-.013.025-.056.112a1 1 0 01-1.992 0l-.056-.112-.013-.025-.132-.265-.131-.264-.496-.992-.352-.704-.056-.112-.013-.025-.132-.265-.131-.264-.496-.992-.352-.704a1 1 0 010-.984l.352-.704.496-.992.131-.264.132-.265.013-.025.056-.112.352-.704.496-.992.131-.264.132-.265.013.025.056.112A1 1 0 019.504 1.134zM9.01 4.509a1 1 0 00-1.98 0l-.055.11-.013.027c-.122.247-.245.495-.367.742l-.244.492a1 1 0 000 .991l.244.492c.122.247.245.495.367.742l.013.027.055.11a1 1 0 001.98 0l.055-.11.013-.027c.122-.247.245-.495.367-.742l.244-.492a1 1 0 000-.991l-.244-.492c-.122-.247-.245-.495-.367-.742l-.013-.027-.055-.11zm-.056-.226l.013-.026.059-.119.006-.012.006-.012.013-.026.059-.119.006-.012.006-.012.013-.026.059-.119.006-.012.006-.012.013-.026.059-.119.006-.012.006-.012.013-.026a1 1 0 011.98 0l.013.026.059.119.006.012.006.012.013.026.059.119.006.012.006.012.013.026.059.119.006.012.006.012.013.026a1 1 0 01-1.98 0l-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026a1 1 0 01-1.98 0l-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026a1 1 0 01-1.98 0l-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026a1 1 0 01-1.98 0l-.013-.026-.059-.119c-.046-.093-.09-.187-.134-.281zm.056.226z" clip-rule="evenodd" />
      </svg>
      <span class="font-semibold text-xl tracking-tight text-blue-400 dark:text-blue-400">InnoManufac</span>
    </div>

    <!-- Mobile Menu Toggle -->
    <div class="block md:hidden mb-4 md:mb-0">
      <button class="navbar-toggler flex items-center px-3 py-2 border rounded text-gray-400 border-gray-600 hover:text-white hover:border-white"
        onclick="document.getElementById('mobile-menu').classList.toggle('hidden'); document.getElementById('mobile-menu').classList.toggle('flex');">
        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
        </svg>
      </button>
    </div>

    <!-- Main Navigation Links (Desktop & Mobile) -->
    <div id="mobile-menu" class="w-full flex-grow hidden md:flex md:items-center md:w-auto mt-4 md:mt-0 flex-col md:flex-row">
      <div class="text-sm md:flex-grow flex flex-col md:flex-row items-center">
        <a href="#dashboard" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 mr-6 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
          Dashboard
        </a>
        <a href="#operations" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 mr-6 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
          Operations
        </a>
        <a href="#analytics" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 mr-6 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
          Analytics
        </a>
        <a href="#maintenance" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 mr-6 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
          Maintenance
        </a>
        <a href="#inventory" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
          Inventory
        </a>
      </div>

      <!-- Search & User Profile -->
      <div class="flex items-center flex-col md:flex-row">
        <div class="relative mb-4 md:mb-0 md:mr-4 w-full md:w-auto">
          <input type="search" placeholder="Search anything..." class="bg-gray-800 dark:bg-gray-800 text-gray-300 dark:text-gray-300 rounded-md py-2 pl-10 pr-4 block w-full leading-normal placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-300 ease-in-out">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <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>
        </div>
        
        <div class="flex items-center space-x-4">
          <!-- Notifications Dropdown (example) -->
          <div class="relative group">
            <button class="text-gray-400 dark:text-gray-400 hover:text-white dark:hover:text-white p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300">
              <svg class="h-6 w-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="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 0a3 3 0 11-6 0m6 0v1h-6v-1m6 0H9"/></svg>
              <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full">3</span>
            </button>
            <div class="absolute right-0 mt-2 w-72 bg-gray-800 dark:bg-gray-800 rounded-md shadow-lg py-1 z-20 hidden group-hover:block transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100">
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 leading-tight">New sensor data critical anomaly</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 leading-tight border-t border-gray-700 dark:border-gray-700">Maintenance scheduled for Line 3</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 leading-tight border-t border-gray-700 dark:border-gray-700">Daily production report available</a>
            </div>
          </div>

          <!-- User Profile Dropdown -->
          <div class="relative group">
            <button class="block w-10 h-10 rounded-full overflow-hidden border-2 border-gray-600 dark:border-gray-600 hover:border-blue-400 dark:hover:border-blue-400 transition duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
              <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/men/86.jpg" alt="User Avatar">
            </button>
            <div class="absolute right-0 mt-2 w-48 bg-gray-800 dark:bg-gray-800 rounded-md shadow-lg py-1 z-20 hidden group-hover:block transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100">
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700">Profile</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700">Settings</a>
              <a href="#" class="block px-4 py-2 text-sm text-red-400 dark:text-red-400 hover:bg-gray-700 dark:hover:bg-gray-700 border-t border-gray-700 dark:border-gray-700 mt-1 pt-2">Sign out</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
</header>

Navegación de redes sociales

Un componente de navegación de redes sociales limpio y minimalista con una paleta verde bosque, diseñado para diseños responsivos y modo oscuro. Cuenta con una navegación principal, un perfil de usuario y una búsqueda.

Abrir Vista previa

                <nav class="bg-emerald-50 dark:bg-gray-900 shadow-sm dark:shadow-lg transition-colors duration-300 md:sticky md:top-0 md:z-50">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-3 flex flex-col md:flex-row items-center justify-between">
    <!-- Logo/Brand Name -->
    <div class="flex items-center justify-between w-full md:w-auto mb-3 md:mb-0">
      <a href="#" class="text-xl md:text-2xl font-bold text-emerald-800 dark:text-emerald-300 tracking-tight flex items-center group">
        <svg class="h-7 w-7 md:h-8 md:w-8 mr-2 text-emerald-600 dark:text-emerald-400 group-hover:rotate-12 transition-transform duration-300" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857M17 20v-2c0-.181-.018-.359-.05-.532a2.997 2.997 0 01-2.976-2.976 2.997 2.997 0 01-2.976 2.976 2.997 2.997 0 01-2.976-2.976A2.997 2.997 0 01-2.976 2.976 2.997 2.997 0 01-2.976 2.976-.05-.532C2.976 2.976 2.976 2.976 2.976 2.976 2.976 2.976 2.976 2.976 2.976 2.976Z" style="transform: scaleX(-1) translate(24px, 0)"></path>
        </svg>
        Connectify
      </a>
      <!-- Mobile Menu Button (Hamburger) -->
      <button class="md:hidden flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 rounded-md" aria-label="Toggle navigation menu">
        <svg class="h-6 w-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="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>

    <!-- Main Navigation & Search (Hidden on Mobile by default, can be toggled via JS) -->
    <div class="hidden md:flex flex-col md:flex-row items-center flex-grow w-full md:w-auto" id="main-nav-menu">
      <ul class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8 lg:space-x-12 mr-0 md:mr-8 lg:mr-12 text-center md:text-left w-full md:w-auto">
        <li>
          <a href="#" class="text-emerald-700 dark:text-emerald-200 hover:text-emerald-900 dark:hover:text-emerald-500 font-medium tracking-wide transition-colors duration-200 flex items-center justify-center md:justify-start py-2 group">
            <svg class="h-5 w-5 mr-2 text-emerald-600 dark:text-emerald-300 group-hover:text-emerald-800 dark:group-hover:text-emerald-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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
            Home
          </a>
        </li>
        <li>
          <a href="#" class="text-emerald-700 dark:text-emerald-200 hover:text-emerald-900 dark:hover:text-emerald-500 font-medium tracking-wide transition-colors duration-200 flex items-center justify-center md:justify-start py-2 group">
            <svg class="h-5 w-5 mr-2 text-emerald-600 dark:text-emerald-300 group-hover:text-emerald-800 dark:group-hover:text-emerald-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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            Messages
          </a>
        </li>
        <li>
          <a href="#" class="text-emerald-700 dark:text-emerald-200 hover:text-emerald-900 dark:hover:text-emerald-500 font-medium tracking-wide transition-colors duration-200 flex items-center justify-center md:justify-start py-2 group">
            <svg class="h-5 w-5 mr-2 text-emerald-600 dark:text-emerald-300 group-hover:text-emerald-800 dark:group-hover:text-emerald-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="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"></path></svg>
            Notifications
            <span class="ml-1 px-2 py-0.5 text-xs font-semibold rounded-full bg-red-500 text-white dark:bg-red-600">3</span>
          </a>
        </li>
      </ul>

      <div class="relative w-full md:w-64 lg:w-80 mt-4 md:mt-0">
        <input type="text" placeholder="Search Connectify..." class="w-full py-2 pl-10 pr-4 rounded-full bg-emerald-100 dark:bg-gray-800 text-emerald-800 dark:text-emerald-100 placeholder-emerald-500 dark:placeholder-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:focus:ring-emerald-600 text-sm md:text-base transition-all duration-200 border border-emerald-200 dark:border-gray-700">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg class="h-5 w-5 text-emerald-500 dark:text-emerald-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>
    </div>

    <!-- User Profile & Settings -->
    <div class="flex items-center space-x-4 mt-3 md:mt-0 ml-0 md:ml-8 lg:ml-12">
      <button aria-label="User profile settings" class="hidden sm:block">
        <img class="h-9 w-9 md:h-10 md:w-10 rounded-full object-cover ring-2 ring-emerald-300 dark:ring-emerald-600 hover:ring-emerald-500 dark:hover:ring-emerald-400 transition-all duration-200" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
      </button>
      <button class="text-emerald-700 dark:text-emerald-200 hover:text-emerald-900 dark:hover:text-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500 rounded-md p-1 md:p-2" aria-label="More options">
        <svg class="h-6 w-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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
      </button>
    </div>
  </div>
</nav>

Playful_Blog_Container

Un contenedor de contenido de blog lúdico y alegre con elementos redondeados y colores tipo caramelo, diseñado para la lectura y el consumo de contenidos. Es totalmente sensible y es compatible con el modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen bg-pink-50 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform hover:scale-[1.01] transition-all duration-300 border-4 border-pink-200 dark:border-pink-800">
    <div class="p-6 sm:p-8 md:p-10 lg:p-12">
      <!-- Header Section -->
      <header class="flex flex-col sm:flex-row items-center sm:justify-between mb-8 gap-4">
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-pink-600 dark:text-pink-400 leading-tight text-center sm:text-left drop-shadow-lg">
          Sweet Reads
        </h1>
        <div class="flex items-center space-x-3 bg-pink-100 dark:bg-gray-700 px-4 py-2 rounded-full shadow-md">
          <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Author Avatar" class="w-12 h-12 rounded-full border-2 border-pink-400 dark:border-pink-600 object-cover">
          <span class="text-lg font-semibold text-pink-700 dark:text-pink-300">By Candice Sugar</span>
        </div>
      </header>

      <!-- Featured Image -->
      <div class="mb-8 relative rounded-2xl overflow-hidden shadow-lg border-4 border-mint-200 dark:border-mint-800 transform hover:scale-[1.01] transition-transform duration-300">
        <img src="https://picsum.photos/1200/600?random=1" alt="Featured image of delightful pastries" class="w-full h-auto object-cover rounded-xl">
        <div class="absolute bottom-4 left-4 right-4 bg-pink-500/80 dark:bg-pink-700/80 backdrop-blur-sm p-3 rounded-xl text-white font-bold text-lg sm:text-xl text-center">
          Indulge Your Sweet Tooth with These Delightful Treats!
        </div>
      </div>

      <!-- Article Content -->
      <article class="prose dark:prose-invert max-w-none text-gray-700 dark:text-gray-300 leading-relaxed space-y-6">
        <h2 class="text-3xl sm:text-4xl font-bold text-pink-700 dark:text-pink-300 leading-snug">
          The Secret Life of Gummy Bears and Why We Love Them So
        </h2>
        <p>
          Ah, gummy bears! Those squishy, colorful, fruit-flavored little delights that transport us back to childhood with every chew. But have you ever stopped to ponder the intricate world within these tiny confectioneries? From their humble beginnings to their current global domination, gummy bears are more than just a sweet treat; they're a cultural phenomenon. Let's dive in!
        </p>
        <p>
          Originally created by Hans Riegel Sr. in Germany in the early 1920s, the first gummy bears were inspired by the dancing bears seen at European circuses. Named "Gummibärchen" (little rubber bears), they were chewy and fruit-flavored, an instant hit. Fast forward a century, and these bear-shaped wonders come in countless flavors, colors, and even shapes, maintaining their irresistible charm.
        </p>
        <figure class="my-8 flex flex-col items-center">
          <img src="https://picsum.photos/800/450?random=2" alt="Close-up of colorful gummy bears" class="rounded-2xl shadow-md border-4 border-mint-300 dark:border-mint-700 w-full md:w-3/4 object-cover">
          <figcaption class="mt-3 text-sm text-gray-500 dark:text-gray-400 text-center">
            A kaleidoscope of gummy goodness, ready to bring joy.
          </figcaption>
        </figure>
        <h3 class="text-2xl sm:text-3xl font-bold text-mint-600 dark:text-mint-400">
          Beyond the Bite: The Science of Sweetness
        </h3>
        <p>
          What makes gummy bears so uniquely satisfying? It's a combination of factors. The primary ingredient, gelatin, gives them their characteristic chewiness. This texture, coupled with a balanced blend of sugars and fruit flavorings, creates a sensory experience that's both comforting and exciting. Our brains are hardwired to enjoy sweet tastes, and the playful form factor only adds to the appeal.
        </p>
        <ul class="list-none space-y-3 p-0">
          <li class="flex items-start">
            <svg class="w-6 h-6 text-pink-500 dark:text-pink-400 mr-2 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span>Irresistible Chewy Texture: That satisfying bounce makes all the difference.</span>
          </li>
          <li class="flex items-start">
            <svg class="w-6 h-6 text-pink-500 dark:text-pink-400 mr-2 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span>Vibrant Colors: Visually appealing and exciting for all ages.</span>
          </li>
          <li class="flex items-start">
            <svg class="w-6 h-6 text-pink-500 dark:text-pink-400 mr-2 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span>Diverse Flavor Profiles: Something for everyone, from cherry to green apple.</span>
          </li>
        </ul>
        <p>
          So next time you pop a handful of these delightful bears, take a moment to appreciate the century of innovation and simple joy packed into each one. They truly are a testament to the power of a good idea, a sprinkle of sugar, and a whole lot of fun!
        </p>
        <p>
          What's your favorite gummy bear color or flavor? Share your thoughts in the comments below!
        </p>
      </article>

      <!-- Share and Comments Section (Placeholder) -->
      <section class="mt-10 pt-8 border-t-2 border-dashed border-pink-300 dark:border-pink-700">
        <h3 class="text-2xl font-bold text-center text-mint-600 dark:text-mint-400 mb-6">Join the Sweet Conversation!</h3>
        <div class="flex flex-wrap justify-center gap-4">
          <button class="flex items-center bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.314l4.94 2.47a3 3 0 10.832-1.664l-4.94-2.47a3.027 3.027 0 000-.68l4.94-2.47A3 3 0 0015 8z"></path></svg>
            Share
          </button>
          <button class="flex items-center bg-mint-500 hover:bg-mint-600 text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-700">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
            Comments
          </button>
        </div>
      </section>
    </div>
  </div>
</div>

Componente del botón Seguir

Un componente de botón 'Seguir' receptivo con una combinación de colores dulces/dulces, diseñado para bolsas de trabajo y plataformas de carrera, con soporte para modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <button class="flex items-center justify-center space-x-2 px-6 py-3 rounded-full text-lg font-semibold text-white transition-all duration-300 ease-in-out
    bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500
    hover:from-pink-600 hover:via-purple-600 hover:to-indigo-600
    focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800
    shadow-lg shadow-pink-300/50 dark:shadow-pink-800/50
    active:scale-95
    dark:text-gray-100 dark:bg-gradient-to-r dark:from-pink-700 dark:via-purple-700 dark:to-indigo-700
    dark:hover:from-pink-800 dark:hover:via-purple-800 dark:hover:to-indigo-800
    dark:focus:ring-pink-600
    ">
    <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="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
    </svg>
    <span>Follow Now</span>
  </button>
</div>

Componente de gráficos neumórficos

Un componente de gráficos complejo y receptivo con un estilo de diseño neumórfico y un esquema de color análogo, adecuado para que un portafolio muestre trabajos o productos. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="min-h-screen p-6 bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-sans text-gray-800 dark:text-gray-200 flex items-center justify-center">
  <div class="container mx-auto px-4 py-8 max-w-6xl">

    <!-- Main Neumorphic Card Container -->
    <div class="bg-purple-100 dark:bg-gray-850 p-8 rounded-3xl shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-500 ease-in-out">

      <header class="mb-10 text-center">
        <h1 class="text-4xl font-extrabold text-indigo-700 dark:text-indigo-400 mb-4 tracking-tight">Portfolio Performance Overview</h1>
        <p class="text-lg text-purple-700 dark:text-purple-300">Visualize your progress with interactive, soft UI charts.</p>
      </header>

      <!-- Analytics Cards Section -->
      <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">

        <!-- Card 1 -->
        <div class="group bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center">
          <div class="w-16 h-16 bg-gradient-to-br from-pink-300 to-red-300 dark:from-pink-600 dark:to-red-600 rounded-full flex items-center justify-center mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark text-white text-3xl font-bold">
            <i class="w-8 h-8 opacity-75" style="background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%222%22 stroke=%22currentColor%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.594l2.25-1.5m-6.003.468L18.75 7.5h-1.091c-.389 0-.711-.29-.757-.679A9.795 9.795 0 0014.25 2.25H6.05a4.5 4.5 0 00-4.5 4.5v11.751m12 0a4.5 4.5 0 00-4.5 4.5v.525A.75.75 0 0110.125 22.5h3.75a.75.75 0 01.75-.75V21a4.5 4.5 0 00-4.5-4.5h-.75%22 /%3E%3C/svg%3E'); display: inline-block; background-size: contain; background-repeat: no-repeat;"></i>
          </div>
          <h3 class="text-3xl font-bold text-red-600 dark:text-red-400 mb-2">+12.5%</h3>
          <p class="text-md text-red-500 dark:text-red-300 group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors">Total Growth</p>
        </div>

        <!-- Card 2 -->
        <div class="group bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center">
          <div class="w-16 h-16 bg-gradient-to-br from-indigo-300 to-purple-300 dark:from-indigo-600 dark:to-purple-600 rounded-full flex items-center justify-center mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark text-white text-3xl font-bold">
            <i class="w-8 h-8 opacity-75" style="background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%222%22 stroke=%22currentColor%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182L12 12.588m-3 2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182L12 12.588m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182L12 8.588m.5 8.281V12.98c0-.5-.494-.954-.99-.954H10.99c-.494 0-.99.454-.99.954v3.291m0 0C6.183 17.11 4.5 14.773 4.5 12c0-3.14 0-5.657 0-5.657s1.517-2.333 4.5-2.333h6c2.983 0 4.5 2.333 4.5 2.333S19.5 8.86 19.5 12c0 2.773-1.683 5.11-4.5 5.991m0 0c-.863 1.096-2.094 1.761-3.497 1.761H12.5c-1.403 0-2.634-.665-3.497-1.761M12 4.5c2.983 0 4.5 2.333 4.5 2.333S16.035 7 12 7c-4.035 0-4.5-.167-4.5-.167S9.017 4.5 12 4.5zM12 19.5c-2.983 0-4.5-2.333-4.5-2.333S7.965 17 12 17c4.035 0 4.5.167 4.5.167S15.017 19.5 12 19.5z%22 /%3E%3C/svg%3E'); display: inline-block; background-size: contain; background-repeat: no-repeat;"></i>
          </div>
          <h3 class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 mb-2">$12,345</h3>
          <p class="text-md text-indigo-500 dark:text-indigo-300 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">Revenue This Month</p>
        </div>

        <!-- Card 3 -->
        <div class="group bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center">
          <div class="w-16 h-16 bg-gradient-to-br from-purple-300 to-pink-300 dark:from-purple-600 dark:to-pink-600 rounded-full flex items-center justify-center mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark text-white text-3xl font-bold">
            <i class="w-8 h-8 opacity-75" style="background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%222%22 stroke=%22currentColor%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M15 19.128a9.38 9.38 0 002.668.236 9.38 9.38 0 002.668-.236l.292-.096.002-.005.002-.006c.725-.24 1.25-.948 1.25-1.745V10.5h-.005a8.775 8.775 0 01-2.903-.787m-1.298.115a9.38 9.38 0 00-2.668-.236 9.38 9.38 0 00-2.668.236l-.292.096-.002.005-.002.006c-.725.24-1.25.948-1.25 1.745v7.5a.75.75 0 00.75.75H13.5c.294 0 .584-.047.863-.129.28-.08.548-.201.797-.367s.475-.386.678-.609.356-.475.46-.757.17-.6-.17-.999a.75.75 0 00-.75-.75h-1c-.414 0-.75-.336-.75-.75V12.75a.75.75 0 01.75-.75h1.5c.414 0 .75.336.75.75v5.006c.729.088 1.393.308 1.956.637l.11.066zM13.5 12h1.5M12 12v.75m-3-2.25H7.5A.75.75 0 006.75 12v7.5c0 .806.525 1.514 1.25 1.745l.002.006.002.005.292.096c1.09.362 2.21.547 3.333.547a11.95 11.95 0 003.497-.379V12.75A.75.75 0 0113.5 12h-.75V9.75a.75.75 0 00-.75-.75h-1.5a.75.75 0 00-.75.75v2.25zM7.5 12h1.5M12 4.5a3.75 3.75 0 100 7.5 3.75 3.75 0 000-7.5zM21.75 12a9.75 9.75 0 10-19.5 0 9.75 9.75 0 0019.5 0z%22 /%3E%3C/svg%3E'); display: inline-block; background-size: contain; background-repeat: no-repeat;"></i>
          </div>
          <h3 class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">350+</h3>
          <p class="text-md text-purple-500 dark:text-purple-300 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">Projects Completed</p>
        </div>

        <!-- Card 4 -->
        <div class="group bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center">
          <div class="w-16 h-16 bg-gradient-to-br from-red-300 to-pink-300 dark:from-red-600 dark:to-pink-600 rounded-full flex items-center justify-center mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark text-white text-3xl font-bold">
            <i class="w-8 h-8 opacity-75" style="background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%222%22 stroke=%22currentColor%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z%22 /%3E%3C/svg%3E'); display: inline-block; background-size: contain; background-repeat: no-repeat;"></i>
          </div>
          <h3 class="text-3xl font-bold text-pink-600 dark:text-pink-400 mb-2">98%</h3>
          <p class="text-md text-pink-500 dark:text-pink-300 group-hover:text-pink-600 dark:group-hover:text-pink-400 transition-colors">Client Satisfaction</p>
        </div>

      </section>

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

        <!-- Line Chart (Placeholder) -->
        <div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out">
          <h2 class="text-2xl font-semibold mb-4 text-indigo-700 dark:text-indigo-400">Overall Performance Trend</h2>
          <div class="aspect-w-16 aspect-h-9 w-full rounded-xl overflow-hidden shadow-neumorphic-light dark:shadow-neumorphic-dark">
            <img src="https://picsum.photos/1000/600?random=1" alt="Line Chart Placeholder" class="w-full h-full object-cover rounded-xl" loading="lazy">
          </div>
          <div class="mt-4 flex flex-wrap gap-2 text-sm text-purple-600 dark:text-purple-300">
            <button class="px-4 py-2 rounded-lg bg-purple-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">1M</button>
            <button class="px-4 py-2 rounded-lg bg-purple-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">3M</button>
            <button class="px-4 py-2 rounded-lg bg-pink-300 dark:bg-pink-700 text-white shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">6M</button>
            <button class="px-4 py-2 rounded-lg bg-purple-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">1Y</button>
            <button class="px-4 py-2 rounded-lg bg-purple-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">All</button>
          </div>
        </div>

        <!-- Bar Chart (Placeholder) -->
        <div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out">
          <h2 class="text-2xl font-semibold mb-4 text-red-700 dark:text-red-400">Projects by Category</h2>
          <div class="aspect-w-16 aspect-h-9 w-full rounded-xl overflow-hidden shadow-neumorphic-light dark:shadow-neumorphic-dark">
            <img src="https://picsum.photos/1000/600?random=2" alt="Bar Chart Placeholder" class="w-full h-full object-cover rounded-xl" loading="lazy">
          </div>
          <div class="mt-4 flex flex-wrap gap-2 text-sm text-red-600 dark:text-red-300">
            <button class="px-4 py-2 rounded-lg bg-red-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">Development</button>
            <button class="px-4 py-2 rounded-lg bg-red-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">Design</button>
            <button class="px-4 py-2 rounded-lg bg-pink-300 dark:bg-pink-700 text-white shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">Marketing</button>
            <button class="px-4 py-2 rounded-lg bg-red-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">Consulting</button>
          </div>
        </div>
      </div>

      <!-- Recent Activity Section -->
      <section class="mt-12">
        <h2 class="text-2xl font-semibold mb-6 text-pink-700 dark:text-pink-400">Recent Milestones & Activity</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

          <!-- Activity Item 1 -->
          <div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out flex items-center">
            <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar" class="w-14 h-14 rounded-full mr-4 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm border-2 border-purple-300 dark:border-purple-600 flex-shrink-0">
            <div>
              <p class="text-lg font-medium text-pink-600 dark:text-pink-300 mb-1">Achieved <span class="font-semibold text-red-600 dark:text-red-400">5-star rating</span> on 'E-commerce Redesign' project.</p>
              <p class="text-sm text-purple-600 dark:text-purple-300">2 hours ago</p>
            </div>
          </div>

          <!-- Activity Item 2 -->
          <div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out flex items-center">
            <img src="https://randomuser.me/api/portraits/women/8.jpg" alt="User Avatar" class="w-14 h-14 rounded-full mr-4 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm border-2 border-pink-300 dark:border-pink-600 flex-shrink-0">
            <div>
              <p class="text-lg font-medium text-pink-600 dark:text-pink-300 mb-1">New client inquiry for <span class="font-semibold text-indigo-600 dark:text-indigo-400">'Mobile App Development'</span>.</p>
              <p class="text-sm text-purple-600 dark:text-purple-300">Yesterday</p>
            </div>
          </div>

          <!-- Activity Item 3 -->
          <div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out flex items-center">
            <img src="https://randomuser.me/api/portraits/men/9.jpg" alt="User Avatar" class="w-14 h-14 rounded-full mr-4 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm border-2 border-red-300 dark:border-red-600 flex-shrink-0">
            <div>
              <p class="text-lg font-medium text-pink-600 dark:text-pink-300 mb-1">Released case study for <span class="font-semibold text-purple-600 dark:text-purple-400">'SaaS Platform UX improvements'</span>.</p>
              <p class="text-sm text-purple-600 dark:text-purple-300">3 days ago</p>
            </div>
          </div>

          <!-- Activity Item 4 -->
          <div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out flex items-center">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-14 h-14 rounded-full mr-4 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm border-2 border-indigo-300 dark:border-indigo-600 flex-shrink-0">
            <div>
              <p class="text-lg font-medium text-pink-600 dark:text-pink-300 mb-1">Featured in 'Top 10 Frontend Developers' article.</p>
              <p class="text-sm text-purple-600 dark:text-purple-300">1 week ago</p>
            </div>
          </div>

        </div>
      </section>

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

<!-- Custom Styles for Neumorphism (consider adding to a CSS file for production) -->
<style>
  /* Light mode shadows */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
  }
  .shadow-neumorphic-light-sm {
    box-shadow: 4px 4px 8px #d9d9d9, -4px -4px 8px #ffffff;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #cbcecb, inset -5px -5px 10px #ffffff;
  }

  /* Dark mode shadows */
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #1a1b1e, -8px -8px 16px #2e3034;
  }
  .dark .shadow-neumorphic-dark-sm {
    box-shadow: 4px 4px 8px #1a1b1e, -4px -4px 8px #2e3034;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #1a1b1e, inset -5px -5px 10px #2e3034;
  }

  /* Responsive aspect ratio */
  .aspect-w-16 {
    position: relative;
    width: 100%;
  }
  .aspect-h-9::before {
    content: '';
    display: block;
    padding-bottom: 56.25%; /* 9/16 for 16:9 aspect ratio */
  }
  .aspect-w-16 > *, .aspect-h-9 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* Custom dark mode background color for deep neumorphism */
  .dark\:bg-gray-850 {
    background-color: #242629;
  }

  /* Custom light mode background colors for main container */
  .bg-gradient-to-br.from-purple-200.via-pink-200.to-red-200 {
    background-image: linear-gradient(to bottom right, #e9d5ff, #fbcfe8, #fecaca);
  }
</style>

Cyberpunk_CRM_Feedback_Component

Un componente de retroalimentación complejo y receptivo para CRM/Business Tools con una estética cyberpunk que utiliza blues corporativos. Incluye varias pestañas, un formulario y una lista de comentarios recientes, compatible con el modo oscuro.

Abrir Vista previa

                <div class="font-sans text-blue-100 bg-gradient-to-br from-blue-950 via-blue-900 to-blue-800 min-h-screen p-4 sm:p-8 md:p-12 dark:from-gray-950 dark:via-gray-900 dark:to-gray-800 transition-colors duration-500">
  <div class="max-w-7xl mx-auto backdrop-blur-sm bg-blue-900/40 border border-blue-700/50 rounded-2xl shadow-2xl overflow-hidden animate-fade-in-up dark:bg-gray-800/40 dark:border-gray-700/50">
    <div class="p-6 sm:p-8 md:p-10 border-b border-blue-700/50 flex flex-col sm:flex-row items-start sm:items-center justify-between">
      <h2 class="text-3xl sm:text-4xl font-bold text-blue-200 tracking-tight glow-text-blue dark:text-gray-200">
        <span class="text-blue-400">//</span> Feedback Nexus
      </h2>
      <div class="flex items-center space-x-4 mt-4 sm:mt-0">
        <button class="relative group text-blue-300 hover:text-blue-100 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-900 dark:focus:ring-offset-gray-900">
          <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="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"></path>
          </svg>
          <span class="absolute -top-1 -right-1 flex h-3 w-3">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
            <span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
          </span>
        </button>
        <img src="https://randomuser.me/api/portraits/men/84.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500 shadow-md transform hover:scale-110 transition duration-300">
      </div>
    </div>

    <div class="flex flex-col md:flex-row">
      <div class="w-full md:w-1/4 p-4 sm:p-6 border-b md:border-b-0 md:border-r border-blue-700/50">
        <nav class="flex flex-col space-y-2">
          <a href="#" class="flex items-center p-3 rounded-md text-blue-200 bg-blue-700/60 hover:bg-blue-600/80 transition duration-300 dark:bg-gray-700/60 dark:hover:bg-gray-600/80 border border-blue-600 dark:border-gray-600 shadow-lg">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
            </svg>
            <span class="font-medium">Overview</span>
          </a>
          <a href="#" class="flex items-center p-3 rounded-md text-blue-300 hover:bg-blue-800/50 transition duration-300 dark:hover:bg-gray-800/50">
            <svg class="w-5 h-5 mr-3" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
            </svg>
            <span class="font-medium">Feedback List</span>
          </a>
          <a href="#" class="flex items-center p-3 rounded-md text-blue-300 hover:bg-blue-800/50 transition duration-300 dark:hover:bg-gray-800/50">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V8z" clip-rule="evenodd"></path>
            </svg>
            <span class="font-medium">New Submission</span>
          </a>
          <a href="#" class="flex items-center p-3 rounded-md text-blue-300 hover:bg-blue-800/50 transition duration-300 dark:hover:bg-gray-800/50">
            <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M11.49 3.17c-.381-.433-.622-.433-.872 0l-5.46 7.64C4.33 11.21 4 11.66 4 12.1v2.5a1.5 1.5 0 001.5 1.5h.5a.5.5 0 00.5-.5V14a.5.5 0 00-.5-.5h-1V12h8v.5h-1a.5.5 0 00-.5.5v2.5a.5.5 0 00.5.5h.5a1.5 1.5 0 001.5-1.5V12.1c0-.44-.33-.89-.66-1.39l-5.46-7.64z" clip-rule="evenodd"></path>
            </svg>
            <span class="font-medium">Analytics</span>
          </a>
        </nav>
      </div>

      <div class="w-full md:w-3/4 p-4 sm:p-6 md:p-8 space-y-8">
        <!-- Overview Section -->
        <section class="bg-blue-800/30 rounded-lg p-6 border border-blue-700/50 shadow-inner-xl dark:bg-gray-700/30 dark:border-gray-700/50">
          <h3 class="text-2xl font-bold text-blue-200 mb-6 glow-text-blue dark:text-gray-200">Feedback Overview</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="bg-blue-700/60 p-5 rounded-lg border border-blue-600 flex flex-col items-center justify-center text-center shadow-lg transform hover:scale-105 transition duration-300 dark:bg-gray-700/60 dark:border-gray-600">
              <div class="text-4xl font-bold text-blue-300 glow-text-blue dark:text-gray-300">1,234</div>
              <p class="text-blue-200 text-sm mt-1">Total Received</p>
            </div>
            <div class="bg-blue-700/60 p-5 rounded-lg border border-blue-600 flex flex-col items-center justify-center text-center shadow-lg transform hover:scale-105 transition duration-300 dark:bg-gray-700/60 dark:border-gray-600">
              <div class="text-4xl font-bold text-green-400 glow-text-green dark:text-green-400">89%</div>
              <p class="text-blue-200 text-sm mt-1">Positive Sentiment</p>
            </div>
            <div class="bg-blue-700/60 p-5 rounded-lg border border-blue-600 flex flex-col items-center justify-center text-center shadow-lg transform hover:scale-105 transition duration-300 dark:bg-gray-700/60 dark:border-gray-600">
              <div class="text-4xl font-bold text-yellow-400 glow-text-yellow dark:text-yellow-400">127</div>
              <p class="text-blue-200 text-sm mt-1">Open Issues</p>
            </div>
            <div class="bg-blue-700/60 p-5 rounded-lg border border-blue-600 flex flex-col items-center justify-center text-center shadow-lg transform hover:scale-105 transition duration-300 dark:bg-gray-700/60 dark:border-gray-600">
              <div class="text-4xl font-bold text-purple-400 glow-text-purple dark:text-purple-400">4.7</div>
              <p class="text-blue-200 text-sm mt-1">Average Rating</p>
            </div>
          </div>
        </section>

        <!-- Recent Feedback Section -->
        <section class="bg-blue-800/30 rounded-lg p-6 border border-blue-700/50 shadow-inner-xl dark:bg-gray-700/30 dark:border-gray-700/50">
          <h3 class="text-2xl font-bold text-blue-200 mb-6 glow-text-blue dark:text-gray-200">Recent Feedback</h3>
          <div class="space-y-4">
            <!-- Feedback Item 1 -->
            <div class="p-4 bg-blue-700/40 rounded-lg border border-blue-600 flex items-start space-x-4 animate-fade-in dark:bg-gray-700/40 dark:border-gray-600">
              <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-md">
              <div class="flex-1">
                <div class="flex justify-between items-center mb-1">
                  <h4 class="font-semibold text-lg text-blue-200">Sarah J. - <span class="text-yellow-300">⭐ 5</span></h4>
                  <span class="text-sm text-blue-400">2 hours ago</span>
                </div>
                <p class="text-blue-100 text-sm mb-2">"The new dashboard is incredibly intuitive! It has significantly streamlined our reporting process. Excellent work!"</p>
                <div class="flex space-x-2">
                  <span class="px-2 py-1 bg-green-600/70 text-green-100 text-xs rounded-full border border-green-500">Feature Request</span>
                  <span class="px-2 py-1 bg-purple-600/70 text-purple-100 text-xs rounded-full border border-purple-500">UX/UI</span>
                </div>
              </div>
            </div>
            <!-- Feedback Item 2 -->
            <div class="p-4 bg-blue-700/40 rounded-lg border border-blue-600 flex items-start space-x-4 animate-fade-in animation-delay-100 dark:bg-gray-700/40 dark:border-gray-600">
              <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-md">
              <div class="flex-1">
                <div class="flex justify-between items-center mb-1">
                  <h4 class="font-semibold text-lg text-blue-200">Michael T. - <span class="text-orange-300">⭐ 3</span></h4>
                  <span class="text-sm text-blue-400">1 day ago</span>
                </div>
                <p class="text-blue-100 text-sm mb-2">"Experiencing occasional lags when loading large datasets in the analytics module. Otherwise, great tool!"</p>
                <div class="flex space-x-2">
                  <span class="px-2 py-1 bg-red-600/70 text-red-100 text-xs rounded-full border border-red-500">Bug Report</span>
                  <span class="px-2 py-1 bg-blue-600/70 text-blue-100 text-xs rounded-full border border-blue-500">Performance</span>
                </div>
              </div>
            </div>
            <!-- Feedback Item 3 -->
            <div class="p-4 bg-blue-700/40 rounded-lg border border-blue-600 flex items-start space-x-4 animate-fade-in animation-delay-200 dark:bg-gray-700/40 dark:border-gray-600">
              <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-md">
              <div class="flex-1">
                <div class="flex justify-between items-center mb-1">
                  <h4 class="font-semibold text-lg text-blue-200">Emily R. - <span class="text-yellow-300">⭐ 4</span></h4>
                  <span class="text-sm text-blue-400">3 days ago</span>
                </div>
                <p class="text-blue-100 text-sm mb-2">"Would be great to have an export to PDF option for custom reports. Current functionality is good though."</p>
                <div class="flex space-x-2">
                  <span class="px-2 py-1 bg-green-600/70 text-green-100 text-xs rounded-full border border-green-500">Enhancement</span>
                  <span class="px-2 py-1 bg-cyan-600/70 text-cyan-100 text-xs rounded-full border border-cyan-500">Reporting</span>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- Submit Feedback Form Section -->
        <section class="bg-blue-800/30 rounded-lg p-6 border border-blue-700/50 shadow-inner-xl dark:bg-gray-700/30 dark:border-gray-700/50">
          <h3 class="text-2xl font-bold text-blue-200 mb-6 glow-text-blue dark:text-gray-200">Submit New Feedback</h3>
          <form class="space-y-4">
            <div>
              <label for="feedback-type" class="block text-blue-200 text-sm font-medium mb-1">
                Feedback Type <span class="text-red-400">*</span>
              </label>
              <select id="feedback-type" name="feedback-type" required
                class="w-full p-3 rounded-md bg-blue-900/60 border border-blue-700 text-blue-100 placeholder-blue-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-custom-inner transition-all duration-300 dark:bg-gray-900/60 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-gray-500">
                <option value="">Select a type</option>
                <option value="bug">Bug Report</option>
                <option value="feature">Feature Request</option>
                <option value="enhancement">Enhancement</option>
                <option value="general">General Comment</option>
                <option value="other">Other</option>
              </select>
            </div>
            <div>
              <label for="subject" class="block text-blue-200 text-sm font-medium mb-1">
                Subject <span class="text-red-400">*</span>
              </label>
              <input type="text" id="subject" name="subject" required placeholder="Summarize your feedback" 
                class="w-full p-3 rounded-md bg-blue-900/60 border border-blue-700 text-blue-100 placeholder-blue-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-custom-inner transition-all duration-300 dark:bg-gray-900/60 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-gray-500">
            </div>
            <div>
              <label for="details" class="block text-blue-200 text-sm font-medium mb-1">
                Details <span class="text-red-400">*</span>
              </label>
              <textarea id="details" name="details" rows="5" required placeholder="Provide detailed information about your feedback..."
                class="w-full p-3 rounded-md bg-blue-900/60 border border-blue-700 text-blue-100 placeholder-blue-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-custom-inner resize-y transition-all duration-300 dark:bg-gray-900/60 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-gray-500"></textarea>
            </div>
            <div>
              <label for="screenshot" class="block text-blue-200 text-sm font-medium mb-1">
                Attach Screenshot / File (Optional)
              </label>
              <input type="file" id="screenshot" name="screenshot" accept="image/*,application/pdf" 
                class="block w-full text-sm text-blue-300 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0
                file:text-sm file:font-semibold file:bg-blue-600/70 file:text-blue-100 hover:file:bg-blue-500/70 transition duration-300
                dark:file:bg-gray-600/70 dark:file:text-gray-100 dark:hover:file:bg-gray-500/70">
            </div>
            <div class="pt-4">
              <button type="submit" 
                class="w-full inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-lg 
                text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transform hover:scale-105 transition-all duration-300 
                glow-on-hover-blue dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-500">
                Submit Feedback <span class="ml-2">&rarr;</span>
              </button>
            </div>
          </form>
        </section>
      </div>
    </div>
  </div>
</div>

<style>
/* Define a custom glow effect for text and buttons */
.glow-text-blue {
  text-shadow: 0 0 5px rgba(59, 130, 246, 0.6), 0 0 10px rgba(59, 130, 246, 0.4), 0 0 15px rgba(59, 130, 246, 0.2);
}

.glow-text-green {
  text-shadow: 0 0 5px rgba(34, 197, 94, 0.6), 0 0 10px rgba(34, 197, 94, 0.4), 0 0 15px rgba(34, 197, 94, 0.2);
}

.glow-text-yellow {
  text-shadow: 0 0 5px rgba(234, 179, 8, 0.6), 0 0 10px rgba(234, 179, 8, 0.4), 0 0 15px rgba(234, 179, 8, 0.2);
}

.glow-text-purple {
  text-shadow: 0 0 5px rgba(168, 85, 247, 0.6), 0 0 10px rgba(168, 85, 247, 0.4), 0 0 15px rgba(168, 85, 247, 0.2);
}

.glow-on-hover-blue {
  box-shadow: 0 0 5px rgba(59, 130, 246, 0.7), 0 0 15px rgba(59, 130, 246, 0.5);
}

.glow-on-hover-blue:hover {
  box-shadow: 0 0 10px rgba(59, 130, 246, 1), 0 0 25px rgba(59, 130, 246, 0.8);
}

/* Custom inner shadow for inputs */
.shadow-custom-inner {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dark .shadow-custom-inner {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

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

.dark .shadow-inner-xl {
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.4);
}

/* Custom keyframes for animations */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.animation-delay-100 {
  animation-delay: 0.1s;
}

.animation-delay-200 {
  animation-delay: 0.2s;
}
</style>

Componente de fuente de actividad

Un complejo componente de alimentación de actividades inspirado en 3D para plataformas inmobiliarias, con tonos tierra, diseño responsivo y compatibilidad con el modo oscuro. Muestra varias actividades relacionadas con la propiedad.

Abrir Vista previa

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-950 min-h-screen font-sans antialiased text-stone-800 dark:text-stone-200">
  <div class="max-w-4xl mx-auto space-y-8">
    <h1 class="text-4xl font-extrabold text-center mb-10 tracking-tight text-wood-900 dark:text-wood-100 drop-shadow-lg leading-tight">
      <span class="block">Property Activity</span> Insights
    </h1>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- Quick Stats Card -->
      <div class="md:col-span-1 bg-gradient-to-br from-stone-50 to-stone-100 dark:from-stone-800 dark:to-stone-900 p-6 rounded-3xl shadow-xl border border-stone-200 dark:border-stone-700 transform hover:scale-[1.01] transition-all duration-300 ease-in-out group">
        <div class="relative flex flex-col items-center justify-center h-full">
          <div class="absolute inset-0 bg-gradient-to-br from-stone-200/50 to-stone-200/30 dark:from-stone-700/50 dark:to-stone-700/30 rounded-3xl -z-10 group-hover:blur-sm transition-all duration-300" style="transform: translateZ(-10px); filter: blur(5px); opacity: 0.7; "></div>
          <h2 class="text-xl font-bold mb-4 text-wood-700 dark:text-wood-200">Quick Stats</h2>
          <ul class="space-y-3 text-center text-lg">
            <li class="flex items-center justify-center font-semibold text-wood-800 dark:text-wood-100">
              <svg class="w-6 h-6 mr-2 text-green-600 dark:text-green-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="M7 12l3 3 7-7m-8 6a4 4 0 11-8 0 4 4 0 018 0zm6 0a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
              New Listings: <span class="ml-2 text-2xl font-extrabold text-green-700 dark:text-green-300">23</span>
            </li>
            <li class="flex items-center justify-center font-semibold text-wood-800 dark:text-wood-100">
              <svg class="w-6 h-6 mr-2 text-blue-600 dark:text-blue-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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0-8H9m3 0h3m-3 6a9 9 0 100-18 9 9 0 000 18z"></path></svg>
              Interests: <span class="ml-2 text-2xl font-extrabold text-blue-700 dark:text-blue-300">189</span>
            </li>
            <li class="flex items-center justify-center font-semibold text-wood-800 dark:text-wood-100">
              <svg class="w-6 h-6 mr-2 text-yellow-600 dark:text-yellow-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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
              Sold: <span class="ml-2 text-2xl font-extrabold text-yellow-700 dark:text-yellow-300">5</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- Recent Activity Feed -->
      <div class="md:col-span-2 bg-gradient-to-br from-stone-50 to-stone-100 dark:from-stone-800 dark:to-stone-900 p-6 rounded-3xl shadow-xl border border-stone-200 dark:border-stone-700 transition-all duration-300 ease-in-out">
        <h2 class="text-2xl font-bold mb-6 text-wood-700 dark:text-wood-200 text-center">Recent Activity</h2>
        <div class="space-y-6 relative ml-4 sm:ml-6 md:ml-12 border-l-4 border-wood-400 dark:border-wood-600">

          <!-- Activity Item 1 -->
          <div class="relative flex items-start group">
            <div class="absolute -left-6 sm:-left-8 md:-left-12 top-0 flex items-center justify-center w-10 h-10 bg-wood-500 rounded-full shadow-lg border-2 border-stone-50 dark:border-wood-800 z-10 transition-transform duration-300 group-hover:scale-110">
              <svg class="w-6 h-6 text-white" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
            </div>
            <div class="ml-6 sm:ml-8 md:ml-12 p-5 bg-stone-100 dark:bg-stone-800 rounded-2xl shadow-md transition-shadow duration-300 hover:shadow-lg w-full relative overflow-hidden transform translateZ(0)">
                <div class="absolute inset-0 bg-white/20 dark:bg-stone-700/20 rounded-2xl -z-10 group-hover:blur-sm transition-all duration-300" style="transform: translateZ(-5px); filter: blur(3px); opacity: 0.6;"></div>
              <p class="text-sm text-stone-500 dark:text-stone-400 mb-2">2 hours ago</p>
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-wood-400 dark:border-wood-600 shadow-md">
                <p class="font-semibold text-wood-700 dark:text-wood-200">John Doe</p>
              </div>
              <p class="text-stone-700 dark:text-stone-300 leading-relaxed">
                <span class="font-medium text-wood-600 dark:text-wood-300">Added a new listing:</span>
                <a href="#" class="font-bold text-lg text-brown-700 dark:text-brown-300 hover:underline ml-1">Luxurious Riverside Villa</a> and detailed its amenities.
              </p>
              <img src="https://picsum.photos/400/250?random=1" alt="Property Image" class="mt-4 rounded-xl shadow-lg w-full max-h-48 object-cover object-center border border-stone-200 dark:border-stone-700">
            </div>
          </div>

          <!-- Activity Item 2 -->
          <div class="relative flex items-start group">
            <div class="absolute -left-6 sm:-left-8 md:-left-12 top-0 flex items-center justify-center w-10 h-10 bg-wood-500 rounded-full shadow-lg border-2 border-stone-50 dark:border-wood-800 z-10 transition-transform duration-300 group-hover:scale-110">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13h5m-5 3h5m-5 3h5"></path></svg>
            </div>
            <div class="ml-6 sm:ml-8 md:ml-12 p-5 bg-stone-100 dark:bg-stone-800 rounded-2xl shadow-md transition-shadow duration-300 hover:shadow-lg w-full relative overflow-hidden transform translateZ(0)">
                <div class="absolute inset-0 bg-white/20 dark:bg-stone-700/20 rounded-2xl -z-10 group-hover:blur-sm transition-all duration-300" style="transform: translateZ(-5px); filter: blur(3px); opacity: 0.6;"></div>
              <p class="text-sm text-stone-500 dark:text-stone-400 mb-2">4 hours ago</p>
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/women/7.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-wood-400 dark:border-wood-600 shadow-md">
                <p class="font-semibold text-wood-700 dark:text-wood-200">Jane Smith</p>
              </div>
              <p class="text-stone-700 dark:text-stone-300 leading-relaxed">
                <span class="font-medium text-wood-600 dark:text-wood-300">Updated property status:</span>
                <a href="#" class="font-bold text-lg text-brown-700 dark:text-brown-300 hover:underline ml-1">Cozy Downtown Apartment</a> is now 'Under Offer'.
              </p>
            </div>
          </div>

          <!-- Activity Item 3 -->
          <div class="relative flex items-start group">
            <div class="absolute -left-6 sm:-left-8 md:-left-12 top-0 flex items-center justify-center w-10 h-10 bg-wood-500 rounded-full shadow-lg border-2 border-stone-50 dark:border-wood-800 z-10 transition-transform duration-300 group-hover:scale-110">
              <svg class="w-6 h-6 text-white" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            </div>
            <div class="ml-6 sm:ml-8 md:ml-12 p-5 bg-stone-100 dark:bg-stone-800 rounded-2xl shadow-md transition-shadow duration-300 hover:shadow-lg w-full relative overflow-hidden transform translateZ(0)">
                <div class="absolute inset-0 bg-white/20 dark:bg-stone-700/20 rounded-2xl -z-10 group-hover:blur-sm transition-all duration-300" style="transform: translateZ(-5px); filter: blur(3px); opacity: 0.6;"></div>
              <p class="text-sm text-stone-500 dark:text-stone-400 mb-2">1 day ago</p>
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-wood-400 dark:border-wood-600 shadow-md">
                <p class="font-semibold text-wood-700 dark:text-wood-200">Emily White</p>
              </div>
              <p class="text-stone-700 dark:text-stone-300 leading-relaxed">
                <span class="font-medium text-wood-600 dark:text-wood-300">Left a new review for:</span>
                <a href="#" class="font-bold text-lg text-brown-700 dark:text-brown-300 hover:underline ml-1">Spacious Family Home</a>.
                "The agent was very helpful and knowledgeable!"
              </p>
            </div>
          </div>

          <!-- Activity Item 4 -->
          <div class="relative flex items-start group">
            <div class="absolute -left-6 sm:-left-8 md:-left-12 top-0 flex items-center justify-center w-10 h-10 bg-wood-500 rounded-full shadow-lg border-2 border-stone-50 dark:border-wood-800 z-10 transition-transform duration-300 group-hover:scale-110">
              <svg class="w-6 h-6 text-white" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            </div>
            <div class="ml-6 sm:ml-8 md:ml-12 p-5 bg-stone-100 dark:bg-stone-800 rounded-2xl shadow-md transition-shadow duration-300 hover:shadow-lg w-full relative overflow-hidden transform translateZ(0)">
                <div class="absolute inset-0 bg-white/20 dark:bg-stone-700/20 rounded-2xl -z-10 group-hover:blur-sm transition-all duration-300" style="transform: translateZ(-5px); filter: blur(3px); opacity: 0.6;"></div>
              <p class="text-sm text-stone-500 dark:text-stone-400 mb-2">2 days ago</p>
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/9.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-wood-400 dark:border-wood-600 shadow-md">
                <p class="font-semibold text-wood-700 dark:text-wood-200">Michael Brown</p>
              </div>
              <p class="text-stone-700 dark:text-stone-300 leading-relaxed">
                <span class="font-medium text-wood-600 dark:text-wood-300">Scheduled a viewing for:</span>
                <a href="#" class="font-bold text-lg text-brown-700 dark:text-brown-300 hover:underline ml-1">Modern City Loft</a> on October 26th.
              </p>
            </div>
          </div>

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

<style>
  /* Custom styles for Earth Tones with 'wood' and 'brown' shades */
  .text-wood-900 { color: #3E2723; }
  .dark\:text-wood-100 { color: #D7CCC8; }
  .text-wood-700 { color: #5D4037; }
  .dark\:text-wood-200 { color: #BCAAA4; }
  .text-wood-800 { color: #4E342E; }
  .dark\:text-wood-100 { color: #D7CCC8; }
  .bg-wood-500 { background-color: #795548; }
  .border-wood-400 { border-color: #8D6E63; }
  .dark\:border-wood-600 { border-color: #6D4C41; }
  .dark\:border-wood-800 { border-color: #4E342E; }
  .border-wood-400 { border-color: #8D6E63; }
  .dark\:border-wood-600 { border-color: #6D4C41; }
  .border-l-4 { border-left-color: #8D6E63; }
  .dark\:border-wood-600 { border-left-color: #6D4C41; }
  .text-wood-600 { color: #6D4C41; }
  .dark\:text-wood-300 { color: #A1887F; }
  .text-brown-700 { color: #7B3F00; /* Darker brown for emphasis */ }
  .dark\:text-brown-300 { color: #CDA27C; /* Lighter brown for dark mode emphasis */ }

  /* 3D Transform and Shadow Adjustments (Perspective required on parent for actual 3D effect) */
  /* Add a perspective to a parent element if you want true 3D transforms */
  /* For this component, we'll apply it to a container, or assume body has it for general use */
  body {
    perspective: 1000px;
  }
</style>

Formulario minimalista de inicio de sesión/registro - Moda/Belleza

Un formulario de inicio de sesión/registro de diseño minimalista y plano adaptado a marcas de moda/belleza, con colores neutros cálidos, capacidad de respuesta total y compatibilidad con el modo oscuro. Ofrece una estética limpia con un enfoque en la experiencia del usuario.

Abrir Vista previa

                <div class="min-h-screen bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-800 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">
  <div class="w-full max-w-md bg-white dark:bg-stone-800 shadow-xl rounded-lg overflow-hidden flex flex-col md:flex-row transition-all duration-300 transform md:hover:scale-105">
    <!-- Image Section - Visible on Larger Screens -->
    <div class="hidden md:flex md:w-1/2 bg-stone-100 dark:bg-stone-700 p-4 items-center justify-center">
      <img src="https://picsum.photos/400/600?grayscale&blur=2" alt="Fashion background" class="object-cover w-full h-full rounded-md shadow-inner opacity-80">
    </div>

    <!-- Form Section -->
    <div class="w-full md:w-1/2 p-6 sm:p-8 lg:p-10 text-stone-700 dark:text-stone-300">
      <h2 id="form-title" class="text-3xl sm:text-4xl font-light text-center mb-6 dark:text-stone-100">Welcome Back</h2>
      
      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium mb-2">Email address</label>
          <input type="email" id="email" name="email" autocomplete="email" required
                 class="w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm
                        focus:ring-stone-500 focus:border-stone-500 dark:bg-stone-700 dark:text-stone-100
                        placeholder-stone-400 dark:placeholder-stone-500 transition-colors duration-200">
        </div>
        
        <div>
          <label for="password" class="block text-sm font-medium mb-2">Password</label>
          <input type="password" id="password" name="password" autocomplete="current-password" required
                 class="w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm
                        focus:ring-stone-500 focus:border-stone-500 dark:bg-stone-700 dark:text-stone-100
                        placeholder-stone-400 dark:placeholder-stone-500 transition-colors duration-200">
        </div>
        
        <div class="flex items-center justify-between text-sm">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox"
                   class="h-4 w-4 text-stone-600 dark:text-stone-400 focus:ring-stone-500 dark:focus:ring-stone-500 border-stone-300 dark:border-stone-600 rounded">
            <label for="remember-me" class="ml-2 block">Remember me</label>
          </div>
          
          <a href="#" class="font-medium text-stone-600 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-200">Forgot your password?</a>
        </div>
        
        <div>
          <button type="submit"
                  class="w-full py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white
                         bg-stone-700 hover:bg-stone-800 dark:bg-stone-500 dark:hover:bg-stone-600
                         focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500
                         dark:focus:ring-offset-stone-800 transition-all duration-200 transform hover:-translate-y-0.5">
            Sign In
          </button>
        </div>
      </form>
      
      <div class="mt-8 text-center text-sm">
        <p>Don't have an account?
          <a href="#" class="font-medium text-stone-600 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-200 ml-1">Sign Up</a>
        </p>
      </div>

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

      <div class="mt-6 flex justify-center space-x-4">
        <button type="button" class="inline-flex items-center justify-center p-3 border border-stone-300 dark:border-stone-600 rounded-full shadow-sm text-stone-500 dark:text-stone-400 hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:focus:ring-offset-stone-800">
          <span class="sr-only">Sign in with Google</span>
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12.48 10.92v3.28h3.36c-.19 1.14-.81 1.94-1.89 2.51v2.19h2.83c1.67-1.53 2.64-3.97 2.64-7.52 0-.91-.12-1.64-.33-2.34H12.48z"/>
            <path d="M5.25 12.00c0 .91.15 1.76.41 2.56l-3.33 2.59C1.65 15.35 1 13.78 1 12.00S1.65 8.65 2.33 7.37l3.33 2.59C5.4 10.24 5.25 11.09 5.25 12.00z"/>
            <path d="M12.48 4.73c1.83 0 3.25.79 4.35 1.7L19.5 3.5C18.06 2.22 16.27 1.5 12.48 1.5c-3.15 0-5.87 1.7-7.39 4.29l3.33 2.59C9.28 6.43 10.7 4.73 12.48 4.73z"/>
            <path d="M23.00 12.00c0-.75-.07-1.42-.2-2.07H12.48L12.48 14.28H21.0c-.23 1.29-.76 2.45-1.58 3.39l2.83 2.19c1.07-1.22 1.63-2.79 1.63-4.86z"/>
          </svg>
        </button>
        <button type="button" class="inline-flex items-center justify-center p-3 border border-stone-300 dark:border-stone-600 rounded-full shadow-sm text-stone-500 dark:text-stone-400 hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:focus:ring-offset-stone-800">
          <span class="sr-only">Sign in with Facebook</span>
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

OrganicNatureInspiredFeedbackComponent

Un componente de retroalimentación de complejidad moderada para sitios web de noticias/periodismo, con un diseño orgánico/inspirado en la naturaleza. Utiliza un esquema de color en blanco y negro con un acento brillante, es totalmente receptivo y admite el modo oscuro.

Abrir Vista previa

                <section class="relative py-16 sm:py-20 lg:py-24 overflow-hidden bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-black">
  <!-- Organic Blob 1 -->
  <div class="absolute top-0 left-0 w-64 h-64 sm:w-80 sm:h-80 lg:w-96 lg:h-96 bg-accent-light dark:bg-accent-dark rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob ease-in-out duration-1000 -translate-x-1/2 -translate-y-1/2"></div>
  <!-- Organic Blob 2 -->
  <div class="absolute bottom-0 right-0 w-64 h-64 sm:w-80 sm:h-80 lg:w-96 lg:h-96 bg-gray-300 dark:bg-gray-700 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-2000 ease-in-out duration-1000 translate-x-1/2 translate-y-1/2"></div>

  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="text-center mb-12 sm:mb-16 lg:mb-20">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-gray-900 dark:text-white leading-tight mb-4">
        What Our Readers Say
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 max-w-2xl mx-auto">
        Dive into authentic feedback from our community. Their insights help us grow and deliver impactful journalism.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-10">
      <!-- Testimonial Card 1 -->
      <div class="relative p-6 sm:p-8 rounded-3xl bg-white dark:bg-gray-800 shadow-xl border border-gray-100 dark:border-gray-700 transform hover:scale-[1.02] transition-transform duration-300 ease-out group">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-transparent via-transparent to-accent-light dark:to-accent-dark opacity-0 group-hover:opacity-10 transition-opacity duration-300 rounded-3xl"></div>
        <blockquote class="relative z-10">
          <p class="text-lg sm:text-xl text-gray-800 dark:text-gray-200 leading-relaxed italic mb-6">
            "This news outlet consistently delivers well-researched and unbiased articles. It's my go-to source for reliable information."
          </p>
          <div class="flex items-center">
            <img class="w-12 h-12 sm:w-14 sm:h-14 rounded-full border-2 border-accent-light dark:border-accent-dark mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Reader Avatar">
            <div>
              <p class="font-semibold text-gray-900 dark:text-white text-base sm:text-lg">John Doe</p>
              <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">Journalism Student</p>
            </div>
          </div>
        </blockquote>
      </div>

      <!-- Testimonial Card 2 -->
      <div class="relative p-6 sm:p-8 rounded-3xl bg-white dark:bg-gray-800 shadow-xl border border-gray-100 dark:border-gray-700 transform hover:scale-[1.02] transition-transform duration-300 ease-out group">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-transparent via-transparent to-accent-light dark:to-accent-dark opacity-0 group-hover:opacity-10 transition-opacity duration-300 rounded-3xl"></div>
        <blockquote class="relative z-10">
          <p class="text-lg sm:text-xl text-gray-800 dark:text-gray-200 leading-relaxed italic mb-6">
            "I appreciate the deep dives into complex topics. The analytical approach truly sets this platform apart from others."
          </p>
          <div class="flex items-center">
            <img class="w-12 h-12 sm:w-14 sm:h-14 rounded-full border-2 border-accent-light dark:border-accent-dark mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Reader Avatar">
            <div>
              <p class="font-semibold text-gray-900 dark:text-white text-base sm:text-lg">Jane Smith</p>
              <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">Data Scientist</p>
            </div>
          </div>
        </blockquote>
      </div>

      <!-- Testimonial Card 3 -->
      <div class="relative p-6 sm:p-8 rounded-3xl bg-white dark:bg-gray-800 shadow-xl border border-gray-100 dark:border-gray-700 transform hover:scale-[1.02] transition-transform duration-300 ease-out group">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-transparent via-transparent to-accent-light dark:to-accent-dark opacity-0 group-hover:opacity-10 transition-opacity duration-300 rounded-3xl"></div>
        <blockquote class="relative z-10">
          <p class="text-lg sm:text-xl text-gray-800 dark:text-gray-200 leading-relaxed italic mb-6">
            "The commitment to factual reporting and diverse perspectives is commendable. It's a news source I can trust."
          </p>
          <div class="flex items-center">
            <img class="w-12 h-12 sm:w-14 sm:h-14 rounded-full border-2 border-accent-light dark:border-accent-dark mr-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Reader Avatar">
            <div>
              <p class="font-semibold text-gray-900 dark:text-white text-base sm:text-lg">Michael Brown</p>
              <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">Retired Educator</p>
            </div>
          </div>
        </blockquote>
      </div>
    </div>

    <!-- Call to Action / Feedback Invitation -->
    <div class="mt-16 sm:mt-20 lg:mt-24 text-center">
      <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-6">
        Your Voice Matters
      </h3>
      <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 max-w-xl mx-auto mb-8">
        We value your thoughts and suggestions. Share your experience to help us improve and serve you better.
      </p>
      <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-accent-dark hover:bg-accent-light dark:bg-accent-light dark:hover:bg-accent-dark transition-colors duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-dark dark:focus:ring-offset-gray-900">
        Provide Feedback
        <svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" 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>
      </a>
    </div>
  </div>
</section>

<style>
  /* Define accent colors for easy modification */
  .bg-accent-light { background-color: #A7F3D0; /* Light green/teal */ }
  .dark\:bg-accent-light { background-color: #10B981; /* Dark mode light green */ }
  .bg-accent-dark { background-color: #10B981; /* Dark green/teal */ }
  .dark\:bg-accent-dark { background-color: #059669; /* Dark mode even darker green */ }
  .border-accent-light { border-color: #A7F3D0; }
  .dark\:border-accent-light { border-color: #10B981; }
  .focus\:ring-accent-dark { --tw-ring-color: #10B981; }

  @keyframes blob {
    0% {
      transform: translate(0, 0) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0, 0) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }
</style>

Componentes de búsqueda

Categorías

Todos los componentes