Componentes de búsqueda

Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Skeuomorphic_Monochromatic_File_Viewer

Un componente de visor de archivos esqueuomórfico complejo para un mercado, diseñado con un esquema de color monocromático. Incluye una lista de archivos, un panel de vista previa, botones de acción y una sección de información detallada, todo ello sin dejar de responder y ser compatible con el modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 bg-blue-100 dark:bg-gray-900 min-h-screen font-sans antialiased flex items-center justify-center">
  <div class="flex flex-col lg:flex-row w-full max-w-7xl mx-auto border-4 border-blue-300 dark:border-gray-700 rounded-3xl shadow-xl overflow-hidden
    bg-gradient-to-br from-blue-200 to-blue-300 dark:from-gray-800 dark:to-gray-900 p-2 sm:p-4 lg:p-6
    transition-all duration-300 ease-in-out transform hover:scale-[1.005]">

    <!-- Left Pane: File List / Navigation -->
    <div class="lg:w-1/3 xl:w-1/4 bg-blue-100 dark:bg-gray-850 p-4 rounded-xl mb-4 lg:mb-0 lg:mr-4
      shadow-inner-sm border border-blue-200 dark:border-gray-700
      flex flex-col">
      <div class="text-lg font-bold text-blue-800 dark:text-blue-200 mb-4 pb-2 border-b border-blue-300 dark:border-gray-700
        shadow-text-light dark:shadow-text-dark text-center tracking-wide">File Browser</div>

      <div class="mb-4 relative">
        <input type="text" placeholder="Search files..." class="w-full p-3 rounded-full bg-blue-50 dark:bg-gray-800 text-blue-800 dark:text-blue-200
          placeholder-blue-400 dark:placeholder-gray-500 border border-blue-200 dark:border-gray-700
          shadow-inset-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 pl-10">
        <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-blue-500 dark:text-gray-500" fill="currentColor" viewBox="0 0 24 24" width="20" height="20">
          <path d="M10 18a8 8 0 100-16 8 8 0 000 16zM21.707 20.293L17 15.586A8 8 0 0018 10c0-1.89-.5-3.66-1.37-5.18L17.707 4.293a1 1 0 01-1.414 1.414L15 6.414A9.957 9.957 0 0110 0c-5.523 0-10 4.477-10 10s4.477 10 10 10c1.88 0 3.65-.52 5.17-1.38l-.707.707a.999.999 0 010 1.414.999.999 0 01-1.414 0l-5.707-5.707A9.957 9.957 0 010 10C0 4.477 4.477 0 10 0s10 4.477 10 10c0 1.9-.53 3.67-1.42 5.19l5.707 5.707a.999.999 0 010 1.414.999 0 01-1.414 0z" />
        </svg>
      </div>

      <ul class="space-y-2 overflow-y-auto flex-grow pr-2 scrollbar-thumb-blue-400 scrollbar-track-blue-100 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-800 scrollbar-thin">
        <!-- File List Item -->
        <li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
          bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
          hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
          shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
          <div class="flex items-center">
            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
              <path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7zM6 4h6v5a1 1 0 01-1 1H6V4zm14 16H6V4h5v6h6v10z" />
            </svg>
            <span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">Product_Catalogue_Q3.pdf</span>
          </div>
          <small class="text-blue-500 dark:text-gray-400 text-xs">1.2 MB</small>
        </li>
        <li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
          bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
          hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
          shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
          <div class="flex items-center">
            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" 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-2 14.5l-3.5-3.5L7 11l3 3 6-6 1.5 1.5z" />
            </svg>
            <span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">Market_Research_Report.docx</span>
          </div>
          <small class="text-blue-500 dark:text-gray-400 text-xs">890 KB</small>
        </li>
        <li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
          bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
          hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
          shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
          <div class="flex items-center">
            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" 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 2zM12 9c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 10.9V22c-5.52-.55-9.98-4.84-10-10H2.05c.02 4.41 3.51 7.9 7.95 7.9zm0-18.9V2c5.52.55 9.98 4.84 10 10h1.95c-.02-4.41-3.51-7.9-7.95-7.9zM12 4.1L2.05 4.1A9.957 9.957 0 0110 0c5.52 0 10 4.48 10 10s-4.48 10-10 10-10-4.48-10-10h1.95A7.95 7.95 0 0012 4.1zm0 15.8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z" />
            </svg>
            <span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">Contract_Draft_V2.docx</span>
          </div>
          <small class="text-blue-500 dark:text-gray-400 text-xs">2.1 MB</small>
        </li>
         <li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
          bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
          hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
          shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
          <div class="flex items-center">
            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" 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-2 14.5l-3.5-3.5L7 11l3 3 6-6 1.5 1.5z" />
            </svg>
            <span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">Quarterly_Sales_2023.xlsx</span>
          </div>
          <small class="text-blue-500 dark:text-gray-400 text-xs">1.5 MB</small>
        </li>
        <li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
          bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
          hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
          shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
          <div class="flex items-center">
            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
              <path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7zM6 4h6v5a1 1 0 01-1 1H6V4zm14 16H6V4h5v6h6v10z" />
            </svg>
            <span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">Marketing_Plan_2024.pptx</span>
          </div>
          <small class="text-blue-500 dark:text-gray-400 text-xs">4.8 MB</small>
        </li>
        <li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
          bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
          hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
          shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
          <div class="flex items-center">
            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
              <path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7zM6 4h6v5a1 1 0 01-1 1H6V4zm14 16H6V4h5v6h6v10z" />
            </svg>
            <span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">User_Manual_V1.pdf</span>
          </div>
          <small class="text-blue-500 dark:text-gray-400 text-xs">900 KB</small>
        </li>
      </ul>

      <button class="mt-4 w-full p-3 rounded-xl text-white font-semibold flex items-center justify-center
        bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-600
        shadow-neumorphic-button dark:shadow-neumorphic-button-dark
        active:shadow-inset-button active:bg-blue-800 dark:active:bg-blue-800 transition-all duration-200 ease-in-out">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
        </svg>
        Upload File
      </button>
    </div>

    <!-- Right Pane: File Preview & Details -->
    <div class="lg:w-2/3 xl:w-3/4 flex flex-col p-4
      bg-blue-100 dark:bg-gray-850 rounded-xl shadow-inner-sm border border-blue-200 dark:border-gray-700">
      <div class="flex justify-between items-center mb-4 pb-4 border-b border-blue-300 dark:border-gray-700">
        <h2 class="text-xl font-bold text-blue-800 dark:text-blue-200 shadow-text-light dark:shadow-text-dark tracker-wide">File Preview</h2>
        <div class="flex space-x-2">
          <button class="p-3 rounded-full bg-blue-200 dark:bg-gray-750 text-blue-700 dark:text-blue-300
            hover:bg-blue-300 dark:hover:bg-gray-700 shadow-neumorphic-icon dark:shadow-neumorphic-icon-dark
            active:shadow-inset-icon active:bg-blue-400 dark:active:bg-gray-600 transition-all duration-200 ease-in-out">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 9l-7 7 1.41 1.41L12 11.83l5.59 5.58L19 16l-7-7z" />
            </svg>
          </button>
          <button class="p-3 rounded-full bg-blue-200 dark:bg-gray-750 text-blue-700 dark:text-blue-300
            hover:bg-blue-300 dark:hover:bg-gray-700 shadow-neumorphic-icon dark:shadow-neumorphic-icon-dark
            active:shadow-inset-icon active:bg-blue-400 dark:active:bg-gray-600 transition-all duration-200 ease-in-out">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
            </svg>
          </button>
          <button class="p-3 rounded-full bg-blue-200 dark:bg-gray-750 text-blue-700 dark:text-blue-300
            hover:bg-blue-300 dark:hover:bg-gray-700 shadow-neumorphic-icon dark:shadow-neumorphic-icon-dark
            active:shadow-inset-icon active:bg-blue-400 dark:active:bg-gray-600 transition-all duration-200 ease-in-out">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
            </svg>
          </button>
        </div>
      </div>

      <!-- Preview Area -->
      <div class="flex-grow flex items-center justify-center bg-blue-50 dark:bg-gray-900 rounded-xl mb-6
        border border-blue-200 dark:border-gray-700 shadow-inset-md overflow-hidden">
        <img src="https://picsum.photos/600/400?random=1" alt="File Preview" class="max-w-full max-h-full object-contain rounded-lg shadow-lg opacity-80">
      </div>

      <!-- File Details -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
        <div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm">
          <h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">File Name</h3>
          <p class="text-blue-900 dark:text-blue-100 text-base overflow-hidden truncate">Product_Catalogue_Q3.pdf</p>
        </div>
        <div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm">
          <h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">File Type</h3>
          <p class="text-blue-900 dark:text-blue-100 text-base">PDF Document</p>
        </div>
        <div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm">
          <h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">Size</h3>
          <p class="text-blue-900 dark:text-blue-100 text-base">1.2 MB</p>
        </div>
        <div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm">
          <h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">Uploaded On</h3>
          <p class="text-blue-900 dark:text-blue-100 text-base">2023-10-26</p>
        </div>
        <div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm">
          <h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">Last Modified</h3>
          <p class="text-blue-900 dark:text-blue-100 text-base">2023-11-15</p>
        </div>
        <div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm flex items-center">
          <img class="w-8 h-8 rounded-full mr-3 border border-blue-300 dark:border-gray-600 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Uploader">
          <div>
            <h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">Uploaded By</h3>
            <p class="text-blue-900 dark:text-blue-100 text-base">John Doe</p>
          </div>
        </div>
      </div>

      <!-- File Tags / Categories -->
      <div class="mb-6">
        <h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-2">Tags</h3>
        <div class="flex flex-wrap gap-2">
          <span class="px-4 py-2 rounded-full text-blue-700 dark:text-blue-200 text-xs font-semibold
            bg-blue-200 dark:bg-gray-700 border border-blue-300 dark:border-gray-600 shadow-tag">Marketing</span>
          <span class="px-4 py-2 rounded-full text-blue-700 dark:text-blue-200 text-xs font-semibold
            bg-blue-200 dark:bg-gray-700 border border-blue-300 dark:border-gray-600 shadow-tag">Catalogue</span>
          <span class="px-4 py-2 rounded-full text-blue-700 dark:text-blue-200 text-xs font-semibold
            bg-blue-200 dark:bg-gray-700 border border-blue-300 dark:border-gray-600 shadow-tag">Q3</span>
        </div>
      </div>

      <!-- Share and Version History -->
      <div class="flex flex-col sm:flex-row justify-between items-center pt-4 border-t border-blue-300 dark:border-gray-700">
        <button class="flex-1 w-full sm:w-auto p-3 rounded-xl text-white font-semibold flex items-center justify-center
          bg-blue-500 dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-500 mr-0 sm:mr-4 mb-2 sm:mb-0
          shadow-neumorphic-button dark:shadow-neumorphic-button-dark
          active:shadow-inset-button active:bg-blue-700 dark:active:bg-blue-700 transition-all duration-200 ease-in-out">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
            <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.2.09-.41.09-.6s-.04-.4-.09-.6l7.05-4.11c.52.48 1.2.78 1.96.78 2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4c0 .2.04.4.09.6L7.05 11.9c-.52-.48-1.2-.78-1.96-.78-2.21 0-4 1.79-4 4s1.79 4 4 4c.76 0 1.44-.3 1.96-.77l7.05 4.11c-.05.2-.09.41-.09.6 0 2.21 1.79 4 4 4s4-1.79 4-4-1.79-4-4-4z" />
          </svg>
          Share File
        </button>
        <button class="flex-1 w-full sm:w-auto p-3 rounded-xl text-blue-800 dark:text-blue-200 font-semibold flex items-center justify-center
          bg-blue-200 dark:bg-gray-700 hover:bg-blue-300 dark:hover:bg-gray-600
          shadow-neumorphic-button-alt dark:shadow-neumorphic-button-alt-dark
          active:shadow-inset-button active:bg-blue-400 dark:active:bg-gray-600 transition-all duration-200 ease-in-out">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" />
          </svg>
          Version History
        </button>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom tailwind utilities for skeuomorphism */
  .shadow-neumorphic-button {
    box-shadow: 6px 6px 12px #9bcafa, -6px -6px 12px #d3faff;
  }

  .dark .shadow-neumorphic-button-dark {
    box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #2a2a2a;
  }

  .shadow-neumorphic-button-alt {
    box-shadow: 4px 4px 8px #9bcafa, -4px -4px 8px #d3faff;
  }

  .dark .shadow-neumorphic-button-alt-dark {
    box-shadow: 4px 4px 8px #4a4a4a, -4px -4px 8px #2a2a2a;
  }


  .shadow-neumorphic-icon {
    box-shadow: 4px 4px 8px #9bcafa, -4px -4px 8px #d3faff;
  }

  .dark .shadow-neumorphic-icon-dark {
    box-shadow: 4px 4px 8px #4a4a4a, -4px -4px 8px #2a2a2a;
  }

  .shadow-inset-button {
    box-shadow: inset 4px 4px 8px #9bcafa, inset -4px -4px 8px #d3faff;
  }

  .dark .shadow-inset-button {
    box-shadow: inset 4px 4px 8px #4a4a4a, inset -4px -4px 8px #2a2a2a;
  }

  .shadow-inset-icon {
    box-shadow: inset 3px 3px 6px #9bcafa, inset -3px -3px 6px #d3faff;
  }

  .dark .shadow-inset-icon {
    box-shadow: inset 3px 3px 6px #4a4a4a, inset -3px -3px 6px #2a2a2a;
  }

  .shadow-light {
    box-shadow: 3px 3px 6px #bbd6fb, -3px -3px 6px #e0f6ff;
  }

  .dark .shadow-dark {
    box-shadow: 3px 3px 6px #4a4a4a, -3px -3px 6px #2a2a2a;
  }

   .shadow-inset-sm {
    box-shadow: inset 2px 2px 4px #bbd6fb, inset -2px -2px 4px #e0f6ff;
  }

  .dark .shadow-inset-sm {
    box-shadow: inset 2px 2px 4px #4a4a4a, inset -2px -2px 4px #2a2a2a;
  }

   .shadow-inset-md {
    box-shadow: inset 4px 4px 8px #bbd6fb, inset -4px -4px 8px #e0f6ff;
  }

  .dark .shadow-inset-md {
    box-shadow: inset 4px 4px 8px #4a4a4a, inset -4px -4px 8px #2a2a2a;
  }

  .shadow-tag {
      box-shadow: 2px 2px 4px #9bcafa, -2px -2px 4px #d3faff;
  }

  .dark .shadow-tag {
      box-shadow: 2px 2px 4px #4a4a4a, -2px -2px 4px #2a2a2a;
  }

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

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

  /* Custom scrollbar styles */
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
  }

  .scrollbar-thumb-blue-400::-webkit-scrollbar-thumb {
    background-color: #60a5fa;
    border-radius: 10px;
    border: 1px solid #93c5fd;
  }

  .dark .scrollbar-thumb-gray-600::-webkit-scrollbar-thumb {
    background-color: #4b5563;
    border: 1px solid #6b7280;
  }

  .scrollbar-track-blue-100::-webkit-scrollbar-track {
    background: #dbeafe;
  }

  .dark .scrollbar-track-gray-800::-webkit-scrollbar-track {
    background: #1f2937;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: #3b82f6;
  }

  .dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: #374151;
  }
</style>

Neumorphic_Charity_E-commerce_Component

Un componente de comercio electrónico complejo y receptivo diseñado para organizaciones benéficas/sin fines de lucro, con un estilo neumórfico suave con un esquema de color sepia/marrón y soporte para modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-gradient-to-br from-stone-200 to-stone-300 p-4 font-sans text-stone-800 transition-colors duration-300 dark:from-stone-900 dark:to-stone-950 dark:text-stone-200 lg:p-8">

  <!-- Section Title (Neumorphic) -->
  <h1 class="mb-8 text-center text-4xl font-extrabold tracking-tight drop-shadow-sm md:text-5xl lg:text-6xl">
    <span class="inline-block rounded-2xl bg-gradient-to-br from-stone-100 to-stone-200 px-6 py-3 shadow-md transition-all duration-300 ease-in-out hover:scale-105 hover:from-stone-50 hover:to-stone-100 dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:from-stone-700 dark:hover:to-stone-850">
      Support a Cause Today
    </span>
  </h1>

  <!-- Main Grid Layout -->
  <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

    <!-- Product Card 1 -->
    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
        <img src="https://picsum.photos/id/1015/400/300" alt="Education Support" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Education for All</h3>
        <p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Provide essential learning materials and tuition for underprivileged children.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Goal: $10,000
          </span>
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Raised: $6,500
          </span>
        </div>

        <div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
          <div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 65%;"></div>
        </div>

        <button class="neumorphic-button-primary w-full">
          Donate Now
        </button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
        <img src="https://picsum.photos/id/10/400/300" alt="Healthcare Initiative" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Health & Wellness</h3>
        <p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Support medical camps and provide essential health services to remote communities.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Goal: $15,000
          </span>
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Raised: $12,800
          </span>
        </div>

        <div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
          <div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 85%;"></div>
        </div>

        <button class="neumorphic-button-primary w-full">
          Donate Now
        </button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
        <img src="https://picsum.photos/id/1043/400/300" alt="Environmental Conservation" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Environmental Protection</h3>
        <p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Fund reforestation projects and initiatives to protect endangered species.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Goal: $8,000
          </span>
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Raised: $4,200
          </span>
        </div>

        <div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
          <div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 53%;"></div>
        </div>

        <button class="neumorphic-button-primary w-full">
          Donate Now
        </button>
      </div>
    </div>

    <!-- Product Card 4 (Featured/Highlighted) -->
    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-amber-500 to-amber-600 text-white shadow-xl ring-4 ring-amber-400 ring-offset-4 ring-offset-stone-200 transition-all duration-300 ease-in-out hover:shadow-2xl dark:ring-offset-stone-900">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-amber-700 to-amber-800 shadow-inner">
        <img src="https://picsum.photos/id/351/400/300" alt="Disaster Relief" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-black/20
"></div>
        <span class="absolute right-4 top-4 rounded-full bg-white/20 px-3 py-1 text-xs font-bold uppercase backdrop-blur-sm">Urgent</span>

      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-bold text-white">Disaster Relief Fund</h3>
        <p class="mb-4 text-sm text-amber-100">Provide immediate aid and long-term recovery support to communities affected by natural disasters.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-dark text-nowrap from-amber-700 to-amber-800 px-3 py-1 text-sm font-medium text-amber-100">
            Goal: $20,000
          </span>
          <span class="neumorphic-badge-dark text-nowrap from-amber-700 to-amber-800 px-3 py-1 text-sm font-bold text-amber-100">
            Raised: $18,900
          </span>
        </div>

        <div class="neumorphic-progress-bar-featured mb-4 h-2 rounded-full shadow-inner">
          <div class="h-full rounded-full bg-gradient-to-r from-white to-amber-200" style="width: 94%;"></div>
        </div>

        <button class="neumorphic-button-alt w-full">
          Contribute Now
        </button>
      </div>
    </div>

    <!-- Add more product cards as needed (using the first card's structure) -->
    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
        <img src="https://picsum.photos/id/1060/400/300" alt="Food Security" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Food Security Program</h3>
        <p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Help end hunger by providing nutritious meals and sustainable food sources.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Goal: $12,000
          </span>
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Raised: $9,100
          </span>
        </div>

        <div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
          <div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 76%;"></div>
        </div>

        <button class="neumorphic-button-primary w-full">
          Donate Now
        </button>
      </div>
    </div>

    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
        <img src="https://picsum.photos/id/401/400/300" alt="Community Development" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Community Development</h3>
        <p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Invest in local infrastructure and sustainable livelihood projects.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Goal: $9,500
          </span>
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Raised: $5,300
          </span>
        </div>

        <div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
          <div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 56%;"></div>
        </div>

        <button class="neumorphic-button-primary w-full">
          Donate Now
        </button>
      </div>
    </div>

  </div>

  <!-- Helper Classes for Neumorphism (can be defined in a CSS file or as @apply in Tailwind CSS config) -->
  <style>
    .neumorphic-button-primary {
      @apply relative rounded-xl bg-gradient-to-br from-stone-300 to-stone-400 px-6 py-3 font-semibold text-stone-800 shadow-lg transition-all duration-300 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:from-stone-200 hover:to-stone-300 active:translate-y-0.5 active:scale-95 active:shadow-inner dark:from-stone-700 dark:to-stone-800 dark:text-stone-200 dark:shadow-stone-950/70 dark:hover:from-stone-600 dark:hover:to-stone-750 dark:active:shadow-stone-950/90;
    }
    .neumorphic-button-primary:active {
      box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2), inset -2px -2px 5px rgba(255,255,255,0.7), 0 0 0 transparent !important; /* override hover shadow */
      @apply dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)];
    }

    .neumorphic-button-alt {
      @apply relative rounded-xl bg-gradient-to-br from-white to-amber-100 px-6 py-3 font-semibold text-amber-800 shadow-lg transition-all duration-300 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:from-amber-50 hover:to-white active:translate-y-0.5 active:scale-95 active:shadow-inner;
    }
    .neumorphic-button-alt:active {
      box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2), inset -2px -2px 5px rgba(255,255,255,0.7), 0 0 0 transparent !important; /* override hover shadow */
    }

    .neumorphic-badge-light {
      @apply inline-block rounded-full bg-gradient-to-br shadow-md;
      box-shadow: 2px 2px 4px rgba(0,0,0,0.1), -2px -2px 4px rgba(255,255,255,0.8); /* manual neumorphic shadow for badges */
      @apply dark:shadow-[2px_2px_4px_rgba(0,0,0,0.5),-2px_-2px_4px_rgba(255,255,255,0.1)];
    }

    .neumorphic-badge-dark {
      @apply inline-block rounded-full bg-gradient-to-br shadow-md;
      box-shadow: 2px 2px 4px rgba(0,0,0,0.3), -2px -2px 4px rgba(255,255,255,0.15); /* manual neumorphic shadow for badges */
    }

    .neumorphic-progress-bar-featured {
      background: linear-gradient(145deg, #cc8000, #ff9900);
      box-shadow: inset 2px 2px 5px rgba(0,0,0,0.4), inset -2px -2px 5px rgba(255,255,255,0.2);
    }
  </style>

</div>

Componente de tarjetas de producto - Agricultura/Ganadería

Un componente de tarjeta de producto receptivo diseñado para sitios web de agricultura y ganadería, con tipografía limpia, sistemas de cuadrícula y colores otoñales. Incluye soporte para modo oscuro.

Abrir Vista previa

                <section class="py-12 bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 font-sans">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl font-bold text-center mb-10 tracking-tight dark:text-orange-500">
      Our Farm Produce
    </h2>
    <p class="max-w-3xl mx-auto text-center text-lg mb-12 opacity-90 leading-relaxed">
      Discover our selection of fresh, high-quality agricultural products, sustainably grown and harvested with care. From field to your table.
    </p>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">

      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border border-stone-200 dark:border-stone-700">
        <div class="relative pb-2/3 overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1015/400/300" alt="Fresh Organic Apples">
          <span class="absolute top-3 right-3 bg-orange-600 text-white text-xs font-semibold px-3 py-1 rounded-full shadow-md">NEW</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 line-clamp-2">Organic Gala Apples</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-3">Sweet and crisp, perfect for snacking or baking. Grown without pesticides.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-orange-700 dark:text-orange-500">$4.99 <span class="text-base text-stone-500">/lb</span></span>
            <div class="flex items-center text-orange-500">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-stone-300 dark:text-stone-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border border-stone-200 dark:border-stone-700">
        <div class="relative pb-2/3 overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1004/400/300" alt="Freshly Harvested Carrots">
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 line-clamp-2">Farm Fresh Carrots</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-3">Sweet, crunchy, and packed with vitamins. Directly from our fields to your kitchen.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-orange-700 dark:text-orange-500">$2.49 <span class="text-base text-stone-500">/bunch</span></span>
            <div class="flex items-center text-orange-500">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-stone-300 dark:text-stone-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-stone-300 dark:text-stone-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border border-stone-200 dark:border-stone-700">
        <div class="relative pb-2/3 overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1018/400/300" alt="Artisan Sourdough Bread">
          <span class="absolute top-3 left-3 bg-burgundy-700 text-white text-xs font-semibold px-3 py-1 rounded-full shadow-md dark:bg-burgundy-600">LIMITED</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 line-clamp-2">Artisan Sourdough Bread</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-3">Hand-baked with our own ancient grain flour. A true taste of tradition.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-orange-700 dark:text-orange-500">$6.00 <span class="text-base text-stone-500">/loaf</span></span>
            <div class="flex items-center text-orange-500">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-stone-300 dark:text-stone-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border border-stone-200 dark:border-stone-700">
        <div class="relative pb-2/3 overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1020/400/300" alt="Farm Fresh Eggs">
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 line-clamp-2">Pasture-Raised Eggs</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-3">From happy, healthy chickens roaming freely. Rich yolks and superior taste.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-orange-700 dark:text-orange-500">$5.19 <span class="text-base text-stone-500">/dozen</span></span>
            <div class="flex items-center text-orange-500">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-orange-300 dark:text-orange-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
            Add to Cart
          </button>
        </div>
      </div>

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

Navegación inspirada en papel/impresión para plataformas de entretenimiento

Un componente de navegación simple y receptivo para plataformas de entretenimiento, que imita un estilo de papel/impresión con una paleta de colores verde bosque. Incluye soporte para el modo oscuro y utiliza HTML semántico.

Abrir Vista previa

                <nav class="bg-lime-50 dark:bg-gray-800 p-4 border-b-4 border-lime-700 dark:border-lime-300 font-serif overflow-hidden relative">
  <div class="max-w-7xl mx-auto flex justify-between items-center">
    <div class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-lime-700 dark:text-lime-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M3 5h18M5 9h14v10a2 2 0 01-2 2H7a2 2 0 01-2-2V9zm0 0V5a2 2 0 012-2h10a2 2 0 012 2v4M7 9h10l-1 12H8l-1-12z" />
      </svg>
      <a href="#" class="text-lime-800 dark:text-lime-100 text-2xl font-bold tracking-tight">Page Turner</a>
    </div>

    <!-- Desktop Navigation -->
    <ul class="hidden md:flex space-x-8">
      <li><a href="#" class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-lg transition-colors duration-200">Home</a></li>
      <li><a href="#" class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-lg transition-colors duration-200">Browse</a></li>
      <li><a href="#" class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-lg transition-colors duration-200">My Shelf</a></li>
      <li><a href="#" class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-lg transition-colors duration-200">About</a></li>
    </ul>

    <!-- Mobile Menu Button -->
    <button aria-label="Toggle Mobile Menu" class="md:hidden text-lime-700 dark:text-lime-300 cursor-pointer focus:outline-none focus:ring-2 focus:ring-lime-500 rounded" onclick="document.getElementById('mobile-menu').classList.toggle('hidden');">
      <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </div>

  <!-- Mobile Navigation (hidden by default) -->
  <div id="mobile-menu" class="hidden md:hidden mt-4 border-t border-lime-700 dark:border-lime-400 pt-4">
    <ul class="flex flex-col space-y-4">
      <li><a href="#" class="block text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-xl font-medium transition-colors duration-200 px-4 py-2">Home</a></li>
      <li><a href="#" class="block text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-xl font-medium transition-colors duration-200 px-4 py-2">Browse</a></li>
      <li><a href="#" class="block text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-xl font-medium transition-colors duration-200 px-4 py-2">My Shelf</a></li>
      <li><a href="#" class="block text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-xl font-medium transition-colors duration-200 px-4 py-2">About</a></li>
    </ul>
  </div>

  <!-- Subtle paper texture element -->
  <div class="absolute inset-0 pointer-events-none opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzgiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgNzggMTAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNOS4xNDc0NSAzLjM3MjM2QzcuOTUyNzcgMi41Njg2MSA3LjUwNjExIDIuMDcwOTggNi42NDQyNyAxLjU5NTQzQzQuMjI5ODYgMC4yNjUwMzggMS40ODk0OSAtMC42NTk1MjkgMS42MDQyMiAxLjUxOTU0QzEuNzUzNjUgNjk0LjI2IDAuNzU2Mjg4IDkyNC43MTggMC43NTYyODggOTI2LjgyMUMwLjc1NjI4OCA5NjguNzY5IDQwLjg0OTUgOTk5LjE3NSA3OC4yMzE5IDk5OS4xNzVDNzguMjMxOSA5OTkuMTc1IDc2LjAxNzUgMTAwMSA3NS4wNjc2IDEwMDJDNzEuNzk5MSAxMDIxLjM5IDY5LjE0MTIgMTAwMCA2OS4wNzQ4IDEwMDAuMDZDNDkuNTM2OCA5OTkuODYxIDI2LjAwNjkgOTUwLjk0MiAxNi4xNDggOTI2LjgyQzExLjU0OTUgODk5LjQ2NCAxMC42NjcxIDguOTA3NDggOS4xNDc0NSAzLjM3MjM2WiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eXM9IjAuMDUiLz4KPC9zdmc+'); background-repeat: repeat;"></div>
</nav>

Tabla de contenido Componente - Reserva/Reserva

Un componente de tabla de contenido simple y receptivo para sistemas de reservas, con colores en escala de grises y sutiles transiciones de degradado. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="relative p-6 sm:p-8 bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mb-2 leading-tight">
        Your Reservation Guide
      </h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300">
        Navigate through your booking steps.
      </p>
      <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10 pointer-events-none rounded-lg" style="background-image: linear-gradient(135deg, #e0e0e0 0%, #ffffff 100%); dark-background-image: linear-gradient(135deg, #333333 0%, #1a1a1a 100%);"></div>
    </div>
    <nav aria-label="Booking Navigation" class="p-4 sm:p-6 space-y-4">
      <a href="#step-1" class="flex items-center p-3 sm:p-4 rounded-lg group transition-all duration-300 ease-in-out bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
        <span class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-lg sm:text-xl font-bold bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-100 group-hover:bg-gray-300 dark:group-hover:bg-gray-500 transition-colors duration-300">
          1
        </span>
        <div class="ml-4 flex-grow">
          <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">
            Select Service
          </h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">Choose your desired service or treatment.</p>
        </div>
        <svg class="w-5 h-5 ml-auto text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </a>

      <a href="#step-2" class="flex items-center p-3 sm:p-4 rounded-lg group transition-all duration-300 ease-in-out bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
        <span class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-lg sm:text-xl font-bold bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-100 group-hover:bg-gray-300 dark:group-hover:bg-gray-500 transition-colors duration-300">
          2
        </span>
        <div class="ml-4 flex-grow">
          <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">
            Pick Date & Time
          </h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">Find available slots that suit your schedule.</p>
        </div>
        <svg class="w-5 h-5 ml-auto text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </a>

      <a href="#step-3" class="flex items-center p-3 sm:p-4 rounded-lg group transition-all duration-300 ease-in-out bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
        <span class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-lg sm:text-xl font-bold bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-100 group-hover:bg-gray-300 dark:group-hover:bg-gray-500 transition-colors duration-300">
          3
        </span>
        <div class="ml-4 flex-grow">
          <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">
            Your Details
          </h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">Provide contact and preference information.</p>
        </div>
        <svg class="w-5 h-5 ml-auto text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </a>

      <a href="#step-4" class="flex items-center p-3 sm:p-4 rounded-lg group transition-all duration-300 ease-in-out bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
        <span class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-lg sm:text-xl font-bold bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-100 group-hover:bg-gray-300 dark:group-hover:bg-gray-500 transition-colors duration-300">
          4
        </span>
        <div class="ml-4 flex-grow">
          <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">
            Confirm Booking
          </h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">Review your reservation details and complete.</p>
        </div>
        <svg class="w-5 h-5 ml-auto text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </a>
    </nav>
  </div>
</div>

Memphis_Finance_Charts_Component

Un componente complejo de gráficos financieros inspirado en el diseño de Memphis, con colores llamativos, formas geométricas y una combinación de colores neón/eléctrico. Es totalmente responsivo, admite el modo oscuro y es adecuado para interfaces financieras/bancarias.

Abrir Vista previa

                <div class="font-sans bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-purple-950 p-4 sm:p-8 md:p-12 min-h-screen text-gray-800 dark:text-gray-100 relative overflow-hidden">

  <!-- Memphis background elements (for visual interest) -->
  <div class="absolute top-0 left-0 w-48 h-48 bg-purple-400 dark:bg-purple-700 opacity-30 dark:opacity-20 rounded-full blur-3xl -ml-24 -mt-24"></div>
  <div class="absolute bottom-0 right-0 w-64 h-64 bg-yellow-300 dark:bg-yellow-600 opacity-30 dark:opacity-20 rounded-full blur-3xl -mr-32 -mb-32"></div>
  <div class="absolute top-1/2 left-1/4 w-32 h-32 bg-pink-400 dark:bg-pink-700 opacity-30 dark:opacity-20 rounded-lg blur-xl -translate-x-1/2 -translate-y-1/2 rotate-45"></div>
  <div class="absolute bottom-1/2 right-1/4 w-40 h-40 bg-teal-300 dark:bg-teal-600 opacity-20 dark:opacity-10 rounded-full blur-2xl translate-x-1/2 translate-y-1/2"></div>

  <div class="max-w-7xl mx-auto relative z-10">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-8 text-center drop-shadow-lg leading-tight" style="text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.2), 4px 4px 0px rgba(0, 0, 0, 0.1);">
      <span class="text-fuchsia-600 dark:text-fuchsia-400">F</span>inancial <span class="text-lime-500 dark:text-lime-300">P</span>erformance
    </h1>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
      <!-- Main Overview Card -->
      <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-fuchsia-400 dark:border-fuchsia-700 transform hover:scale-[1.01] transition-transform duration-300 relative overflow-hidden">
        <div class="absolute top-0 right-0 w-24 h-24 bg-teal-300 dark:bg-teal-600 -mt-12 -mr-12 rounded-full opacity-20"></div>
        <div class="absolute bottom-0 left-0 w-32 h-32 bg-lime-300 dark:bg-lime-600 -mb-16 -ml-16 rounded-lg opacity-20 transform rotate-12"></div>
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 relative z-10">
          <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-50 drop-shadow">Portfolio Growth</h2>
          <div class="mt-4 sm:mt-0 flex space-x-2">
            <button class="px-4 py-2 border-2 border-fuchsia-500 dark:border-fuchsia-400 text-fuchsia-600 dark:text-fuchsia-400 rounded-full font-semibold text-sm hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 transition-colors duration-200">1M</button>
            <button class="px-4 py-2 border-2 border-fuchsia-500 dark:border-fuchsia-400 text-fuchsia-600 dark:text-fuchsia-400 rounded-full font-semibold text-sm hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 bg-fuchsia-100 dark:bg-fuchsia-800 transition-colors duration-200">6M</button>
            <button class="px-4 py-2 border-2 border-fuchsia-500 dark:border-fuchsia-400 text-fuchsia-600 dark:text-fuchsia-400 rounded-full font-semibold text-sm hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 transition-colors duration-200">1Y</button>
          </div>
        </div>
        <div class="relative flex justify-center items-center h-64 md:h-80 bg-gradient-to-tr from-fuchsia-100 to-purple-100 dark:from-purple-900 dark:to-fuchsia-900 rounded-xl mb-6 overflow-hidden border-2 border-fuchsia-500 dark:border-fuchsia-700">
          <!-- Placeholder for Chart Image -->
          <img src="https://picsum.photos/800/400?random=1&grayscale&blur=2" alt="Placeholder chart" class="absolute inset-0 w-full h-full object-cover opacity-30 dark:opacity-10 rounded-xl">
          <div class="absolute inset-0 flex items-center justify-center p-4">
            <div class="w-full h-full border-2 border-dashed border-fuchsia-500 dark:border-fuchsia-300 rounded-lg flex flex-col justify-center items-center text-center p-4">
                <p class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-fuchsia-700 dark:text-fuchsia-300 drop-shadow-md">+15.7%</p>
                <p class="text-lg sm:text-xl font-semibold text-gray-600 dark:text-gray-300">Total Return (6 Months)</p>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 relative z-10">
          <div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-xl shadow-inner border-2 border-purple-300 dark:border-purple-600 text-center">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Current Value</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$85,450</p>
          </div>
          <div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-xl shadow-inner border-2 border-purple-300 dark:border-purple-600 text-center">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Invested</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$73,800</p>
          </div>
          <div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-xl shadow-inner border-2 border-purple-300 dark:border-purple-600 text-center">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Daily Change</p>
            <p class="text-lg font-bold text-lime-600 dark:text-lime-300">+$345</p>
          </div>
          <div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-xl shadow-inner border-2 border-purple-300 dark:border-purple-600 text-center">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Asset Count</p>
            <p class="text-lg font-bold text-orange-600 dark:text-orange-300">12</p>
          </div>
        </div>
      </div>

      <!-- Top Holdings Card -->
      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-lime-400 dark:border-lime-700 transform hover:scale-[1.01] transition-transform duration-300 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-20 h-20 bg-fuchsia-300 dark:bg-fuchsia-600 -mt-10 -ml-10 rounded-full opacity-20"></div>
        <h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-50 drop-shadow relative z-10">Top Holdings</h2>
        <ul class="space-y-4 relative z-10">
          <li class="flex items-center space-x-4 bg-teal-50 dark:bg-teal-900 p-3 rounded-lg border-2 border-teal-300 dark:border-teal-600 transition-colors duration-200">
            <img src="https://picsum.photos/40/40?random=2" alt="Stock Icon" class="w-10 h-10 rounded-full border-2 border-teal-500 dark:border-teal-400">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">NASDAQ 100</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">35% of Portfolio</p>
            </div>
            <span class="ml-auto text-lime-600 dark:text-lime-300 font-bold">+2.1%</span>
          </li>
          <li class="flex items-center space-x-4 bg-teal-50 dark:bg-teal-900 p-3 rounded-lg border-2 border-teal-300 dark:border-teal-600 transition-colors duration-200">
            <img src="https://picsum.photos/40/40?random=3" alt="Crypto Icon" class="w-10 h-10 rounded-full border-2 border-teal-500 dark:border-teal-400">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">Bitcoin (BTC)</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">20% of Portfolio</p>
            </div>
            <span class="ml-auto text-lime-600 dark:text-lime-300 font-bold">+1.8%</span>
          </li>
          <li class="flex items-center space-x-4 bg-teal-50 dark:bg-teal-900 p-3 rounded-lg border-2 border-teal-300 dark:border-teal-600 transition-colors duration-200">
            <img src="https://picsum.photos/40/40?random=4" alt="Bond Icon" class="w-10 h-10 rounded-full border-2 border-teal-500 dark:border-teal-400">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">US Treasury Bonds</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">15% of Portfolio</p>
            </div>
            <span class="ml-auto text-red-600 dark:text-red-300 font-bold">-0.5%</span>
          </li>
          <li class="flex items-center space-x-4 bg-teal-50 dark:bg-teal-900 p-3 rounded-lg border-2 border-teal-300 dark:border-teal-600 transition-colors duration-200">
            <img src="https://picsum.photos/40/40?random=5" alt="Gold Icon" class="w-10 h-10 rounded-full border-2 border-teal-500 dark:border-teal-400">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">Gold ETF</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">10% of Portfolio</p>
            </div>
            <span class="ml-auto text-lime-600 dark:text-lime-300 font-bold">+0.9%</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- Recent Transactions & Risk Assessment -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- Recent Transactions Card -->
      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-purple-400 dark:border-purple-700 transform hover:scale-[1.01] transition-transform duration-300 relative overflow-hidden">
        <div class="absolute top-0 right-0 w-20 h-20 bg-lime-300 dark:bg-lime-600 -mt-10 -mr-10 rounded-full opacity-20"></div>
        <h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-50 drop-shadow relative z-10">Recent Activity</h2>
        <ul class="space-y-4 relative z-10">
          <li class="flex items-center space-x-4 bg-fuchsia-50 dark:bg-fuchsia-900 p-3 rounded-lg border-2 border-fuchsia-300 dark:border-fuchsia-600 transition-colors duration-200">
            <div class="w-10 h-10 rounded-full bg-lime-200 dark:bg-lime-700 flex items-center justify-center text-lime-700 dark:text-lime-300 font-bold text-xl drop-shadow">↑</div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">Deposit</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">From Checking Account</p>
            </div>
            <span class="ml-auto text-lime-600 dark:text-lime-300 font-bold">+$1,500</span>
          </li>
          <li class="flex items-center space-x-4 bg-fuchsia-50 dark:bg-fuchsia-900 p-3 rounded-lg border-2 border-fuchsia-300 dark:border-fuchsia-600 transition-colors duration-200">
            <div class="w-10 h-10 rounded-full bg-red-200 dark:bg-red-700 flex items-center justify-center text-red-700 dark:text-red-300 font-bold text-xl drop-shadow">↓</div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">Withdrawal</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">To Savings Account</p>
            </div>
            <span class="ml-auto text-red-600 dark:text-red-300 font-bold">-$500</span>
          </li>
          <li class="flex items-center space-x-4 bg-fuchsia-50 dark:bg-fuchsia-900 p-3 rounded-lg border-2 border-fuchsia-300 dark:border-fuchsia-600 transition-colors duration-200">
            <div class="w-10 h-10 rounded-full bg-purple-200 dark:bg-purple-700 flex items-center justify-center text-purple-700 dark:text-purple-300 font-bold text-xl drop-shadow">📈</div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">Buy NASDAQ</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">100 Units</p>
            </div>
            <span class="ml-auto text-purple-600 dark:text-purple-300 font-bold">-$10,000</span>
          </li>
        </ul>
      </div>

      <!-- Risk Assessment Card -->
      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-teal-400 dark:border-teal-700 transform hover:scale-[1.01] transition-transform duration-300 relative overflow-hidden">
        <div class="absolute bottom-0 right-0 w-24 h-24 bg-fuchsia-300 dark:bg-fuchsia-600 -mb-12 -mr-12 rounded-lg opacity-20 transform -rotate-12"></div>
        <h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-50 drop-shadow relative z-10">Risk Assessment</h2>
        <div class="relative flex justify-center items-center h-48 bg-gradient-to-br from-teal-100 to-lime-100 dark:from-lime-900 dark:to-teal-900 rounded-xl mb-6 overflow-hidden border-2 border-teal-500 dark:border-teal-700">
          <img src="https://picsum.photos/600/300?random=6&grayscale&blur=2" alt="Placeholder risk chart" class="absolute inset-0 w-full h-full object-cover opacity-20 dark:opacity-10 rounded-xl">
          <div class="relative z-10 flex flex-col items-center justify-center p-4">
            <p class="text-5xl font-extrabold text-teal-700 dark:text-teal-300 drop-shadow-md mb-2">Moderate</p>
            <p class="text-lg font-semibold text-gray-600 dark:text-gray-300 text-center">Your portfolio risk is currently balanced.</p>
            <a href="#" class="mt-4 inline-block px-5 py-2 bg-teal-500 dark:bg-teal-600 text-white rounded-full font-semibold hover:bg-teal-600 dark:hover:bg-teal-700 transition-colors duration-200 shadow-md">View Details</a>
          </div>
        </div>

        <div class="p-4 bg-teal-50 dark:bg-teal-900 rounded-xl border-2 border-teal-300 dark:border-teal-600 relative z-10">
          <p class="text-sm text-gray-600 dark:text-gray-300">
            Your current risk score is <strong>4.5/10</strong>, primarily driven by your exposure to tech stocks. Consider diversifying further for optimal balance.
          </p>
        </div>
      </div>
    </div>

    <!-- Advisory Section -->
    <div class="mt-8 bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-orange-400 dark:border-orange-700 relative overflow-hidden">
      <div class="absolute top-0 left-0 w-24 h-24 bg-fuchsia-300 dark:bg-fuchsia-600 -mt-12 -ml-12 rounded-full opacity-20"></div>
      <div class="absolute bottom-0 right-0 w-20 h-20 bg-lime-300 dark:bg-lime-600 -mb-10 -mr-10 rounded-lg opacity-20 transform -rotate-45"></div>
      <h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-50 drop-shadow relative z-10">Expert Insights</h2>
      <div class="flex flex-col sm:flex-row items-center gap-6 relative z-10">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Financial Advisor" class="w-24 h-24 rounded-full border-4 border-orange-500 dark:border-orange-400 shadow-lg">
        <div>
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">"Market trends indicate potential for growth in renewable energy. Consider allocating a small portion of your portfolio."</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">— <span class="font-medium text-orange-600 dark:text-orange-300">Alex Chen, Senior Financial Advisor</span></p>
          <a href="#" class="mt-3 inline-block px-5 py-2 bg-gradient-to-r from-orange-500 to-yellow-500 dark:from-orange-600 dark:to-yellow-600 text-white rounded-full font-semibold hover:from-orange-600 hover:to-yellow-600 dark:hover:from-orange-700 dark:hover:to-yellow-700 transition-colors duration-200 shadow-md">Schedule a Call</a>
        </div>
      </div>
    </div>
  </div>
</div>

Monospace_Developer_Alert_Messages_Component

Un componente complejo de mensajes de alerta inspirado en el monoespacio con una combinación de colores en negro, blanco y acento, diseñado para el consumo de blog/contenido. Incluye diseño responsivo y soporte para modo oscuro.

Abrir Vista previa

                <div class="font-mono p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen">
  <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-8 text-gray-900 dark:text-gray-100 border-b-2 border-gray-300 dark:border-gray-700 pb-2">
    System Alerts <span class="text-green-500">_</span>
  </h1>

  <!-- Success Alert -->
  <div class="mb-6 p-4 sm:p-5 border-2 border-green-600 bg-green-50 dark:bg-gray-800 text-green-800 dark:text-green-400 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg">
    <div class="flex items-start">
      <svg class="flex-shrink-0 w-6 h-6 sm:w-7 sm:h-7 mr-3 text-green-600 dark:text-green-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
      </svg>
      <div class="flex-1">
        <h3 class="text-lg sm:text-xl font-bold dark:text-green-300">[SUCCESS] Operation Complete</h3>
        <p class="text-sm sm:text-base mt-1">Files synchronized successfully. Total <code>24</code> items updated. Log ID: <span class="bg-green-100 dark:bg-gray-700 rounded px-1 py-0.5 text-green-900 dark:text-green-400 text-xs"><code>#SYS_LOG_20231027_001</code></span></p>
        <pre class="mt-3 p-2 text-xs sm:text-sm bg-green-100 dark:bg-gray-700 text-green-900 dark:text-green-400 rounded overflow-x-auto whitespace-pre-wrap"><code>console.log('Sync successful at ' + new Date().toISOString());</code></pre>
        <div class="mt-4 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
          <button class="px-4 py-2 text-black bg-green-500 dark:bg-green-600 text-sm sm:text-base font-semibold rounded-md shadow-sm hover:bg-green-600 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 transition duration-150 ease-in-out">
            <code>View Log Details</code>
          </button>
          <button class="px-4 py-2 text-green-800 dark:text-green-400 border border-green-600 dark:border-green-500 text-sm sm:text-base font-semibold rounded-md shadow-sm hover:bg-green-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 transition duration-150 ease-in-out">
            <code>Dismiss</code>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Warning Alert -->
  <div class="mb-6 p-4 sm:p-5 border-2 border-yellow-600 bg-yellow-50 dark:bg-gray-800 text-yellow-800 dark:text-yellow-400 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg">
    <div class="flex items-start">
      <svg class="flex-shrink-0 w-6 h-6 sm:w-7 sm:h-7 mr-3 text-yellow-600 dark:text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM10 13a1 1 0 100-2 1 1 0 000 2zm-1-4a1 1 0 102 0V6a1 1 0 10-2 0v3z" clip-rule="evenodd"></path>
      </svg>
      <div class="flex-1">
        <h3 class="text-lg sm:text-xl font-bold dark:text-yellow-300">[WARNING] Disk Usage Critical</h3>
        <p class="text-sm sm:text-base mt-1">Storage <code>/dev/sda1</code> is at <span class="bg-yellow-100 dark:bg-gray-700 rounded px-1 py-0.5 text-yellow-900 dark:text-yellow-400 text-xs"><code>92%</code></span> capacity. Consider clearing old logs.</p>
        <pre class="mt-3 p-2 text-xs sm:text-sm bg-yellow-100 dark:bg-gray-700 text-yellow-900 dark:text-yellow-400 rounded overflow-x-auto whitespace-pre-wrap"><code>df -h /dev/sda1
Filesystem      Size  Used Avail Use% Mounted on
/dev/sda1       98G   90G  4.5G  92% /</code></pre>
        <div class="mt-4 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
          <button class="px-4 py-2 text-black bg-yellow-500 dark:bg-yellow-600 text-sm sm:text-base font-semibold rounded-md shadow-sm hover:bg-yellow-600 dark:hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 transition duration-150 ease-in-out">
            <code>Optimize Storage</code>
          </button>
          <button class="px-4 py-2 text-yellow-800 dark:text-yellow-400 border border-yellow-600 dark:border-yellow-500 text-sm sm:text-base font-semibold rounded-md shadow-sm hover:bg-yellow-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 transition duration-150 ease-in-out">
            <code>Acknowledge</code>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Error Alert -->
  <div class="mb-6 p-4 sm:p-5 border-2 border-red-600 bg-red-50 dark:bg-gray-800 text-red-800 dark:text-red-400 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg">
    <div class="flex items-start">
      <svg class="flex-shrink-0 w-6 h-6 sm:w-7 sm:h-7 mr-3 text-red-600 dark:text-red-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586l-1.293-1.293z" clip-rule="evenodd"></path>
      </svg>
      <div class="flex-1">
        <h3 class="text-lg sm:text-xl font-bold dark:text-red-300">[ERROR] Database Connection Failed</h3>
        <p class="text-sm sm:text-base mt-1">Failed to establish connection to <code>production_db</code>. Error code: <span class="bg-red-100 dark:bg-gray-700 rounded px-1 py-0.5 text-red-900 dark:text-red-400 text-xs"><code>DB-ERR-503</code></span>. Check network.</p>
        <pre class="mt-3 p-2 text-xs sm:text-sm bg-red-100 dark:bg-gray-700 text-red-900 dark:text-red-400 rounded overflow-x-auto whitespace-pre-wrap"><code>{ "timestamp": "2023-10-27T10:30:00Z"

Componente de componentes de comercio electrónico

Una tarjeta de listado de bienes raíces simple y receptiva con un diseño inspirado en papel / impresión y una combinación de colores en tonos tierra, incluida la compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 bg-warm-gray-100 dark:bg-stone-900 min-h-screen flex items-center justify-center font-serif">
  <div class="max-w-sm mx-auto bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border-2 border-stone-200 dark:border-stone-700 relative">
    <!-- Paper texture overlay (pseudo-element for better control) -->
    <div class="absolute inset-0 z-0 pointer-events-none opacity-40 dark:opacity-20" style="background-image: url('data:image/svg+xml,%3Csvg width=\'100%\' height=\'100%\' viewBox=\'0 0 40 40\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M20 20.5a.5.5 0 011 0V21a.5.5 0 01-1 0v-.5zM20 0a.5.5 0 011 0v20a.5.5 0 01-1 0V0zM0 20a.5.5 0 010 1h20a.5.5 0 010-1H0zM0 0a.5.5 0 010 1h20a.5.5 0 010-1H0zM20 0a.5.5 0 01.5-.5h-1a.5.5 0 01.5.5zM0 20a.5.5 0 01-.5-.5v1a.5.5 0 01.5-.5z\'%3E%3C/path%3E%3C/svg%3E'); background-size: 10px 10px; opacity: 0.1; background-color: rgba(255, 255, 255, 0.5);">
    </div>

    <div class="relative z-10">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Property Thumbnail">
      <div class="absolute top-2 right-2 bg-stone-700/80 text-white text-xs px-2 py-1 rounded-sm tracking-wide font-sans">
        FOR SALE
      </div>

      <div class="p-4">
        <h3 class="text-xl font-bold text-stone-800 dark:text-stone-100 mb-2 leading-tight">
          Charming Suburban Retreat
        </h3>
        <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 tracking-wide">
          123 Harmony Lane, Willow Creek
        </p>

        <div class="flex items-center justify-between mb-4">
          <span class="text-2xl font-extrabold text-green-700 dark:text-green-400">
            $450,000
          </span>
          <div class="flex space-x-3 text-stone-700 dark:text-stone-300">
            <div class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1.586l3.293 3.293a1 1 0 01-1.414 1.414L10 6.414 7.121 9.293a1 1 0 11-1.414-1.414L9 4.586V3a1 1 0 011-1zM2 10a8 8 0 1116 0 8 8 0 01-16 0zm8 4a2 2 0 100-4 2 2 0 000 4z"></path></svg>
              3 Beds
            </div>
            <div class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 6a2 2 0 110 4 2 2 0 010-4z"></path><path fill-rule="evenodd" d="M4 0h12a2 2 0 012 2v16a2 2 0 01-2 2H4a2 2 0 01-2-2V2a2 2 0 012-2zm0 2v5h12V2H4zM2 9v9a2 2 0 002 2h12a2 2 0 002-2V9H2z" clip-rule="evenodd"></path></svg>

              2 Baths
            </div>
          </div>
        </div>

        <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-semibold py-2 px-4 rounded-md transition-colors duration-200 shadow-sm
                       dark:bg-orange-600 dark:hover:bg-orange-700">
          View Details
        </button>
      </div>
    </div>
  </div>
</div>

Vibrant_Dark_Mode_Feedback_Component

Un componente de retroalimentación simple y vibrante diseñado para plataformas de entretenimiento/medios con una interfaz de usuario de modo oscuro para reducir la fatiga visual. Cuenta con un título destacado, una subdescripción y un botón de llamada a la acción, todo totalmente responsivo.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-950 p-4">
  <div class="w-full max-w-sm rounded-lg shadow-xl p-6 bg-gradient-to-br from-indigo-900 to-purple-900 dark:from-indigo-950 dark:to-purple-950 text-white animate-fade-in">
    <div class="text-center mb-6">
      <svg class="mx-auto mb-4 h-12 w-12 text-pink-400 dark:text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.5 13.5l-3.5 3.5-3.5-3.5M12 21V6m0 0l4-4m-4 4L8 2z" />
      </svg>
      <h2 class="text-3xl font-extrabold text-white mb-2 dark:text-gray-50">We'd Love Your Feedback!</h2>
      <p class="text-sm text-indigo-200 dark:text-purple-200">Help us improve your experience on our platform.</p>
    </div>
    <div class="space-y-4">
      <textarea placeholder="Share your thoughts..." class="w-full p-3 rounded-md bg-indigo-800 dark:bg-purple-800 border border-indigo-700 dark:border-purple-700 text-white placeholder-indigo-300 focus:ring-2 focus:ring-pink-500 focus:border-transparent transition duration-300 ease-in-out text-sm h-24 resize-none"></textarea>
      <div class="flex flex-col sm:flex-row gap-4">
        <input type="email" placeholder="Your email (optional)" class="flex-1 p-3 rounded-md bg-indigo-800 dark:bg-purple-800 border border-indigo-700 dark:border-purple-700 text-white placeholder-indigo-300 focus:ring-2 focus:ring-pink-500 focus:border-transparent transition duration-300 ease-in-out text-sm">
        <select class="flex-1 p-3 rounded-md bg-indigo-800 dark:bg-purple-800 border border-indigo-700 dark:border-purple-700 text-white focus:ring-2 focus:ring-pink-500 focus:border-transparent transition duration-300 ease-in-out text-sm">
          <option value="">Select Category (optional)</option>
          <option value="bug">Bug Report</option>
          <option value="feature">Feature Request</option>
          <option value="general">General Feedback</option>
          <option value="content">Content Suggestion</option>
        </select>
      </div>
    </div>
    <button class="mt-6 w-full py-3 px-4 rounded-md bg-pink-600 dark:bg-pink-700 hover:bg-pink-700 dark:hover:bg-pink-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 focus:ring-offset-indigo-900 dark:focus:ring-offset-purple-950 transition duration-300 ease-in-out text-lg font-semibold text-white shadow-lg transform hover:scale-105 active:scale-95">
      Submit Feedback
    </button>
  </div>
</div>

<style>
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
  }
</style>

Componente de botón de seguimiento retro

Un componente de botón de seguimiento simple y receptivo con una estética retro / vintage, combinación de colores complementaria y propósito de juego, incluida la compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <button class="relative group flex items-center justify-center px-6 py-3 font-bold uppercase tracking-wider text-xl text-yellow-900 dark:text-yellow-100 transition-all duration-300 ease-in-out
    bg-gradient-to-br from-yellow-400 to-orange-500
    dark:from-yellow-700 dark:to-orange-800
    border-2 border-yellow-700 dark:border-yellow-900
    shadow-lg shadow-yellow-500/50 dark:shadow-yellow-900/50
    transform skew-x-[-10deg] hover:skew-x-0
    overflow-hidden
    rounded-lg
    focus:outline-none focus:ring-4 focus:ring-yellow-600 dark:focus:ring-yellow-800">
    
    <span class="relative z-10 flex items-center gap-2">
      <svg class="h-6 w-6 text-yellow-900 dark:text-yellow-100 transform -skew-x-[10deg] group-hover:skew-x-0 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM12 14v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0z"></path>
      </svg>
      <span class="transform -skew-x-[10deg] group-hover:skew-x-0 transition-transform duration-300">Follow Player</span>
    </span>

    <div class="absolute inset-0 bg-yellow-300 dark:bg-yellow-600 opacity-0 group-hover:opacity-30 transition-opacity duration-300 pointer-events-none"></div>

    <div class="absolute inset-0 border-2 border-yellow-800 dark:border-orange-900 border-dashed opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none transform scale-105 group-hover:scale-100"></div>

    <span class="absolute top-0 left-0 w-4 h-4 bg-yellow-700 dark:bg-yellow-900 transform -translate-x-1/2 -translate-y-1/2 rotate-45 opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out"></span>
    <span class="absolute bottom-0 right-0 w-4 h-4 bg-yellow-700 dark:bg-yellow-900 transform translate-x-1/2 translate-y-1/2 rotate-45 opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out"></span>
  </button>
</div>

1 ... 3 4 5 6 7 ... 335

Componentes de búsqueda

Categorías

Todos los componentes