Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente Visor de archivos

Un componente de visor de archivos complejo diseñado para una cartera, con modo oscuro con colores complementarios, que muestra un árbol de archivos, vista previa del contenido e información detallada. Totalmente responsivo.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 p-4 dark:bg-gray-950 transition-colors duration-300">
  <div class="container mx-auto rounded-lg shadow-xl overflow-hidden md:flex flex-col md:flex-row dark:bg-gray-900 border border-gray-200 dark:border-gray-800">
    <!-- Sidebar / File Tree -->
    <div class="w-full md:w-1/4 bg-gray-50 dark:bg-gray-850 p-4 border-b md:border-b-0 md:border-r border-gray-200 dark:border-gray-800 flex-shrink-0">
      <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-100 flex items-center">
        <svg class="w-5 h-5 mr-2 text-indigo-600 dark:text-orange-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 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
        </svg>
        Projects
      </h3>
      <ul class="space-y-2 text-sm text-gray-700 dark:text-gray-300">
        <li>
          <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
            <svg class="w-4 h-4 mr-2 text-indigo-500 dark:text-orange-500" 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 7v10l2 2h12a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H4z"></path>
            </svg>
            <span class="font-medium">My Portfolio (Active)</span>
          </button>
          <ul class="ml-4 mt-1 space-y-1">
            <li>
              <button class="flex items-center w-full text-left p-2 rounded-md bg-indigo-50 dark:bg-orange-950 text-indigo-700 dark:text-orange-300 font-semibold hover:bg-indigo-100 dark:hover:bg-orange-900 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
                <svg class="w-4 h-4 mr-2 text-indigo-600 dark:text-orange-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 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                </svg>
                README.md
              </button>
            </li>
            <li>
              <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
                <svg class="w-4 h-4 mr-2 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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                index.html
              </button>
            </li>
            <li>
              <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
                <svg class="w-4 h-4 mr-2 text-yellow-500 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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                </svg>
                styles.css
              </button>
            </li>
            <li>
              <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
                <svg class="w-4 h-4 mr-2 text-blue-500 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="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10V5.293a1 1 0 00-.293-.707l-2.414-2.414A1 1 0 0012.586 2H7a2 2 0 00-2 2v16a2 2 0 002 2h10a2 2 0 002-2V10h-6z"></path>
                </svg>
                script.js
              </button>
            </li>
            <li>
              <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
                <svg class="w-4 h-4 mr-2 text-purple-500 dark:text-purple-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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
                assets/
              </button>
            </li>
          </ul>
        </li>
        <li>
          <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
            <svg class="w-4 h-4 mr-2 text-indigo-500 dark:text-orange-500" 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 7v10l2 2h12a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H4z"></path>
            </svg>
            Old Projects
          </button>
        </li>
      </ul>
    </div>

    <!-- Main Content / File Preview -->
    <div class="flex-1 flex flex-col">
      <!-- Top Bar / File Name & Actions -->
      <div class="bg-white dark:bg-gray-850 p-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between flex-wrap gap-2">
        <h2 class="text-lg font-medium text-gray-800 dark:text-gray-100 flex items-center">
          <svg class="w-5 h-5 mr-2 text-indigo-600 dark:text-orange-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 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
          </svg>
          README.md
        </h2>
        <div class="flex space-x-2">
          <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-orange-800 dark:text-orange-100 dark:hover:bg-orange-700 dark:focus:ring-orange-600 dark:focus:ring-offset-gray-900 transition-colors duration-200">
            <svg class="-ml-0.5 mr-2 h-4 w-4" 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 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
            </svg>
            Preview
          </button>
          <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600 dark:focus:ring-gray-600 dark:focus:ring-offset-gray-900 transition-colors duration-200">
            <svg class="-ml-0.5 mr-2 h-4 w-4" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
            </svg>
            Edit
          </button>
        </div>
      </div>

      <!-- File Content / Preview Area -->
      <div class="flex-grow overflow-y-auto p-6 bg-white dark:bg-gray-900 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-gray-400 dark:scrollbar-thumb-gray-600 scrollbar-track-gray-200 dark:scrollbar-track-gray-800">
        <div class="prose dark:prose-invert max-w-none text-gray-800 dark:text-gray-200">
          <h1 class="text-3xl font-bold mb-4 text-indigo-700 dark:text-orange-400">README.md - My Portfolio</h1>
          <p class="mb-4">Welcome to my personal portfolio project! This repository showcases a collection of my best work in web development, focusing on responsive design, modern UI/UX, and performance.</p>
          <h2 class="text-2xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Features:</h2>
          <ul class="list-disc list-inside space-y-2 mb-4">
            <li>Fully responsive design for desktop, tablet, and mobile.</li>
            <li>Implemented with <strong class="text-indigo-600 dark:text-orange-400">HTML5</strong>, <strong class="text-indigo-600 dark:text-orange-400">CSS3</strong> (Tailwind CSS), and Vanilla <strong class="text-indigo-600 dark:text-orange-400">JavaScript</strong>.</li>
            <li>Dark mode support for reduced eye strain.</li>
            <li>Interactive components and smooth animations.</li>
            <li>Optimized for performance and accessibility.</li>
          </ul>
          <h2 class="text-2xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Sections:</h2>
          <ol class="list-decimal list-inside space-y-2 mb-4">
            <li><strong>Home:</strong> Introduction and quick overview.</li>
            <li><strong>About Me:</strong> My background, skills, and values.</li>
            <li><strong>Projects:</strong> Detailed view of key projects with live demos and source code.</li>
            <li><strong>Contact:</strong> How to get in touch.</li>
          </ol>
          <h2 class="text-2xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Technologies Used:</h2>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
            <span class="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-center shadow-sm text-gray-700 dark:text-gray-300">
              <img src="https://picsum.photos/40/40?random=1" alt="Tech Icon" class="w-8 h-8 rounded-full mx-auto mb-2">
              HTML5
            </span>
            <span class="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-center shadow-sm text-gray-700 dark:text-gray-300">
              <img src="https://picsum.photos/40/40?random=2" alt="Tech Icon" class="w-8 h-8 rounded-full mx-auto mb-2">
              Tailwind CSS
            </span>
            <span class="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-center shadow-sm text-gray-700 dark:text-gray-300">
              <img src="https://picsum.photos/40/40?random=3" alt="Tech Icon" class="w-8 h-8 rounded-full mx-auto mb-2">
              JavaScript
            </span>
            <span class="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-center shadow-sm text-gray-700 dark:text-gray-300">
              <img src="https://picsum.photos/40/40?random=4" alt="Tech Icon" class="w-8 h-8 rounded-full mx-auto mb-2">
              Responsive Design
            </span>
          </div>
          <h2 class="text-2xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Setup:</h2>
          <p class="mb-4">To run this project locally, clone the repository and open <code>index.html</code> in your browser.</p>
          <pre class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 text-sm overflow-x-auto border border-gray-200 dark:border-gray-700"><code class="text-gray-800 dark:text-gray-200">git clone https://github.com/yourusername/my-portfolio.git
cd my-portfolio
# Open index.html in your browser</code></pre>
          <p class="mt-4 text-gray-600 dark:text-gray-400">Feel free to explore and provide feedback. Thank you for visiting!</p>
        </div>
      </div>

      <!-- File Details / Bottom Bar (optional, could also be on the side) -->
      <div class="bg-white dark:bg-gray-850 p-4 border-t border-gray-200 dark:border-gray-800 text-sm text-gray-600 dark:text-gray-300 flex justify-between items-center flex-wrap gap-2">
        <div>
          <span class="font-medium text-gray-700 dark:text-gray-200">Updated:</span> 2 hours ago by
          <img class="inline-block h-6 w-6 rounded-full ring-2 ring-indigo-300 dark:ring-orange-600 ml-1 mr-1" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <span class="font-medium text-gray-700 dark:text-gray-200">John Doe</span>
        </div>
        <div>
          <span class="font-medium text-gray-700 dark:text-gray-200">Size:</span> 1.2 KB
        </div>
        <div>
          <span class="font-medium text-gray-700 dark:text-gray-200">Type:</span> Markdown File
        </div>
      </div>
    </div>
  </div>
</div>

Skeuomorphic_Grayscale_Business_Footer

Un componente de navegación de pie de página en escala de grises esqueumórfico y receptivo para sitios web comerciales/corporativos, compatible con el modo oscuro.

Abrir Vista previa

                <footer class="bg-gray-100 dark:bg-gray-900 border-t border-gray-300 dark:border-gray-700 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),inset_0_-1px_0_0_rgba(0,0,0,0.1)] dark:shadow-[inset_0_1px_0_0_rgba(0,0,0,0.2),inset_0_-1px_0_0_rgba(255,255,255,0.05)] pt-12 pb-8">
  <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-8 text-gray-700 dark:text-gray-300">

      <!-- Company Info Section -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200 border-b border-gray-300 dark:border-gray-700 pb-2 shadow-[0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-[0_1px_0_0_rgba(0,0,0,0.2)]">
          <span class="block transform -translate-x-0.5 -translate-y-0.5">About Us</span>
        </h3>
        <p class="text-sm leading-relaxed mb-4">
          Providing innovative solutions with a commitment to excellence. We create value through technology and expertise.
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">
            <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.33V22C17.361 21.056 22 16.299 22 12z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12.996 9.832L14.77 2H18l-5.6 6.4L20 22h-4.432l-3.376-7.056L8 22H4l5.367-12.7L2 2H6.42l3.714 5.3L12.996 9.832zm-2.88 1.134l-.794-1.127L5.704 3H3.04l8.307 10.97L20.89 21h2.748L12.016 9.966l-1.905-.001z"/>
            </svg>
          </a>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.83 9.504.475.083.677-.217.677-.48C9.51 20.259 9.51 18.665 9.51 16.03V15.03c0-1.076-.23-1.477-.45-1.74a.5.5 0 00-.09-.08c-.14-.07-.35-.14-.75-.14-.94 0-1.5-.94-.09-1.34.8-.4 1.25.1 1.25.1a1.9 1.9 0 00.94.31c.88 0 1.2-.18.94-.48-.68-.2-1.35-.61-1.35-.61C7.8 10.02 7.02 9.4 7.02 8.5c0-1.77 1.83-2.02 2.37-2.02.48 0 1.05.27 1.25.48a1.53 1.53 0 00.31-.05c.8-.08 1.5-.18 2-.18C14.73 5.48 15.65 6 15.65 7c0 .54-.2 1.48-.94 1.74a.5.5 0 00-.08.08c-.2.27-.45.67-.45 1.74v1.07c0 2.63.003 4.22.003 4.48 0 .26.2.56.677.48A10 10 0 0022 12.017C22 6.484 17.523 2 12 2z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Quick Links Section -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200 border-b border-gray-300 dark:border-gray-700 pb-2 shadow-[0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-[0_1px_0_0_rgba(0,0,0,0.2)]">
          <span class="block transform -translate-x-0.5 -translate-y-0.5">Quick Links</span>
        </h3>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Services</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Portfolio</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Team</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Blog</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Careers</a></li>
        </ul>
      </div>

      <!-- Resources Section -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200 border-b border-gray-300 dark:border-gray-700 pb-2 shadow-[0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-[0_1px_0_0_rgba(0,0,0,0.2)]">
          <span class="block transform -translate-x-0.5 -translate-y-0.5">Resources</span>
        </h3>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Support Center</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">FAQs</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Privacy Policy</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Terms of Service</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Site Map</a></li>
        </ul>
      </div>

      <!-- Contact Us Section -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200 border-b border-gray-300 dark:border-gray-700 pb-2 shadow-[0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-[0_1px_0_0_rgba(0,0,0,0.2)]">
          <span class="block transform -translate-x-0.5 -translate-y-0.5">Contact Us</span>
        </h3>
        <address class="not-italic text-sm space-y-2">
          <p class="flex items-center"><svg class="w-4 h-4 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M9.667 2.115C13.25 1.523 16.48.513 18.062 2.213A3.684 3.684 0 0020 5.467V16.5c0 .356-.125.688-.346.953A4.6 4.6 0 0117.5 19h-15C1.84 19 1 18.156 1 17V3.5C1 2.399 2.5 2 4.14 2 5.568 2 7.153 2.502 9.667 2.115zM5 9c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H6c-.552 0-1-.448-1-1zm5 0c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H11c-.552 0-1-.448-1-1zm5 0c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H16c-.552 0-1-.448-1-1zm-10 4c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H6c-.552 0-1-.448-1-1zm5 0c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H11c-.552 0-1-.448-1-1zm5 0c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H16c-.552 0-1-.448-1-1z" clip-rule="evenodd"></path></svg> 123 Business Rd, Suite 456</p>
          <p class="pl-6">City, State 12345</p>
          <p class="flex items-center"><svg class="w-4 h-4 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg> +1 (555) 123-4567</p>
          <p class="flex items-center"><svg class="w-4 h-4 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg> [email protected]</p>
        </address>
      </div>
    </div>

    <!-- Copyright and Logo Section -->
    <div class="mt-12 pt-8 text-center border-t border-gray-300 dark:border-gray-700 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-[inset_0_1px_0_0_rgba(0,0,0,0.2)]">
      <div class="flex flex-col items-center justify-center space-y-4 md:flex-row md:space-y-0 md:space-x-8">
        <img src="https://picsum.photos/seed/companylogo/80/40" alt="Company Logo" class="w-20 h-10 object-contain filter grayscale invert dark:invert-0 shadow-[2px_2px_4px_rgba(0,0,0,0.2),-2px_-2px_4px_rgba(255,255,255,0.8)] dark:shadow-[2px_2px_4px_rgba(0,0,0,0.8),-2px_-2px_4px_rgba(255,255,255,0.1)] rounded-sm p-1">
        <p class="text-sm text-gray-600 dark:text-gray-400">&copy; 2023 Your Company, Inc. All rights reserved.</p>
      </div>
    </div>
  </div>
</footer>

Tarjeta de perfil de usuario neumórfico

Una tarjeta de perfil de usuario simple y responsiva con una estética de diseño neumórfico utilizando tonos tierra, adecuada para tableros. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 bg-stone-100 dark:bg-stone-800 min-h-screen flex items-center justify-center font-sans">

  <div class="w-full max-w-sm mx-auto p-6 rounded-3xl
    bg-stone-200 shadow-custom-light
    dark:bg-stone-700 dark:shadow-custom-dark
    transition-all duration-300 ease-in-out
    border border-stone-300 dark:border-stone-600">

    <div class="flex flex-col items-center text-center">
      <div class="relative mb-6">
        <img class="w-32 h-32 rounded-full object-cover
          shadow-custom-light-inset dark:shadow-custom-dark-inset
          border-4 border-stone-200 dark:border-stone-700" src="https://randomuser.me/api/portraits/men/52.jpg" alt="User Avatar">
      </div>

      <h2 class="text-2xl font-semibold text-stone-700 dark:text-stone-200 mb-2
        transition-colors duration-300">John Doe</h2>
      <p class="text-md text-stone-500 dark:text-stone-400 mb-4
        transition-colors duration-300">Software Engineer</p>

      <div class="w-full mb-6">
        <button class="w-full py-3 px-6 rounded-xl
          bg-stone-300 text-stone-700 font-medium
          shadow-custom-light-button
          hover:shadow-custom-light-button-hover
          active:shadow-custom-light-button-pressed
          dark:bg-stone-600 dark:text-stone-200
          dark:shadow-custom-dark-button
          dark:hover:shadow-custom-dark-button-hover
          dark:active:shadow-custom-dark-button-pressed
          transition-all duration-200 ease-in-out
          focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50
          text-base sm:text-lg">
          View Profile
        </button>
      </div>

      <div class="flex justify-center space-x-4 w-full">
        <button class="p-3 rounded-xl
          text-stone-600 dark:text-stone-300
          bg-stone-300 shadow-custom-light-button
          hover:shadow-custom-light-button-hover
          active:shadow-custom-light-button-pressed
          dark:bg-stone-600 dark:shadow-custom-dark-button
          dark:hover:shadow-custom-dark-button-hover
          dark:active:shadow-custom-dark-button-pressed
          transition-all duration-200 ease-in-out
          focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
          </svg>
          <span class="sr-only">Email</span>
        </button>

        <button class="p-3 rounded-xl
          text-stone-600 dark:text-stone-300
          bg-stone-300 shadow-custom-light-button
          hover:shadow-custom-light-button-hover
          active:shadow-custom-light-button-pressed
          dark:bg-stone-600 dark:shadow-custom-dark-button
          dark:hover:shadow-custom-dark-button-hover
          dark:active:shadow-custom-dark-button-pressed
          transition-all duration-200 ease-in-out
          focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
          </svg>
          <span class="sr-only">Portfolio</span>
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Custom Styles for Neumorphism - Add this to your main CSS file or a <style> tag if not using PostCSS for custom utilities -->
<style>
  .shadow-custom-light {
    box-shadow: 7px 7px 14px #b8b8b8, -7px -7px 14px #ffffff;
  }
  .dark .shadow-custom-dark {
    box-shadow: 7px 7px 14px #3d3b38, -7px -7px 14px #575550;
  }

  .shadow-custom-light-inset {
    box-shadow: inset 5px 5px 10px #b8b8b8, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-custom-dark-inset {
    box-shadow: inset 5px 5px 10px #3d3b38, inset -5px -5px 10px #575550;
  }

  /* Buttons */
  .shadow-custom-light-button {
    box-shadow: 5px 5px 10px #b8b8b8, -5px -5px 10px #ffffff;
  }
  .hover\:shadow-custom-light-button-hover:hover {
    box-shadow: 3px 3px 6px #b8b8b8, -3px -3px 6px #ffffff;
  }
  .active\:shadow-custom-light-button-pressed:active {
    box-shadow: inset 3px 3px 6px #b8b8b8, inset -3px -3px 6px #ffffff;
  }

  .dark .shadow-custom-dark-button {
    box-shadow: 5px 5px 10px #3d3b38, -5px -5px 10px #575550;
  }
  .dark .hover\:shadow-custom-dark-button-hover:hover {
    box-shadow: 3px 3px 6px #3d3b38, -3px -3px 6px #575550;
  }
  .dark .active\:shadow-custom-dark-button-pressed:active {
    box-shadow: inset 3px 3px 6px #3d3b38, inset -3px -3px 6px #575550;
  }
</style>

Glassmorphism_Pastel_Mega_Menu

Un componente de mega menú simple y receptivo con un diseño de morfismo de vidrio, combinación de colores pastel y soporte de modo oscuro, adecuado para la navegación en el tablero. Presenta elementos esmerilados y translúcidos con efectos de desenfoque.

Abrir Vista previa

                <nav class="bg-gradient-to-br from-purple-100/60 to-blue-100/60 backdrop-blur-lg dark:from-purple-900/60 dark:to-blue-900/60 dark:text-gray-100 p-4 transition-colors duration-300">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-lg font-semibold text-purple-800 dark:text-purple-200 transition-colors duration-300">Dashboard</div>

    <!-- Mobile Menu Button -->
    <button id="menu-button" class="md:hidden focus:outline-none dark:text-gray-200" aria-label="Toggle menu">
      <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="M4 6h16M4 12h16m-7 6h7"></path>
      </svg>
    </button>

    <!-- Mega Menu Content -->
    <div id="mega-menu" class="hidden md:flex md:items-center md:space-x-8 absolute md:relative top-full left-0 w-full md:w-auto mt-2 md:mt-0 p-4 md:p-0
                            bg-gradient-to-br from-purple-50/70 to-blue-50/70 backdrop-blur-lg dark:from-purple-950/70 dark:to-blue-950/70
                            shadow-lg md:shadow-none rounded-lg md:rounded-none transition-all duration-300 ease-in-out transform md:transform-none
                            opacity-0 md:opacity-100 scale-95 md:scale-100 origin-top md:origin-center">
      <div class="flex flex-col md:flex-row md:space-x-8 space-y-4 md:space-y-0 w-full">

        <!-- Section 1: Overview -->
        <div class="flex-1">
          <h3 class="font-bold text-purple-700 dark:text-purple-300 mb-2 border-b border-purple-200 dark:border-purple-800 pb-1">Overview</h3>
          <ul class="space-y-1">
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Analytics</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Reports</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Summary</a></li>
          </ul>
        </div>

        <!-- Section 2: Management -->
        <div class="flex-1">
          <h3 class="font-bold text-purple-700 dark:text-purple-300 mb-2 border-b border-purple-200 dark:border-purple-800 pb-1">Management</h3>
          <ul class="space-y-1">
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Users</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Settings</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Integrations</a></li>
          </ul>
        </div>

        <!-- Section 3: Quick Links -->
        <div class="flex-1">
          <h3 class="font-bold text-purple-700 dark:text-purple-300 mb-2 border-b border-purple-200 dark:border-purple-800 pb-1">Quick Links</h3>
          <ul class="space-y-1">
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Help Center</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Feedback</a></li>
            <li><a href="#" class="block text-gray-700 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200">Contact Support</a></li>
          </ul>
        </div>

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

<!-- Script for mobile menu toggle (pure CSS solution is complex for mega menus without JS) -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const menuButton = document.getElementById('menu-button');
    const megaMenu = document.getElementById('mega-menu');

    menuButton.addEventListener('click', () => {
      const isHidden = megaMenu.classList.contains('hidden');
      if (isHidden) {
        megaMenu.classList.remove('hidden', 'opacity-0', 'scale-95');
        megaMenu.classList.add('flex', 'opacity-100', 'scale-100');
      } else {
        megaMenu.classList.add('opacity-0', 'scale-95');
        megaMenu.classList.remove('opacity-100', 'scale-100', 'flex');
        // Using a timeout to ensure transition plays before hiding completely
        setTimeout(() => {
          megaMenu.classList.add('hidden');
        }, 300); // Should match the transition duration
      }
    });
  });
</script>

3D_Triadic_Simple_Business_Navigation

Un componente de navegación empresarial simple y receptivo con una estética de diseño 3D y un esquema de color triádico, compatible con el modo oscuro.

Abrir Vista previa

                <nav class="bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-500 shadow-xl dark:from-gray-800 dark:via-zinc-900 dark:to-black transition-all duration-500 ease-in-out">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex-shrink-0">
      <a href="#" class="text-white text-3xl font-extrabold tracking-tight relative group">
        <span class="block transform -translate-x-0.5 -translate-y-0.5 group-hover:-translate-x-1 group-hover:-translate-y-1 transition-transform duration-300 ease-out z-10 relative">3D Company</span>
        <span class="absolute inset-0 bg-yellow-300 dark:bg-sky-400 opacity-60 rounded-lg blur-sm group-hover:blur-md transition-all duration-300 ease-out"></span>
      </a>
    </div>

    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-white relative font-semibold text-lg hover:text-yellow-200 dark:hover:text-sky-300 transition-colors duration-300 ease-in-out group">
        Home
        <span class="absolute inset-0 bg-white opacity-0 rounded -m-1 -z-10 group-hover:opacity-10 dark:bg-gray-700 transition-opacity duration-300 ease-out transform scale-95 group-hover:scale-100"></span>
      </a>
      <a href="#" class="text-white relative font-semibold text-lg hover:text-yellow-200 dark:hover:text-sky-300 transition-colors duration-300 ease-in-out group">
        Services
        <span class="absolute inset-0 bg-white opacity-0 rounded -m-1 -z-10 group-hover:opacity-10 dark:bg-gray-700 transition-opacity duration-300 ease-out transform scale-95 group-hover:scale-100"></span>
      </a>
      <a href="#" class="text-white relative font-semibold text-lg hover:text-yellow-200 dark:hover:text-sky-300 transition-colors duration-300 ease-in-out group">
        About
        <span class="absolute inset-0 bg-white opacity-0 rounded -m-1 -z-10 group-hover:opacity-10 dark:bg-gray-700 transition-opacity duration-300 ease-out transform scale-95 group-hover:scale-100"></span>
      </a>
      <a href="#" class="text-white relative font-semibold text-lg hover:text-yellow-200 dark:hover:text-sky-300 transition-colors duration-300 ease-in-out group">
        Contact
        <span class="absolute inset-0 bg-white opacity-0 rounded -m-1 -z-10 group-hover:opacity-10 dark:bg-gray-700 transition-opacity duration-300 ease-out transform scale-95 group-hover:scale-100"></span>
      </a>
    </div>

    <div class="md:hidden">
      <button id="mobile-menu-button" class="text-white hover:text-yellow-200 dark:hover:text-sky-300 focus:outline-none focus:text-yellow-200 dark:focus:text-sky-300" aria-label="Toggle navigation">
        <svg class="h-8 w-8" 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 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>

  <div id="mobile-menu" class="hidden md:hidden bg-indigo-600 dark:bg-gray-950">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-gray-800 transition-colors duration-300 ease-in-out">Home</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-gray-800 transition-colors duration-300 ease-in-out">Services</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-gray-800 transition-colors duration-300 ease-in-out">About</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-indigo-700 dark:hover:bg-gray-800 transition-colors duration-300 ease-in-out">Contact</a>
    </div>
  </div>
</nav>

<script>
  // Basic JavaScript for mobile menu toggle (not part of Tailwind CSS component but for functional demo)
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mobile-menu');

    if (button && menu) {
      button.addEventListener('click', function() {
        menu.classList.toggle('hidden');
        // Optional: Change icon on toggle
        const icon = button.querySelector('svg');
        if (menu.classList.contains('hidden')) {
          icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
        } else {
          icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>';
        }
      });
    }
  });
</script>

Glassmorphism_Social_Media_Layout_Component

Un componente de diseño de redes sociales complejo y receptivo con diseño de cristal con elementos translúcidos esmerilados, efectos de desenfoque y una combinación de colores complementaria. Incluye una barra lateral, un área de contenido principal y una barra lateral derecha, todas con soporte para el modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-gradient-to-br from-purple-500 to-indigo-700 dark:from-gray-900 dark:to-gray-800 text-white p-4 font-sans">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-4">

    <!-- Left Sidebar -->
    <aside class="md:col-span-1 p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg">
      <div class="flex items-center space-x-3 mb-6">
        <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
        <h1 class="text-xl font-bold text-shadow-sm">GlowNet</h1>
      </div>
      <nav class="space-y-4">
        <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
          <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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 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>
          <span>Home</span>
        </a>
        <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
          <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="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>
          <span>Messages</span>
        </a>
        <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
          <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>Notifications</span>
        </a>
        <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
          <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="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>Profile</span>
        </a>
        <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">
          <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.942 3.33.833 2.35 2.35a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.942 1.543-.833 3.33-2.35 2.35a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.942-3.33-.833-2.35-2.35a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.942-1.543.833-3.33 2.35-2.35a1.724 1.724 0 002.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
          <span>Settings</span>
        </a>
      </nav>
      <button class="mt-8 w-full py-2 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 rounded-lg font-semibold transition-colors duration-300 shadow-md">
        Post
      </button>
    </aside>

    <!-- Main Content Area -->
    <main class="md:col-span-3 lg:col-span-3 space-y-4">

      <!-- Search Bar and Profile -->
      <div class="flex flex-col sm:flex-row items-center justify-between p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg">
        <div class="relative w-full sm:w-2/3 mb-4 sm:mb-0">
          <input type="text" placeholder="Search for posts, people..." class="w-full p-3 pl-10 rounded-lg bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-40 border border-white border-opacity-30 dark:border-gray-600 focus:outline-none focus:ring-1 focus:ring-purple-400 placeholder-white placeholder-opacity-70 dark:placeholder-gray-300">
          <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white text-opacity-70 dark:text-gray-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </div>
        <div class="flex items-center space-x-3">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
          <span class="font-medium hidden sm:block">Jane Doe</span>
        </div>
      </div>

      <!-- Create New Post -->
      <div class="p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg">
        <div class="flex items-center space-x-4 mb-4">
          <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
          <input type="text" placeholder="What's on your mind?" class="flex-grow p-3 rounded-full bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-40 border border-white border-opacity-30 dark:border-gray-600 focus:outline-none focus:ring-1 focus:ring-purple-400 placeholder-white placeholder-opacity-70 dark:placeholder-gray-300">
        </div>
        <div class="flex justify-between items-center">
          <div class="flex space-x-3">
            <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors duration-300" title="Add Photos">
              <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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            </button>
            <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors duration-300" title="Add Video">
              <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="M7 4v16M17 4v16M3 8h4m-4 8h4M17 8h4m-4 8h4M8 17h8m-1-4l4-4m-4 4l4 4m-12 0l-4-4m4 4l-4-4"></path></svg>
            </button>
            <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors duration-300" title="Tag Friends">
              <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 0zM12 14c-1.49 0-2.873.084-4.245.288C7.178 14.614 6 15.698 6 17v1h12v-1c0-1.302-1.178-2.386-2.755-2.612C14.873 14.084 13.49 14 12 14z"></path></svg>
            </button>
          </div>
          <button class="px-6 py-2 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 rounded-full font-semibold transition-colors duration-300 shadow-md">
            Post
          </button>
        </div>
      </div>

      <!-- Example Feed Post 1 -->
      <article class="p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg">
        <div class="flex items-center space-x-3 mb-4">
          <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
          <div>
            <p class="font-semibold">John Smith</p>
            <p class="text-sm text-white text-opacity-70 dark:text-gray-300">2 hours ago</p>
          </div>
        </div>
        <p class="mb-4 text-white text-opacity-90 dark:text-gray-100">Enjoying the breathtaking views from the mountains! Nature always finds a way to surprise me. #travel #nature #mountains</p>
        <img src="https://picsum.photos/600/350" alt="Post Image" class="w-full h-auto rounded-lg mb-4 border border-white border-opacity-20 dark:border-gray-700 object-cover">
        <div class="flex justify-between items-center text-white text-opacity-80 dark:text-gray-200">
          <div class="flex space-x-4">
            <button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
              <span>245 Likes</span>
            </button>
            <button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
              <span>32 Comments</span>
            </button>
          </div>
          <button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path></svg>
            <span>Share</span>
          </button>
        </div>
      </article>

      <!-- Example Feed Post 2 -->
      <article class="p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg">
        <div class="flex items-center space-x-3 mb-4">
          <img src="https://randomuser.me/api/portraits/women/9.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
          <div>
            <p class="font-semibold">Sarah Green</p>
            <p class="text-sm text-white text-opacity-70 dark:text-gray-300">5 hours ago</p>
          </div>
        </div>
        <p class="mb-4 text-white text-opacity-90 dark:text-gray-100">Just finished a new piece for my portfolio! Super excited to share it with you all. What do you think? #art #digitalart #design</p>
        <img src="https://picsum.photos/600/400" alt="Post Image" class="w-full h-auto rounded-lg mb-4 border border-white border-opacity-20 dark:border-gray-700 object-cover">
        <div class="flex justify-between items-center text-white text-opacity-80 dark:text-gray-200">
          <div class="flex space-x-4">
            <button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
              <span>180 Likes</span>
            </button>
            <button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
              <span>25 Comments</span>
            </button>
          </div>
          <button class="flex items-center space-x-1 hover:text-purple-300 transition-colors duration-200">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path></svg>
            <span>Share</span>
          </button>
        </div>
      </article>

    </main>

    <!-- Right Sidebar -->
    <aside class="lg:col-span-1 p-4 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700 shadow-lg hidden lg:block">
      <h3 class="font-bold text-lg mb-4 text-shadow-sm">Trending Topics</h3>
      <ul class="space-y-3 mb-6">
        <li><a href="#" class="text-white text-opacity-80 hover:text-purple-300 transition-colors duration-200">#AIrevolution <span class="text-sm text-opacity-60 block">1.2M posts</span></a></li>
        <li><a href="#" class="text-white text-opacity-80 hover:text-purple-300 transition-colors duration-200">#WebDesignTrends <span class="text-sm text-opacity-60 block">890K posts</span></a></li>
        <li><a href="#" class="text-white text-opacity-80 hover:text-purple-300 transition-colors duration-200">#NewMusicFriday <span class="text-sm text-opacity-60 block">750K posts</span></a></li>
        <li><a href="#" class="text-white text-opacity-80 hover:text-purple-300 transition-colors duration-200">#FitnessChallenge <span class="text-sm text-opacity-60 block">600K posts</span></a></li>
      </ul>

      <h3 class="font-bold text-lg mb-4 text-shadow-sm">Who to Follow</h3>
      <ul class="space-y-4">
        <li class="flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
            <div>
              <p class="font-medium">Emily White</p>
              <p class="text-sm text-white text-opacity-70 dark:text-gray-300">@emilyart</p>
            </div>
          </div>
          <button class="px-4 py-1 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 rounded-full text-sm transition-colors duration-300 shadow-md">Follow</button>
        </li>
        <li class="flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
            <div>
              <p class="font-medium">Michael Brown</p>
              <p class="text-sm text-white text-opacity-70 dark:text-gray-300">@techguru</p>
            </div>
          </div>
          <button class="px-4 py-1 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 rounded-full text-sm transition-colors duration-300 shadow-md">Follow</button>
        </li>
        <li class="flex items-center justify-between">
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-white border-opacity-50 dark:border-gray-600">
            <div>
              <p class="font-medium">Olivia Davis</p>
              <p class="text-sm text-white text-opacity-70 dark:text-gray-300">@foodieolivia</p>
            </div>
          </div>
          <button class="px-4 py-1 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 rounded-full text-sm transition-colors duration-300 shadow-md">Follow</button>
        </li>
      </ul>
    </aside>

  </div>
</div>

Componente de reproductor de vídeo

Un componente de reproductor de vídeo complejo y receptivo para el comercio electrónico, con colores triádicos y un diseño centrado en la microinteracción. Incluye controles de reproducción, volumen, barra de progreso, pantalla completa, configuraciones y una superposición de productos, con soporte completo para el modo oscuro.

Abrir Vista previa

                <div class="p-4 md:p-8 lg:p-12 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">

  <div class="w-full max-w-6xl bg-white dark:bg-gray-850 rounded-2xl shadow-xl overflow-hidden
              flex flex-col lg:flex-row transform transition-all duration-300 ease-in-out
              dark:border dark:border-gray-700">

    <!-- Video Player Section -->
    <div class="relative flex-1 bg-black overflow-hidden group">
      <video class="w-full h-full object-contain" poster="https://picsum.photos/1280/720?random=1" controls="false" playsinline>
        <!-- Replace with actual video source -->
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>

      <!-- Overlay for play button and controls fade -->
      <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-100 group-hover:opacity-100 transition-opacity duration-300">
        <!-- Big Play Button (initially visible, fades out on play) -->
        <button class="absolute text-white text-opacity-80 hover:text-opacity-100 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-teal-500/50 rounded-full">
          <svg class="w-24 h-24" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z" />
          </svg>
        </button>

        <!-- Controls bar (fades in on hover) -->
        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black via-black/70 to-transparent
                    translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out
                    flex flex-col space-y-2 opacity-0 group-hover:opacity-100">

          <!-- Progress Bar -->
          <div class="w-full h-2 bg-gray-700 rounded-full cursor-pointer group">
            <div class="h-full bg-teal-400 rounded-full w-1/3 group-hover:bg-teal-300 transition-all duration-150 relative">
              <div class="absolute -right-2 -top-1 w-4 h-4 bg-teal-400 rounded-full scale-0 group-hover:scale-100 transition-transform duration-150"></div>
            </div>
          </div>

          <!-- Controls -->
          <div class="flex items-center justify-between text-white text-opacity-90">
            <div class="flex items-center space-x-4">
              <!-- Play/Pause -->
              <button class="hover:text-teal-400 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500/50 rounded-md p-1">
                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M14.017 19.823L22 12 14.017 4.177V9H2v6h12.017z" />
                </svg>
              </button>
              <!-- 10s back -->
              <button class="hover:text-teal-400 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500/50 rounded-md p-1">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v-6h-2v6zm0-8h2V7h-2v2zm6.27 4.54l-1.42 1.42C16.14 15.65 15 16 15 16s0-.8.03-1.07l1.09-1.09c.47-.47.66-1.12.5-1.74l-.99-3.46c-.16-.62-.97-1.1-1.55-.77l-1.76.99-1.42-1.42L15 6.77c.46-.22.98-.32 1.5-.27l3.46.99c.62.16 1.1.97.77 1.55l-.99 1.76-1.42 1.42z" />
                </svg>
              </button>

              <!-- Volume -->
              <div class="relative flex items-center group">
                <button class="hover:text-teal-400 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500/50 rounded-md p-1">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M3 10v4c0 .55.45 1 1 1h3l5 5V5l-5 5H4c-.55 0-1 .45-1 1zm12.5 4.58l-1.41-1.41c.95-.95 1.56-2.22 1.56-3.57s-.61-2.62-1.56-3.57l1.41-1.41c1.36 1.36 2.22 3.25 2.22 5s-.86 3.64-2.22 5z" />
                  </svg>
                </button>
                <input type="range" min="0" max="100" value="70" class="ml-2 w-0 group-hover:w-24 overflow-hidden appearance-none bg-transparent h-1 rounded-full dark:bg-gray-700 transition-all duration-300 ease-out focus:outline-none
                                      [&::-webkit-slider-runnable-track]:bg-gray-700 [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-teal-400 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:-mt-1.5
                                      [&::-moz-range-track]:bg-gray-700 [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-thumb]:bg-teal-400 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full">
              </div>

              <span class="text-sm">00:00 / 02:30</span>
            </div>

            <div class="flex items-center space-x-4">
              <!-- Settings -->
              <button class="hover:text-teal-400 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500/50 rounded-md p-1">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
                </svg>
              </button>
              <!-- Fullscreen -->
              <button class="hover:text-teal-400 transition-colors focus:outline-none focus:ring-2 focus:ring-teal-500/50 rounded-md p-1">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
                </svg>
              </button>
            </div>
          </div>

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

    <!-- Product Info Section -->
    <div class="w-full lg:w-96 p-6 lg:p-8 flex flex-col space-y-6 bg-yellow-50 dark:bg-gray-800 
                text-gray-900 dark:text-gray-100 border-t lg:border-t-0 lg:border-l border-yellow-200 dark:border-gray-700">

      <div class="flex justify-between items-start">
        <div>
          <h2 class="text-2xl lg:text-3xl font-extrabold text-indigo-700 dark:text-orange-300 leading-tight">Organic Hand Cream</h2>
          <p class="text-lg text-gray-600 dark:text-gray-400 mt-1">Lavender & Aloe Vera</p>
        </div>
        <span class="text-3xl font-bold text-teal-600 dark:text-teal-400 animate-pulse-once">$29.99</span>
      </div>

      <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
        Discover the soothing power of nature with our best-selling hand cream. Enriched with organic lavender and aloe vera, it deeply moisturizes and rejuvenates your skin, leaving it soft and fragrant.
      </p>

      <!-- Features/Highlights -->
      <div class="grid grid-cols-2 gap-4 text-sm">
        <div class="flex items-center space-x-2 text-gray-800 dark:text-gray-200 group">
          <svg class="w-5 h-5 text-teal-500 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
          <span class="font-medium group-hover:text-indigo-600 dark:group-hover:text-orange-300 transition-colors duration-200 ease-in-out">Organic Certified</span>
        </div>
        <div class="flex items-center space-x-2 text-gray-800 dark:text-gray-200 group">
          <svg class="w-5 h-5 text-teal-500 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2zm6 13H4V8h16v11z"/></svg>
          <span class="font-medium group-hover:text-indigo-600 dark:group-hover:text-orange-300 transition-colors duration-200 ease-in-out">Vegan Friendly</span>
        </div>
        <div class="flex items-center space-x-2 text-gray-800 dark:text-gray-200 group">
          <svg class="w-5 h-5 text-teal-500 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
          <span class="font-medium group-hover:text-indigo-600 dark:group-hover:text-orange-300 transition-colors duration-200 ease-in-out">5-star Rated</span>
        </div>
        <div class="flex items-center space-x-2 text-gray-800 dark:text-gray-200 group">
          <svg class="w-5 h-5 text-teal-500 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
          <span class="font-medium group-hover:text-indigo-600 dark:group-hover:text-orange-300 transition-colors duration-200 ease-in-out">Cruelty-Free</span>
        </div>
      </div>

      <!-- Call to Action -->
      <button class="w-full py-3 px-6 rounded-xl
                     bg-teal-500 text-white text-lg font-semibold shadow-md
                     hover:bg-teal-600 hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-teal-500/50
                     active:scale-98 transform transition-all duration-200 ease-in-out
                     dark:bg-orange-500 dark:hover:bg-orange-600 dark:focus:ring-orange-500/50">
        Add to Cart
        <span class="ml-2 inline-block transition-transform group-hover:translate-x-1 duration-200 animate-bounce-horizontal-once">
          <svg class="w-5 h-5 inline-block" fill="currentColor" viewBox="0 0 24 24">
            <path d="M17.25 10.01l-1.63-1.63c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L15.19 11l-9 9H4v-1.72L11 9.19l1.63 1.63c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L17.25 10.01zM11 6.17l5.24 5.24L11 16.65 6.17 11.24zM16 2l-2 2h-4L8 2H2v20h20V2h-6z"/>
          </svg>
        </span>
      </button>

      <!-- Small Description / Reviews -->
      <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-2">
        <div class="flex -space-x-2 overflow-hidden">
          <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-850" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User avatar">
          <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-850" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User avatar">
          <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-850" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User avatar">
        </div>
        <span>+2,450 Happy Customers</span>
      </div>

    </div>

  </div>

  <!-- Custom keyframe animation definitions for microinteractions -->
  <style>
    @keyframes pulse-once {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.05); opacity: 0.9; }
      100% { transform: scale(1); opacity: 1; }
    }
    .animate-pulse-once {
      animation: pulse-once 1.2s ease-in-out;
    }

    @keyframes bounce-horizontal-once {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(5px); }
      50% { transform: translateX(-5px); }
      75% { transform: translateX(2px); }
    }
    .animate-bounce-horizontal-once {
      animation: bounce-horizontal-once 0.8s ease-out;
    }
  </style>

  <!-- Dark mode toggle for demonstration, not part of the component itself -->
  <script>
    // This script toggles dark mode for demonstration purposes.
    // In a real application, you'd likely use a framework or store user preference.
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }

    function toggleDarkMode() {
      if (document.documentElement.classList.contains('dark')) {
        document.documentElement.classList.remove('dark');
        localStorage.theme = 'light';
      } else {
        document.documentElement.classList.add('dark');
        localStorage.theme = 'dark';
      }
    }
  </script>
  <button onclick="toggleDarkMode()" class="fixed bottom-4 right-4 p-3 rounded-full bg-gray-800 text-white shadow-lg z-50 dark:bg-white dark:text-gray-900 focus:outline-none focus:ring-4 focus:ring-teal-500/50">
    <svg class="w-6 h-6 block dark:hidden" fill="currentColor" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
    <svg class="w-6 h-6 hidden dark:block" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.04 6.29a.75.75 0 0 1 1.06-.02l1.5-1.5a.75.75 0 1 1 1.08 1.04l-1.5 1.5a.75.75 0 0 1-.02 1.06ZM12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12Zm0 1.5a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H12a.75.75 0 0 1 .75.75ZM16.96 6.29A.75.75 0 0 1 18.02 7.35l-1.5 1.5a.75.75 0 0 1-1.06-.02l-1.5-1.5a.75.75 0 0 1 .02-1.06ZM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm5.25 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0v-2.25a.75.75 0 0 1 .75-.75ZM20.72 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5h2.25a.75.75 0 0 1 .75.75ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM7.04 17.71a.75.75 0 0 1-.02-1.06l1.5-1.5a.75.75 0 1 1 1.08 1.04l-1.5 1.5a.75.75 0 0 1-1.06.02Zm9.92 0a.75.75 0 0 1 .02-1.06l1.5-1.5a.75.75 0 1 1 1.04 1.08l-1.5 1.5a.75.75 0 0 1-1.06-.02Z"/></svg>
  </button>

</div>

Componente de línea de tiempo de redes sociales - Glassmorphism

Un componente de línea de tiempo de redes sociales complejo y receptivo con diseño de morfismo de vidrio con esquema de color análogo, soporte de modo oscuro y elementos interactivos para interfaces de redes sociales.

Abrir Vista previa

                <div class="min-h-screen bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl">
    <h1 class="text-4xl sm:text-5xl font-extrabold text-center mb-12 text-gray-900 dark:text-white relative z-10">
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-400 dark:to-purple-500">Your Feed</span>
    </h1>

    <div class="space-y-8 relative">
      <!-- Timeline Line -->
      <div class="absolute left-1/2 -translate-x-1/2 w-0.5 bg-gradient-to-b from-blue-300 to-indigo-400 dark:from-blue-600 dark:to-purple-700 h-full hidden md:block"></div>

      <!-- Post 1 -->
      <article class="relative md:flex md:items-start md:even:flex-row-reverse group">
        <div class="flex-shrink-0 w-full md:w-1/2 p-4 md:p-0 md:group-odd:pr-8 md:group-even:pl-8">
          <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg border border-white/20 dark:border-gray-700/20 rounded-xl shadow-lg p-6 space-y-4 transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-2xl hover:border-white/30 dark:hover:border-gray-600/30">
            <div class="flex items-center space-x-3 mb-4">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-400 dark:border-blue-500 shadow-md">
              <div>
                <h3 class="font-semibold text-lg text-gray-900 dark:text-white">Alex Johnson</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">@alex_joh &#x2022; 2 hours ago</p>
              </div>
            </div>
            <p class="text-gray-800 dark:text-gray-100 leading-relaxed">
              Just finished an amazing hike! The views were absolutely breathtaking. Nature truly is the best therapy. #Hiking #NatureLover #AdventureTime
            </p>
            <img src="https://picsum.photos/600/400?random=1" alt="Post Image" class="w-full h-auto rounded-lg object-cover border border-white/10 dark:border-gray-700/10 shadow-sm">
            <div class="flex justify-between items-center text-gray-700 dark:text-gray-200 mt-4">
              <div class="flex space-x-4">
                <button class="flex items-center space-x-1 hover:text-blue-600 dark:hover:text-blue-400 transform hover:scale-105 transition-transform">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                  <span>128</span>
                </button>
                <button class="flex items-center space-x-1 hover:text-indigo-600 dark:hover:text-indigo-400 transform hover:scale-105 transition-transform">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                  <span>34</span>
                </button>
              </div>
              <button class="flex items-center space-x-1 hover:text-purple-600 dark:hover:text-purple-400 transform hover:scale-105 transition-transform">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 14.406 9.689 15 10.5 15c.811 0 1.618-.594 1.816-1.658L14.24 10.5h-4.48l1.316 2.842z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                <span>Share</span>
              </button>
            </div>
          </div>
        </div>
        <div class="hidden md:block w-fit text-blue-500 dark:text-blue-400 md:absolute left-1/2 -ml-3 top-1/2 -translate-y-1/2 bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-2 rounded-full border-2 border-blue-300 dark:border-blue-600 shadow-md"></div>
      </article>

      <!-- Post 2 -->
      <article class="relative md:flex md:items-start md:even:flex-row-reverse group">
        <div class="flex-shrink-0 w-full md:w-1/2 p-4 md:p-0 md:group-odd:pr-8 md:group-even:pl-8">
          <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg border border-white/20 dark:border-gray-700/20 rounded-xl shadow-lg p-6 space-y-4 transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-2xl hover:border-white/30 dark:hover:border-gray-600/30">
            <div class="flex items-center space-x-3 mb-4">
              <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-indigo-400 dark:border-indigo-500 shadow-md">
              <div>
                <h3 class="font-semibold text-lg text-gray-900 dark:text-white">Sarah Chen</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">@sarah_c_design &#x2022; 4 hours ago</p>
              </div>
            </div>
            <p class="text-gray-800 dark:text-gray-100 leading-relaxed">
              New design mockups are finally ready! So excited to get feedback on the new UX flow. What do you all think of the dark mode implementation?
            </p>
            <img src="https://picsum.photos/600/400?random=2" alt="Post Image" class="w-full h-auto rounded-lg object-cover border border-white/10 dark:border-gray-700/10 shadow-sm">
            <div class="flex justify-between items-center text-gray-700 dark:text-gray-200 mt-4">
              <div class="flex space-x-4">
                <button class="flex items-center space-x-1 hover:text-blue-600 dark:hover:text-blue-400 transform hover:scale-105 transition-transform">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                  <span>210</span>
                </button>
                <button class="flex items-center space-x-1 hover:text-indigo-600 dark:hover:text-indigo-400 transform hover:scale-105 transition-transform">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                  <span>58</span>
                </button>
              </div>
              <button class="flex items-center space-x-1 hover:text-purple-600 dark:hover:text-purple-400 transform hover:scale-105 transition-transform">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 14.406 9.689 15 10.5 15c.811 0 1.618-.594 1.816-1.658L14.24 10.5h-4.48l1.316 2.842z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                <span>Share</span>
              </button>
            </div>
          </div>
        </div>
        <div class="hidden md:block w-fit text-indigo-500 dark:text-indigo-400 md:absolute left-1/2 -ml-3 top-1/2 -translate-y-1/2 bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-2 rounded-full border-2 border-indigo-300 dark:border-indigo-600 shadow-md"></div>
      </article>

      <!-- Post 3 -->
      <article class="relative md:flex md:items-start md:even:flex-row-reverse group">
        <div class="flex-shrink-0 w-full md:w-1/2 p-4 md:p-0 md:group-odd:pr-8 md:group-even:pl-8">
          <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg border border-white/20 dark:border-gray-700/20 rounded-xl shadow-lg p-6 space-y-4 transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-2xl hover:border-white/30 dark:hover:border-gray-600/30">
            <div class="flex items-center space-x-3 mb-4">
              <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-purple-500 shadow-md">
              <div>
                <h3 class="font-semibold text-lg text-gray-900 dark:text-white">Michael Lee</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">@mike_dev &#x2022; 8 hours ago</p>
              </div>
            </div>
            <p class="text-gray-800 dark:text-gray-100 leading-relaxed">
              Coding late tonight, building out new features for the app! Energy drinks and good music are getting me through. Almost there! 💻 #FrontendDev #CodingLife
            </p>
            <div class="flex justify-between items-center text-gray-700 dark:text-gray-200 mt-4">
              <div class="flex space-x-4">
                <button class="flex items-center space-x-1 hover:text-blue-600 dark:hover:text-blue-400 transform hover:scale-105 transition-transform">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                  <span>95</span>
                </button>
                <button class="flex items-center space-x-1 hover:text-indigo-600 dark:hover:text-indigo-400 transform hover:scale-105 transition-transform">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                  <span>21</span>
                </button>
              </div>
              <button class="flex items-center space-x-1 hover:text-purple-600 dark:hover:text-purple-400 transform hover:scale-105 transition-transform">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 14.406 9.689 15 10.5 15c.811 0 1.618-.594 1.816-1.658L14.24 10.5h-4.48l1.316 2.842z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                <span>Share</span>
              </button>
            </div>
          </div>
        </div>
        <div class="hidden md:block w-fit text-purple-500 dark:text-purple-400 md:absolute left-1/2 -ml-3 top-1/2 -translate-y-1/2 bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-2 rounded-full border-2 border-purple-300 dark:border-purple-600 shadow-md"></div>
      </article>
    </div>
  </div>
</div>

Componente de mapa del sitio Glassmorphism

Un componente de mapa del sitio responsivo con un diseño de cristal, combinación de colores análoga y compatibilidad con modo oscuro, adecuado para sitios web comerciales y corporativos.

Abrir Vista previa

                <div class="min-h-screen bg-gradient-to-br from-green-50 to-blue-50 py-12 px-4 sm:px-6 lg:px-8 dark:from-gray-900 dark:to-green-950">
  <div class="max-w-7xl mx-auto dark:text-gray-200">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center text-gray-900 mb-12 dark:text-white">
      Explore Our Site
    </h2>

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

      <!-- Column 1: Company -->
      <div class="relative p-8 rounded-3xl overflow-hidden shadow-xl border border-white border-opacity-30 backdrop-filter backdrop-blur-lg backdrop-saturate-180 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300 to-green-300 opacity-20 dark:from-purple-900 dark:to-blue-900 rounded-3xl"></div>
        <div class="relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-green-900 dark:text-emerald-500">Company</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">About Us</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Our Mission</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Team</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Careers</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Contact Us</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Press & Media</a></li>
          </ul>
        </div>
      </div>

      <!-- Column 2: Services & Solutions -->
      <div class="relative p-8 rounded-3xl overflow-hidden shadow-xl border border-white border-opacity-30 backdrop-filter backdrop-blur-lg backdrop-saturate-180 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300 to-green-300 opacity-20 dark:from-purple-900 dark:to-blue-900 rounded-3xl"></div>
        <div class="relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-green-900 dark:text-emerald-500">Services & Solutions</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Enterprise Solutions</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Data Analytics</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Cloud Computing</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Cybersecurity</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Consulting</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Managed Services</a></li>
          </ul>
        </div>
      </div>

      <!-- Column 3: Resources & News -->
      <div class="relative p-8 rounded-3xl overflow-hidden shadow-xl border border-white border-opacity-30 backdrop-filter backdrop-blur-lg backdrop-saturate-180 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300 to-green-300 opacity-20 dark:from-purple-900 dark:to-blue-900 rounded-3xl"></div>
        <div class="relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-green-900 dark:text-emerald-500">Resources & News</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Blog</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Case Studies</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Whitepapers</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Webinars</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">FAQ</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Latest News</a></li>
          </ul>
        </div>
      </div>

      <!-- Column 4: Support -->
      <div class="relative p-8 rounded-3xl overflow-hidden shadow-xl border border-white border-opacity-30 backdrop-filter backdrop-blur-lg backdrop-saturate-180 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300 to-green-300 opacity-20 dark:from-purple-900 dark:to-blue-900 rounded-3xl"></div>
        <div class="relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-green-900 dark:text-emerald-500">Support</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Help Center</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Submit a Ticket</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Documentation</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Service Status</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Partnerships</a></li>
          </ul>
        </div>
      </div>

      <!-- Column 5: Legal -->
      <div class="relative p-8 rounded-3xl overflow-hidden shadow-xl border border-white border-opacity-30 backdrop-filter backdrop-blur-lg backdrop-saturate-180 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300 to-green-300 opacity-20 dark:from-purple-900 dark:to-blue-900 rounded-3xl"></div>
        <div class="relative z-10">
          <h3 class="text-2xl font-bold mb-4 text-green-900 dark:text-emerald-500">Legal</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Privacy Policy</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Terms of Service</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Cookie Policy</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Legal Disclaimers</a></li>
          </ul>
        </div>
      </div>

      <!-- Column 6: Industries (Example with Image) -->
      <div class="relative p-8 rounded-3xl overflow-hidden shadow-xl border border-white border-opacity-30 backdrop-filter backdrop-blur-lg backdrop-saturate-180 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 flex flex-col justify-between transform transition duration-500 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-300 to-green-300 opacity-20 dark:from-purple-900 dark:to-blue-900 rounded-3xl"></div>
        <div class="relative z-10 flex-grow">
          <h3 class="text-2xl font-bold mb-4 text-green-900 dark:text-emerald-500">Industries</h3>
          <ul class="space-y-3 mb-6">
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Finance</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Healthcare</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Retail</a></li>
            <li><a href="#" class="text-lg text-green-800 hover:text-green-600 dark:text-gray-200 dark:hover:text-white transition duration-300">Manufacturing</a></li>
          </ul>
        </div>
        <div class="relative z-10 mt-auto">
          <img src="https://picsum.photos/400/250" alt="Placeholder Image for Industries" class="rounded-xl shadow-lg w-full h-auto object-cover">
        </div>
      </div>

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

Acordeón Neumórfico

Un componente de acordeón simple, sensible y compatible con el modo oscuro con un diseño de escala de grises neumórficos, adecuado para secciones de cartera.

Abrir Vista previa

                <div class="max-w-xl mx-auto p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-inner dark:shadow-inner-dark">
  <div class="text-center mb-6">
    <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100">My Projects</h2>
    <p class="mt-2 text-md text-gray-600 dark:text-gray-300">Here's a glimpse of my recent work.</p>
  </div>

  <div class="group mb-4">
    <input type="checkbox" id="accordion-1" class="hidden peer" />
    <label for="accordion-1" class="flex items-center justify-between p-4 cursor-pointer rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 font-semibold text-lg
      shadow-neumorphic dark:shadow-neumorphic-dark transition duration-300 ease-in-out
      peer-checked:shadow-neumorphic-inset dark:peer-checked:shadow-neumorphic-inset-dark">
      <span>Project Alpha</span>
      <svg class="w-6 h-6 transform transition-transform duration-300 group-hover:scale-110 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
      </svg>
    </label>
    <div class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-40">
      <div class="p-4 pt-2 text-gray-700 dark:text-gray-300">
        <p class="mb-2 text-sm">A responsive web application built with modern front-end technologies. Focused on delivering a seamless user experience.</p>
        <img src="https://picsum.photos/400/250?random=1" alt="Project Alpha Screenshot" class="w-full h-auto rounded-lg shadow-sm mb-2">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
      </div>
    </div>
  </div>

  <div class="group mb-4">
    <input type="checkbox" id="accordion-2" class="hidden peer" />
    <label for="accordion-2" class="flex items-center justify-between p-4 cursor-pointer rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 font-semibold text-lg
      shadow-neumorphic dark:shadow-neumorphic-dark transition duration-300 ease-in-out
      peer-checked:shadow-neumorphic-inset dark:peer-checked:shadow-neumorphic-inset-dark">
      <span>Project Beta</span>
      <svg class="w-6 h-6 transform transition-transform duration-300 group-hover:scale-110 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
      </svg>
    </label>
    <div class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-40">
      <div class="p-4 pt-2 text-gray-700 dark:text-gray-300">
        <p class="mb-2 text-sm">Developed a robust backend API for data management and user authentication. Scalable and efficient.</p>
        <img src="https://picsum.photos/400/250?random=2" alt="Project Beta Screenshot" class="w-full h-auto rounded-lg shadow-sm mb-2">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
      </div>
    </div>
  </div>

  <div class="group">
    <input type="checkbox" id="accordion-3" class="hidden peer" />
    <label for="accordion-3" class="flex items-center justify-between p-4 cursor-pointer rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 font-semibold text-lg
      shadow-neumorphic dark:shadow-neumorphic-dark transition duration-300 ease-in-out
      peer-checked:shadow-neumorphic-inset dark:peer-checked:shadow-neumorphic-inset-dark">
      <span>Project Gamma</span>
      <svg class="w-6 h-6 transform transition-transform duration-300 group-hover:scale-110 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
      </svg>
    </label>
    <div class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-40">
      <div class="p-4 pt-2 text-gray-700 dark:text-gray-300">
        <p class="mb-2 text-sm">Designed and implemented UI/UX for a mobile application, focusing on intuitive navigation and visual hierarchy.</p>
        <img src="https://picsum.photos/400/250?random=3" alt="Project Gamma Screenshot" class="w-full h-auto rounded-lg shadow-sm mb-2">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
      </div>
    </div>
  </div>
</div>

<!-- To make neumorphism work, you need CSS variables in your global CSS. -->
<!-- Add this to your main CSS file (e.g., style.css or a <style> tag): -->
<!--
:root {
  --shadow-light: #ffffff;
  --shadow-dark: #cccccc;
  --neumorphic-blur: 10px;
  --neumorphic-distance: 4px;
}

.dark {
  --shadow-light: #444444;
  --shadow-dark: #1a1a1a;
}

.shadow-neumorphic {
  box-shadow: var(--neumorphic-distance) var(--neumorphic-distance) var(--neumorphic-blur) var(--shadow-dark), 
              calc(-1 * var(--neumorphic-distance)) calc(-1 * var(--neumorphic-distance)) var(--neumorphic-blur) var(--shadow-light);
}

.shadow-neumorphic-dark {
  box-shadow: var(--neumorphic-distance) var(--neumorphic-distance) var(--neumorphic-blur) var(--shadow-dark), 
              calc(-1 * var(--neumorphic-distance)) calc(-1 * var(--neumorphic-distance)) var(--neumorphic-blur) var(--shadow-light);
}

.shadow-neumorphic-inset {
  box-shadow: inset var(--neumorphic-distance) var(--neumorphic-distance) var(--neumorphic-blur) var(--shadow-dark), 
              inset calc(-1 * var(--neumorphic-distance)) calc(-1 * var(--neumorphic-distance)) var(--neumorphic-blur) var(--shadow-light);
}

.shadow-neumorphic-inset-dark {
  box-shadow: inset var(--neumorphic-distance) var(--neumorphic-distance) var(--neumorphic-blur) var(--shadow-dark), 
              inset calc(-1 * var(--neumorphic-distance)) calc(-1 * var(--neumorphic-distance)) var(--neumorphic-blur) var(--shadow-light);
}

.shadow-inner {
  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.1), inset -3px -3px 6px rgba(255,255,255,0.7);
}

.dark .shadow-inner-dark {
  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.6), inset -3px -3px 6px rgba(255,255,255,0.05);
}
-->

1 ... 67 68 69 70 71 ... 282

Categorías

Todos los componentes