Cerca componenti

Categorie

Tutti i componenti

Sfoglia tutti i componenti CSS di Tailwind disponibili

Componente SkeuomorphicNotificationsComponent

Un componente di notifiche semplice e reattivo ispirato allo scheumorfismo, caratterizzato da una combinazione di colori analoga adatta per siti Web aziendali/aziendali. Include il supporto per il tema scuro e utilizza Tailwind CSS per lo stile. Le immagini provengono da picsum.photos e gli avatar da randomuser.me.

Aperto Anteprima

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl">
  <div class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full ring-2 ring-blue-300" src="https://randomuser.me/api/portraits/men/85.jpg" alt="User Avatar">
    <div>
      <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Notification</div>
      <p class="text-sm text-gray-600 dark:text-gray-400">You have a new message from John Doe.</p>
    </div>
  </div>
  <div class="mt-4 flex justify-end">
    <button class="px-4 py-2 bg-blue-500 text-white rounded-full shadow hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800">
      View
    </button>
  </div>
</div>

Accesso social in scala di grigi neumorfica

Un componente di accesso sociale reattivo con uno stile di progettazione del neumorfismo in scala di grigi. Include pulsanti per i provider di servizi sociali, un separatore e collegamenti per l'iscrizione/password dimenticata. Supporta la modalità oscura utilizzando il prefisso dark: di Tailwind. Progettato per ambienti dashboard.

Aperto Anteprima

                <div class="max-w-sm mx-auto p-6 rounded-xl bg-gray-200 dark:bg-gray-800 shadow-[8px_8px_16px_#bebebe,-8px_-8px_16px_#ffffff] dark:shadow-[8px_8px_16px_#303030,-8px_-8px_16px_#505050]">
    <h2 class="text-2xl font-bold text-center text-gray-700 dark:text-gray-300 mb-6">Social Login</h2>

    <div class="space-y-4">
        <button class="w-full flex items-center justify-center px-4 py-3 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 font-semibold shadow-[6px_6px_12px_#bebebe,-6px_-6px_12px_#ffffff] dark:shadow-[6px_6px_12px_#303030,-6px_-6px_12px_#505050] hover:shadow-md focus:outline-none focus:ring-2 focus:ring-gray-400/50 active:shadow-[inset_6px_6px_12px_#bebebe,inset_-6px_-6px_12px_#ffffff] dark:active:shadow-[inset_6px_6px_12px_#303030,inset_-6px_-6px_12px_#505050] transition-all duration-200 ease-in-out">
            <!-- Using simple text/icons for demonstration -->
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                <path d="M7 10v4h3v7h4v-7h3l1-4h-4V8c0-1 0-2 2-2h3V3H7a5 5 0 00-5 5v2z"></path>
            </svg>
            Login with Facebook
        </button>

        <button class="w-full flex items-center justify-center px-4 py-3 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 font-semibold shadow-[6px_6px_12px_#bebebe,-6px_-6px_12px_#ffffff] dark:shadow-[6px_6px_12px_#303030,-6px_-6px_12px_#505050] hover:shadow-md focus:outline-none focus:ring-2 focus:ring-gray-400/50 active:shadow-[inset_6px_6px_12px_#bebebe,inset_-6px_-6px_12px_#ffffff] dark:active:shadow-[inset_6px_6px_12px_#303030,inset_-6px_-6px_12px_#505050] transition-all duration-200 ease-in-out">
             <!-- Using simple text/icons for demonstration -->
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                <path d="M20.283 10.356h-8.327v3.451h4.792c-.446 2.193-2.313 3.453-4.792 3.453a5.27 5.27 0 01-5.279-5.28c0-2.917 2.357-5.274 5.279-5.274a5.024 5.024 0 013.031 1.048l3.18-3.179A9.922 9.922 0 0012.004 2c-5.404 0-9.792 4.388-9.792 9.792s4.388 9.792 9.792 9.792c5.404 0 9.328-3.918 9.328-9.792 0-.79-.137-1.56-.395-2.29z"></path>
            </svg>
            Login with Google
        </button>
         <button class="w-full flex items-center justify-center px-4 py-3 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 font-semibold shadow-[6px_6px_12px_#bebebe,-6px_-6px_12px_#ffffff] dark:shadow-[6px_6px_12px_#303030,-6px_-6px_12px_#505050] hover:shadow-md focus:outline-none focus:ring-2 focus:ring-gray-400/50 active:shadow-[inset_6px_6px_12px_#bebebe,inset_-6px_-6px_12px_#ffffff] dark:active:shadow-[inset_6px_6px_12px_#303030,inset_-6px_-6px_12px_#505050] transition-all duration-200 ease-in-out">
             <!-- Using simple text/icons for demonstration -->
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                <path d="M22.46 6c-.82.38-1.71.64-2.65.76.95-.56 1.68-1.46 2.02-2.55-.94.56-1.98.96-3.09 1.18A5.112 5.112 0 0017.34 4c-3.37 0-6.1 2.73-6.1 6.1 0 .48.05.95.14 1.4a17.36 17.36 0 01-12.6-6.35 6.14 6.14 0 001.89 8.11 6.19 6.19 0 01-2.76-.76v.08c0 2.96 2.11 5.43 4.9 6-.52.14-1.07.21-1.64.21-.4 0-.79-.04-1.17-.11.78 2.43 3.04 4.19 5.74 4.24a12.95 12.95 0 01-8.06 2.75c-.53 0-1.06-.03-1.58-.09 10.94 6.96 23.17 3.59 27.65-7.13v-.5c.95-.69 1.77-1.57 2.42-2.58z"></path>
            </svg>
            Login with Twitter
        </button>
    </div>


    <div class="flex items-center my-6">
        <div class="flex-grow border-t border-gray-400 dark:border-gray-600"></div>
        <span class="px-3 text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 text-sm">or</span>
        <div class="flex-grow border-t border-gray-400 dark:border-gray-600"></div>
    </div>

    <p class="text-center text-gray-600 dark:text-gray-400 text-sm">Don't have an account? <a href="#" class="font-semibold hover:underline">Sign Up</a></p>
     <p class="text-center text-gray-600 dark:text-gray-400 text-xs mt-2"><a href="#" class="hover:underline">Forgot Password?</a></p>


</div>

Componente Mega Menu

Un componente Mega Menu reattivo progettato per blog/consumo di contenuti, con microinterazioni e un focus sui colori del tono della terra, con supporto per la modalità oscura utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="bg-white dark:bg-gray-800 relative group">
    <div class="container mx-auto p-4">
        <nav class="flex justify-between items-center">
            <div class="text-2xl font-semibold text-brown-600 dark:text-green-200">
                Blog Title
            </div>
            <div class="hidden md:flex space-x-8">
                <a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Home</a>
                <a href="#" class="relative transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Categories
                    <div class="absolute inset-x-0 bottom-0 h-0.5 bg-brown-600 dark:bg-green-200 transition duration-300 ease-in-out transform scale-x-0 group-hover:scale-x-100"></div>
                </a>
                <a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">About</a>
                <a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Contact</a>
            </div>
            <div class="md:hidden">
                <button class="text-brown-600 dark:text-green-200 focus:outline-none">
                    <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 12h16M4 18h16" />
                    </svg>
                </button>
            </div>
        </nav>
    </div>
    <div class="absolute hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 w-full rounded-lg overflow-hidden transition-opacity duration-300 ease-in-out">
        <div class="container mx-auto p-6">
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <h2 class="font-bold text-lg text-brown-600 dark:text-green-200">Latest Posts</h2>
                    <ul class="space-y-2">
                        <li>
                            <a href="#" class="flex items-center space-x-2 transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">
                                <img src="https://picsum.photos/50" alt="Post 1" class="h-10 w-10 rounded-full">
                                <span>Understanding Earth Tones in Design</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center space-x-2 transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">
                                <img src="https://picsum.photos/50" alt="Post 2" class="h-10 w-10 rounded-full">
                                <span>The Beauty of Nature-Inspired Living</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div>
                    <h2 class="font-bold text-lg text-brown-600 dark:text-green-200">Categories</h2>
                    <ul class="space-y-2">
                        <li><a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Lifestyle</a></li>
                        <li><a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Travel</a></li>
                        <li><a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Food</a></li>
                        <li><a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Wellness</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Componente Visualizzatore file

Un componente visualizzatore di file reattivo per l'e-commerce con design 3D, combinazione di colori complementari e layout semplice, che supporta la modalità oscura utilizzando Tailwind CSS. Visualizza i file o i documenti dei prodotti.

Aperto Anteprima

                <div class="container mx-auto p-4">
  <!-- Optional: Add a subtle 3D container effect -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 relative overflow-hidden">
    <!-- Complementary Color Accent (Example: Orange and Blue) -->
    <div class="absolute top-0 left-0 w-1/4 h-full bg-orange-500 dark:bg-orange-700 opacity-20"></div>
    <div class="absolute top-0 right-0 w-1/4 h-full bg-blue-500 dark:bg-blue-700 opacity-20"></div>

    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Product Files</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <!-- File Item 1 -->
      <div class="border border-gray-200 dark:border-gray-700 rounded-md p-4 flex items-center space-x-4 relative group">
        <!-- Subtle 3D effect on hover -->
        <div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-gray-200 dark:to-gray-700 opacity-0 group-hover:opacity-50 transition-opacity duration-300"></div>
        <svg class="h-8 w-8 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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" />
        </svg>
        <div class="flex-1">
          <p class="text-gray-700 dark:text-gray-300 font-medium">Product_Guide.pdf</p>
          <p class="text-gray-500 dark:text-gray-400 text-sm">2.5MB</p>
        </div>
        <a href="#" class="text-orange-600 dark:text-orange-400 hover:underline text-sm">Download</a>
      </div>

      <!-- File Item 2 -->
      <div class="border border-gray-200 dark:border-gray-700 rounded-md p-4 flex items-center space-x-4 relative group">
        <!-- Subtle 3D effect on hover -->
        <div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-gray-200 dark:to-gray-700 opacity-0 group-hover:opacity-50 transition-opacity duration-300"></div>
        <svg class="h-8 w-8 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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" />
        </svg>
        <div class="flex-1">
          <p class="text-gray-700 dark:text-gray-300 font-medium">Specifications.docx</p>
          <p class="text-gray-500 dark:text-gray-400 text-sm">0.8MB</p>
        </div>
        <a href="#" class="text-orange-600 dark:text-orange-400 hover:underline text-sm">Download</a>
      </div>

      <!-- File Item 3 -->
      <div class="border border-gray-200 dark:border-gray-700 rounded-md p-4 flex items-center space-x-4 relative group">
        <!-- Subtle 3D effect on hover -->
        <div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-gray-200 dark:to-gray-700 opacity-0 group-hover:opacity-50 transition-opacity duration-300"></div>
        <svg class="h-8 w-8 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
        <div class="flex-1">
          <p class="text-gray-700 dark:text-gray-300 font-medium"> high_res_image.jpg</p>
          <p class="text-gray-500 dark:text-gray-400 text-sm">5.1MB</p>
        </div>
        <a href="#" class="text-orange-600 dark:text-orange-400 hover:underline text-sm">Download</a>
      </div>
    </div>

  </div>
</div>

Componente visualizzatore a 360°

Un semplice componente visualizzatore a 360° progettato in uno stile brutalista per l'e-commerce, caratterizzato da una combinazione di colori triadica e un design reattivo con supporto per il tema scuro.

Aperto Anteprima

                <div class="flex flex-col items-center justify-center p-5 bg-gray-900 text-white dark:bg-gray-800">
    <h2 class="text-3xl font-bold mb-4">360° Product Viewer</h2>
    <div class="flex items-center justify-center space-x-5 mb-4">
        <img src="https://picsum.photos/200/300?random=1" alt="Product Image" class="border-4 border-red-600 dark:border-blue-400 rounded-lg transition-transform duration-500 ease-in-out hover:scale-105" />
        <img src="https://picsum.photos/200/300?random=2" alt="Product Image" class="border-4 border-yellow-400 dark:border-green-500 rounded-lg transition-transform duration-500 ease-in-out hover:scale-105" />
        <img src="https://picsum.photos/200/300?random=3" alt="Product Image" class="border-4 border-blue-500 dark:border-red-600 rounded-lg transition-transform duration-500 ease-in-out hover:scale-105" />
    </div>
    <p class="text-center mb-5">Rotate through the product images to see more details.</p>
    <div class="flex space-x-3">
        <button class="bg-red-600 text-white font-bold py-2 px-4 rounded-lg shadow-md hover:bg-red-700 dark:hover:bg-red-500 transition duration-200">Previous</button>
        <button class="bg-yellow-400 text-gray-900 font-bold py-2 px-4 rounded-lg shadow-md hover:bg-yellow-500 dark:bg-green-600 dark:text-white dark:hover:bg-green-500 transition duration-200">Next</button>
    </div>
    <div class="mt-5">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-yellow-400 dark:border-green-500" />
        <p class="mt-2 text-center font-medium">Customer Review</p>
    </div>
</div>

Componente Messaggi di errore

Componente Messaggi di errore retrò / vintage con una combinazione di colori pastello, layout complesso, design reattivo e supporto per temi scuri utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="relative min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="relative bg-white dark:bg-gray-800 p-10 rounded-lg shadow-xl transform transition-all sm:w-full sm:max-w-md">
    <div class="absolute top-0 right-0 -mt-4 -mr-4">
      <svg class="h-12 w-12 text-red-500 dark:text-red-400 transform rotate-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
    </div>
    <div class="text-center">
      <h2 class="mt-6 text-3xl font-bold text-gray-900 dark:text-white font-display">
        Oops!
      </h2>
      <p class="mt-2 text-sm text-gray-600 dark:text-gray-300 font-body">
        Looks like something went wrong.
      </p>
    </div>
    <div class="mt-6">
      <div class="rounded-md bg-red-50 dark:bg-red-900 p-4">
        <div class="flex">
          <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-red-400 dark:text-red-600" viewBox="0 0 20 20" fill="currentColor">
              <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.586 8.707 7.293z" clip-rule="evenodd"/>
            </svg>
          </div>
          <div class="ml-3">
            <h3 class="text-sm font-medium text-red-800 dark:text-red-200">
              We encountered an error.
            </h3>
            <div class="mt-2 text-sm text-red-700 dark:text-red-300">
              <ul role="list" class="list-disc pl-5 space-y-1">
                <li>
                  Please try again in a few minutes.
                </li>
                <li>
                  If the issue persists, contact support.
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-6 text-center">
      <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300 font-body">
        Go back home
      </a>
    </div>
  </div>
</div>

Menù Hamburger E-commerce retrò

Un componente di menu per hamburger complesso, reattivo e supportato dalla modalità oscura per l'e-commerce, con un'estetica retrò/vintage (anni '80/'90) e una combinazione di colori complementari (viola, ciano, oro). Presenta la navigazione principale, i collegamenti all'account, il carrello, la ricerca e un interruttore CSS puro utilizzando l'hack della casella di controllo. Utilizza le classi CSS Tailwind.

Aperto Anteprima

                <header class="fixed top-0 w-full z-50 bg-white dark:bg-[#1A1A1A] shadow-lg">
    <div class="container mx-auto flex justify-between items-center p-4">
        <!-- Logo/Site Title -->
        <div class="text-2xl font-bold text-black dark:text-white">RetroShop</div>

        <!-- Hamburger/Cart/Account icons -->
        <div class="flex items-center space-x-4">
             <!-- Account/Cart Icons placeholders -->
             <a href="#account" class="text-black dark:text-white hover:text-[#A720DA] text-xl focus:outline-none" aria-label="Account"><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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg></a>
             <a href="#cart" class="text-black dark:text-white hover:text-[#A720DA] text-xl focus:outline-none" aria-label="Cart"><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 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg></a>
             <!-- Hamburger Label -->
             <label for="menu-toggle" class="block cursor-pointer lg:hidden z-50 w-6 h-6 flex flex-col justify-around focus:outline-none" aria-label="Toggle menu">
                 <div class="hamburger-icon bg-black dark:bg-white"></div>
                 <div class="hamburger-icon bg-black dark:bg-white"></div>
                 <div class="hamburger-icon bg-black dark:bg-white"></div>
             </label>
        </div>
    </div>
</header>

<!-- Hidden Checkbox Hack -->
<input type="checkbox" id="menu-toggle" class="hidden">

<!-- Overlay (Sibling to panel) -->
<div class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden overlay"></div>

<!-- Navigation Panel (Sibling to checkbox) -->
<nav class="fixed top-0 right-0 w-64 md:w-80 lg:w-96 h-full transform translate-x-full transition-transform duration-300 ease-in-out z-50 bg-white dark:bg-[#1A1A1A] border-l-4 border-[#20DACA] dark:border-[#A720DA]" role="navigation" aria-label="Main menu">
    <div class="p-6 overflow-y-auto h-full">
        <!-- Close Button Label -->
        <label for="menu-toggle" class="absolute top-4 right-4 text-3xl font-bold cursor-pointer text-black dark:text-white hover:text-[#FFD700]" aria-label="Close menu">&times;</label>

        <!-- Panel Content -->
        <div class="mt-8">
            <h2 class="text-xl font-bold mb-6 text-black dark:text-white">Menu</h2>

            <!-- Main Navigation -->
            <div class="mb-6 border-b-2 border-[#20DACA] dark:border-[#A720DA] pb-4">
                <h3 class="text-lg font-semibold mb-3 text-gray-700 dark:text-gray-300">Shop</h3>
                <ul>
                    <li class="mb-2"><a href="#new" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] block py-1">New Arrivals</a></li>
                    <li class="mb-2"><a href="#sales" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] block py-1">Sales</a></li>
                    <li class="mb-2"><a href="#categories" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] block py-1">Categories</a></li>
                </ul>
            </div>

            <!-- Account/User -->
            <div class="mb-6 pb-4 border-b-2 border-[#20DACA] dark:border-[#A720DA]">
                 <h3 class="text-lg font-semibold mb-3 text-gray-700 dark:text-gray-300">Account</h3>
                 <div class="flex items-center space-x-3 mb-4">
                     <!-- Avatar -->
                     <img src="https://randomuser.me/api/portraits/men/72.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-[#FFD700]">
                     <span class="text-black dark:text-white">Hello, User!</span>
                 </div>
                 <ul>
                    <li class="mb-2"><a href="#login" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] block py-1">Login / Sign Up</a></li>
                    <li class="mb-2"><a href="#account" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] block py-1">My Account</a></li>
                 </ul>
            </div>

            <!-- Cart -->
             <div class="mb-6 pb-4 border-b-2 border-[#20DACA] dark:border-[#A720DA]">
                 <h3 class="text-lg font-semibold mb-3 text-gray-700 dark:text-gray-300">Your Cart</h3>
                 <a href="#cart" class="hover:underline text-blue-600 dark:text-blue-400 hover:text-[#FFD700] dark:hover:text-[#FFD700] flex items-center py-1">
                     🛒 Items (3)
                 </a>
             </div>

             <!-- Search (Simple Input) -->
             <div class="mb-6">
                  <h3 class="text-lg font-semibold mb-3 text-gray-700 dark:text-gray-300">Search</h3>
                  <input type="text" placeholder="Product search..." class="w-full p-2 border-2 border-[#20DACA] dark:border-[#A720DA] bg-white dark:bg-[#1A1A1A] text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFD700] focus:border-transparent">
             </div>

             <!-- Placeholder Image (Optional Retro feel) -->
             <div class="mt-6">
                  <img src="https://picsum.photos/seed/retro-shop-menu/300/200" alt="Retro Shop Image" class="w-full h-auto object-cover border-2 border-[#FFD700]">
             </div>

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

<!-- Add the CSS for checkbox hack and hamburger animation -->
<style>
    /* Hamburger animation */
    .hamburger-icon {
        display: block;
        width: 1.5rem; /* w-6 */
        height: 0.25rem; /* h-1 */
        margin: 0.25rem 0;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }

    /* Show overlay when checkbox is checked */
    #menu-toggle:checked ~ .overlay {
        display: block;
    }

    /* Slide panel into view when checkbox is checked */
    #menu-toggle:checked ~ nav {
        transform: translateX(0);
    }

     /* Animate hamburger icon to X */
    #menu-toggle:checked + .overlay + nav + header label .hamburger-icon:nth-child(1) {
        transform: translateY(0.5rem) rotate(45deg); /* Adjust based on margin/height */
    }
    #menu-toggle:checked + .overlay + nav + header label .hamburger-icon:nth-child(2) {
        opacity: 0;
        transform: translateX(20px);
    }
    #menu-toggle:checked + .overlay + nav + header label .hamburger-icon:nth-child(3) {
        transform: translateY(-0.5rem) rotate(-45deg); /* Adjust based on margin/height */
    }

     /* Hide hamburger label on screens larger than lg breakpoint - Adjust if menu should always be hamburger */
    @media (min-width: 1024px) {
       [for="menu-toggle"] {
             display: none;
         }
    }
     /* On large screens, potentially show a different nav style - Not implemented here as only hamburger was requested */

</style>

Componente Lightbox immagine

Un componente Image Lightbox in stile brutalista adatto per un blog o una piattaforma di contenuti, progettato con toni della terra ed elementi interattivi complessi.

Aperto Anteprima

                <div class="relative flex flex-col items-center justify-center p-4 w-full max-w-screen-lg mx-auto bg-white dark:bg-gray-800 border-2 border-gray-700 dark:border-gray-300 rounded-lg overflow-hidden shadow-lg">
    <h2 class="text-3xl font-bold mb-4 text-gray-800 dark:text-gray-200">Image Lightbox</h2>
    <div class="flex flex-wrap justify-center gap-4">
        <!-- Image Thumbnails -->
        <div class="w-1/3 p-2">
            <img src="https://picsum.photos/300/200?random=1" alt="Example Image 1" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300" onclick="openLightbox('https://picsum.photos/600/400?random=1')">
        </div>
        <div class="w-1/3 p-2">
            <img src="https://picsum.photos/300/200?random=2" alt="Example Image 2" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300" onclick="openLightbox('https://picsum.photos/600/400?random=2')">
        </div>
        <div class="w-1/3 p-2">
            <img src="https://picsum.photos/300/200?random=3" alt="Example Image 3" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300" onclick="openLightbox('https://picsum.photos/600/400?random=3')">
        </div>
    </div>
    <!-- Lightbox Overlay -->
    <div id="lightbox" class="hidden fixed inset-0 z-50 bg-black bg-opacity-75 flex items-center justify-center transition-opacity duration-300">
        <span class="absolute top-4 right-4 text-white cursor-pointer" onclick="closeLightbox()">&times;</span>
        <img id="lightbox-img" class="max-w-full max-h-full object-contain" src="" alt="Lightbox Image">
    </div>
</div>

<script>
function openLightbox(imageUrl) {
    const lightbox = document.getElementById('lightbox');
    const lightboxImg = document.getElementById('lightbox-img');
    lightboxImg.src = imageUrl;
    lightbox.classList.remove('hidden');
}

function closeLightbox() {
    const lightbox = document.getElementById('lightbox');
    lightbox.classList.add('hidden');
}
</script>

Componente di navigazione della barra laterale

Un componente di navigazione della barra laterale su misura per i blog, progettato con elementi 3D e colori vivaci. Supporta la modalità oscura ed è reattivo, con un layout semplice adatto al consumo di contenuti.

Aperto Anteprima

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 h-screen sticky top-0">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Navigation</h2>
    <ul class="space-y-4">
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Home</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">About</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Blog</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150"> 
                <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
                <span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Contact</span>
            </a>
        </li>
    </ul>
</div>

Componente di avviso timeout sessione

Un componente di avviso di timeout sessione reattivo progettato con lo stile glassmorphism e adatto per temi scuri. Presenta una combinazione di colori pastello, elementi traslucidi simili al vetro smerigliato con effetti di sfocatura e alcune funzioni interattive come un timer per il conto alla rovescia e pulsanti di azione.

Aperto Anteprima

                <div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-70 dark:bg-gray-800 dark:bg-opacity-70">
    <div class="bg-white dark:bg-gray-900 backdrop-blur-lg rounded-lg shadow-lg p-6 max-w-sm w-full">
        <h2 class="text-center text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Session Timeout Alert</h2>
        <p class="text-center text-gray-600 dark:text-gray-400 mb-6">Your session will expire in <span id="countdown" class="font-bold text-red-500">05:00</span> minutes.</p>
        <div class="flex justify-around mt-4">
            <button class="bg-gradient-to-r from-pink-400 to-blue-400 text-white font-medium py-2 px-4 rounded-lg hover:opacity-90 focus:outline-none dark:from-pink-500 dark:to-blue-500">Stay Logged In</button>
            <button class="bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded-lg hover:opacity-90 focus:outline-none dark:bg-gray-600 dark:text-gray-200">Logout</button>
        </div>
    </div>
</div>

1 ... 175 176 177 178 179 ... 315