Cerca componenti

Categorie

Tutti i componenti

Sfoglia tutti i componenti CSS di Tailwind disponibili

Torna all'inizio Button - Brutalismo

Un brutalista componente pulsante "Torna all'inizio" per un portfolio, con una combinazione di colori triadica e un design semplice. È reattivo e supporta la modalità oscura utilizzando Tailwind CSS.

Aperto Anteprima

                <a href="#" class="fixed bottom-4 right-4 bg-red-500 text-yellow-300 border-4 border-black dark:bg-red-700 dark:text-yellow-100 dark:border-white transition-all duration-300 hover:bg-red-600 hover:text-yellow-400 dark:hover:bg-red-800 dark:hover:text-yellow-200 p-4 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] z-50">
    <span class="font-extrabold text-xl uppercase">↑<br/>Top</span>
</a>

Componente di navigazione del piè di pagina

Un componente di navigazione a piè di pagina reattivo progettato per un cruscotto, caratterizzato da uno stile Skeuomorphic con colori vivaci. Include collegamenti di navigazione, un logo e icone dei social media, con supporto completo della modalità oscura utilizzando Tailwind CSS. Il design mira a una complessità moderata con effetti di hover interattivi.

Aperto Anteprima

                
<footer class="bg-gradient-to-br from-gray-200 to-gray-400 text-gray-800 p-6 shadow-2xl relative overflow-hidden dark:from-gray-900 dark:to-gray-700 dark:text-gray-200">
  <!-- Background Ornaments for Skeuomorphism -->
  <div class="absolute inset-0 pointer-events-none">
    <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-gradient-to-br from-yellow-300 to-orange-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:from-yellow-600 dark:to-orange-700"></div>
    <div class="absolute top-1/2 right-1/4 w-32 h-32 bg-gradient-to-br from-pink-400 to-red-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:from-pink-700 dark:to-red-800"></div>
    <div class="absolute bottom-1/4 left-1/3 w-32 h-32 bg-gradient-to-br from-green-300 to-blue-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 dark:from-green-600 dark:to-blue-700"></div>
  </div>


  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center relative z-10">
    <!-- Logo Section -->
    <div class="mb-4 md:mb-0 transform hover:scale-105 transition duration-300">
      <a href="#" class="flex items-center space-x-3 3d-text">
        <!-- Skeuomorphic Logo Placeholder -->
        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg shadow-inner flex items-center justify-center p-2 dark:from-blue-700 dark:to-purple-800">
          <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h4c0 0 0 0 0 0 0-1 0-2 0-3 0-4 0-5 0-6 0-1 0-2 0-3 0-4 0-5 0-6 0-1 0-2 0-3 0-4 0-5 0-6 0-1 0-2 0-3 0-4 0-5 0-6 0-1 M15 17l-1 1h-4c0 0 0 0 0 0v-4l4-4V7a2 2 0 00-2-2H9a2 2 0 00-2 2v4l-4 4V17a2 2 0 002 2h4l4-4z"></path></svg>
        </div>
        <span class="text-3xl font-extrabold text-gray-900 drop-shadow-lg dark:text-white">Dashboard</span>
      </a>
    </div>

    <!-- Navigation Links -->
    <nav class="mb-4 md:mb-0">
      <ul class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8 text-lg font-medium">
        <li><a href="#" class="hover:text-blue-600 transition duration-300 ease-in-out transform hover:-translate-y-1 block py-2 px-3 rounded-md active-link dark:hover:text-blue-400 3d-button">Home</a></li>
        <li><a href="#" class="hover:text-green-600 transition duration-300 ease-in-out transform hover:-translate-y-1 block py-2 px-3 rounded-md hover-effect-1 dark:hover:text-green-400 3d-button">Analytics</a></li>
        <li><a href="#" class="hover:text-purple-600 transition duration-300 ease-in-out transform hover:-translate-y-1 block py-2 px-3 rounded-md hover-effect-2 dark:hover:text-purple-400 3d-button">Reports</a></li>
        <li><a href="#" class="hover:text-orange-600 transition duration-300 ease-in-out transform hover:-translate-y-1 block py-2 px-3 rounded-md hover-effect-3 dark:hover:text-orange-400 3d-button">Settings</a></li>
      </ul>
    </nav>

    <!-- Social Media Icons -->
    <div class="flex space-x-4">
      <a href="#" class="text-gray-700 hover:text-blue-500 transform hover:scale-110 transition duration-300 dark:text-gray-300 dark:hover:text-blue-400 3d-icon">
        <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.873V14.89h-2.54V12h2.54V9.77c0-2.508 1.493-3.89 3.776-3.89 1.094 0 2.24.195 2.24.195v2.45h-1.24c-1.209 0-1.583.75-1.583 1.518V12h2.773l-.443 2.89h-2.33V22h5.517c3.544-.66 6.257-3.957 6.257-7.981C22 6.477 17.523 2 12 2z"></path></svg>
      </a>
      <a href="#" class="text-gray-700 hover:text-red-600 transform hover:scale-110 transition duration-300 dark:text-gray-300 dark:hover:text-red-500 3d-icon">
        <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.071 1.17.06 1.74.24 2.19.418.46.18.82.35 1.13.66.31.31.48.67.66 1.13.17.45.35 1.02.418 2.19.059 1.266.071 1.646.071 4.85s-.012 3.584-.071 4.85c-.06 1.17-.24 1.74-.418 2.19-.18.46-.35.82-.66 1.13-.31.31-.67.48-1.13.66-.45.17-.99.35-2.19.418-1.266.059-1.646.071-4.85.071s-3.584-.012-4.85-.071c-1.17-.06-1.74-.24-2.19-.418-.46-.18-.82-.35-1.13-.66-.31-.31-.48-.67-.66-1.13-.17-.45-.35-.99-.418-2.19-.059-1.266-.071-1.646-.071-4.85s.012-3.584.071-4.85c.06-1.17.24-1.74.418-2.19.18-.46.35-.82.66-1.13.31-.31.67-.48 1.13-.66.45-.17.99-.35 2.19-.418C8.416 2.175 8.796 2.163 12 2.163zm0 3.868c-3.34 0-6.04 2.7-6.04 6.04s2.7 6.04 6.04 6.04 6.04-2.7 6.04-6.04-2.7-6.04-6.04-6.04zM12 16.347c-2.4 0-4.347-1.946-4.347-4.347 0-2.4 1.946-4.347 4.347-4.347s4.347 1.946 4.347 4.347c0 2.4-1.946 4.347-4.347 4.347zm6.757-9.52c-.67 0-1.21-.54-1.21-1.21s.54-1.21 1.21-1.21 1.21.54 1.21 1.21-.54 1.21-1.21 1.21z"></path></svg>
      </a>
      <a href="#" class="text-gray-700 hover:text-blue-700 transform hover:scale-110 transition duration-300 dark:text-gray-300 dark:hover:text-blue-600 3d-icon">
        <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24"><path d="M22.46 6h-6.28l.8-.93c.18-.21.28-.48.28-.76a1.185 1.185 0 00-1.18-.54h-1.63c-.11-.06-.23-.1-.36-.12-.13-.02-.27-.03-.4-.03H3.61c-1.39 0-2 1.01-2 2.4V20h22.46c.86 0 1.54-.68 1.54-1.54v-10.45c0-.86-.68-1.54-1.54-1.54zm-2.46 8H5v-2h15v2zm0-4H5V8h15v2z"></path></svg>
      </a>
    </div>
  </div>

  <!-- Copyright and additional links -->
  <div class="mt-6 pt-4 border-t border-gray-300 text-center text-gray-600 text-sm dark:border-gray-600 dark:text-gray-400 relative z-10">
    <p>&copy; 2023 Dashboard Inc. All rights reserved.</p>
    <div class="flex justify-center space-x-4 mt-2">
      <a href="#" class="hover:underline hover:text-gray-800 dark:hover:text-gray-200">Privacy Policy</a>
      <a href="#" class="hover:underline hover:text-gray-800 dark:hover:text-gray-200">Terms of Service</a>
    </div>
  </div>

  <!-- Styles for Skeuomorphism and Vibrancy -->
  <style>
    @keyframes blob {
      0% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(30px, -50px) scale(1.1); }
      66% { transform: translate(-20px, 20px) scale(0.9); }
      100% { transform: translate(0, 0) scale(1); }
    }

    .animate-blob {
      animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

    .animation-delay-2000 {
      animation-delay: 2s;
    }

    .animation-delay-4000 {
      animation-delay: 4s;
    }

    .3d-text {
      text-shadow: 1px 1px 0px rgba(255,255,255,0.7), 2px 2px 0px rgba(0,0,0,0.5);
      color: #333;
    }

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

    .3d-button {
        background-color: #d1d5db; /* Light gray */
        border-radius: 0.5rem;
        box-shadow: inset 0px 1px 0px rgba(255,255,255,0.8), 0px 3px 5px rgba(0,0,0,0.3), inset 0px -2px 0px rgba(0,0,0,0.15);
        transition: all 0.2s ease-in-out;
    }

    .3d-button:hover {
        transform: translateY(-2px);
        box-shadow: inset 0px 1px 0px rgba(255,255,255,0.9), 0px 5px 8px rgba(0,0,0,0.4), inset 0px -1px 0px rgba(0,0,0,0.2);
    }

    .dark .3d-button {
        background-color: #4a5568; /* Darker gray */
        box-shadow: inset 0px 1px 0px rgba(255,255,255,0.1), 0px 3px 5px rgba(0,0,0,0.7), inset 0px -2px 0px rgba(0,0,0,0.3);
    }

    .dark .3d-button:hover {
        transform: translateY(-2px);
        box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2), 0px 5px 8px rgba(0,0,0,0.8), inset 0px -1px 0px rgba(0,0,0,0.4);
    }

    .3d-icon {
        filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
    }

    .dark .3d-icon {
        filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.7));
    }

    /* Specific vibrant color hover effects for navigation */
    .active-link {
      color: #3b82f6; /* blue-500 */
      font-weight: bold;
      text-shadow: 0px 0px 8px rgba(59, 130, 246, 0.6);
    }
    .dark .active-link {
      color: #60a5fa; /* blue-400 */
      text-shadow: 0px 0px 8px rgba(96, 165, 250, 0.6);
    }
  </style>
</footer>

Componente Sezione Commenti

Un componente della sezione commenti dal design minimalista/piatto per l'e-commerce con colori vivaci, complessità moderata, design reattivo e supporto per temi scuri.

Aperto Anteprima

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Customer Reviews</h2>

  <!-- Comment 1 -->
  <div class="mb-6 flex">
    <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    <div>
      <div class="flex items-center mb-2">
        <p class="font-semibold text-blue-600 dark:text-blue-400">Sarah J.</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm ml-4">2 days ago</p>
      </div>
      <div class="flex items-center mb-2">
        <span class="text-yellow-400">★★★★★</span>
      </div>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed">"Absolutely love this product! The quality is superb and it arrived so quickly. Highly recommend!"</p>
    </div>
  </div>

  <!-- Comment 2 -->
  <div class="mb-6 flex">
    <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
    <div>
      <div class="flex items-center mb-2">
        <p class="font-semibold text-blue-600 dark:text-blue-400">Mark T.</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm ml-4">5 days ago</p>
      </div>
      <div class="flex items-center mb-2">
        <span class="text-yellow-400">★★★★☆</span>
      </div>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed">"Good product overall. It does what it says. Shipping was a bit slow, but worth the wait."</p>
    </div>
  </div>

  <!-- Comment Form (moderate complexity interactive feature) -->
  <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Leave a Review</h3>
    <form>
      <div class="mb-4">
        <label for="rating" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Rating</label>
        <select id="rating" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 dark:text-white dark:border-gray-600">
          <option>★★★★★ - Excellent</option>
          <option>★★★★☆ - Very Good</option>
          <option>★★★☆☆ - Good</option>
          <option>★★☆☆☆ - Fair</option>
          <option>★☆☆☆☆ - Poor</option>
        </select>
      </div>
      <div class="mb-4">
        <label for="comment" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Comment</label>
        <textarea id="comment" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 dark:text-white dark:border-gray-600" placeholder="Share your thoughts..."></textarea>
      </div>
      <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">
        Submit Review
      </button>
    </form>
  </div>
</div>

Componente Profili utente

Componente profili utente con design brutalista, combinazione di colori monocromatica e complessità semplice per scopi di social media.

Aperto Anteprima

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-brutalism rounded-none overflow-hidden">
    <div class="p-6">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-3xl font-bold text-black dark:text-white uppercase">Profiles</h2>
        <svg class="w-8 h-8 text-black dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
      </div>
      
      <div class="space-y-6">
        <!-- Profile 1 -->
        <div class="flex items-center space-x-4 border-2 border-black dark:border-white p-4 bg-gray-200 dark:bg-gray-700">
          <img class="w-16 h-16 object-cover border-2 border-black dark:border-white" src="https://randomuser.me/api/portraits/men/80.jpg" alt="User Avatar">
          <div>
            <h3 class="text-xl font-bold text-black dark:text-white uppercase">John Doe</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300">Online</p>
          </div>
        </div>

        <!-- Profile 2 -->
        <div class="flex items-center space-x-4 border-2 border-black dark:border-white p-4 bg-gray-200 dark:bg-gray-700">
          <img class="w-16 h-16 object-cover border-2 border-black dark:border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <h3 class="text-xl font-bold text-black dark:text-white uppercase">Jane Smith</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300">Offline</p>
          </div>
        </div>

        <!-- Profile 3 -->
        <div class="flex items-center space-x-4 border-2 border-black dark:border-white p-4 bg-gray-200 dark:bg-gray-700">
          <img class="w-16 h-16 object-cover border-2 border-black dark:border-white" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
          <div>
            <h3 class="text-xl font-bold text-black dark:text-white uppercase">Peter Jones</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300">Online</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .shadow-brutalism {
    box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 1);
  }
  .dark .shadow-brutalism {
    box-shadow: 8px 8px 0px 0px rgba(255, 255, 255, 1);
  }
</style>

Scheda Prodotto Brutalista

Un semplice componente interattivo della scheda prodotto per l'e-commerce, con un design brutalista in scala di grigi. Presenta un'immagine del prodotto, un titolo, un prezzo e un pulsante "Aggiungi al carrello". Il componente è reattivo e supporta la modalità scura. Gli effetti al passaggio del mouse sono inclusi per l'interattività.

Aperto Anteprima

                <div class="dark:bg-gray-900 bg-gray-100 p-4 font-mono antialiased flex items-center justify-center min-h-screen">
  <div class="relative dark:bg-black bg-white border-2 border-black dark:border-white w-full max-w-sm mx-auto shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff]">
    <div class="overflow-hidden border-b-2 border-black dark:border-white">
      <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover transition-transform duration-300 ease-in-out hover:scale-105">
    </div>
    <div class="p-4 relative">
      <h3 class="text-xl dark:text-white text-black font-bold mb-2 uppercase">Product Title Here</h3>
      <p class="text-black dark:text-gray-300 text-sm mb-4">A short and punchy description of the product, highlighting its brutalist appeal.</p>
      <div class="flex justify-between items-center mb-4">
        <span class="text-2xl dark:text-white text-black font-extrabold">$99.99</span>
        <button class="bg-black dark:bg-white text-white dark:text-black uppercase text-sm py-2 px-4 border-2 border-black dark:border-white font-bold hover:bg-gray-800 dark:hover:bg-gray-300 transition-colors duration-200 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">Add to Cart</button>
      </div>
    </div>
    <div class="absolute -top-2 -right-2 bg-black dark:bg-white text-white dark:text-black px-2 py-1 text-xs font-bold uppercase border-2 border-black dark:border-white">New</div>
  </div>
</div>

Componente Modulo di accesso

Un componente del modulo di accesso complesso e reattivo con microinterazioni e una combinazione di colori analoga, adatto per siti Web aziendali/aziendali. Supporta la modalità oscura e utilizza Tailwind CSS per lo stile.

Aperto Anteprima

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl flex flex-col md:flex-row w-full max-w-4xl overflow-hidden">

    <!-- Image Section -->
    <div class="md:w-1/2 p-0 relative">
      <img src="https://picsum.photos/800/600?random=1" alt="Login Illustration" class="w-full h-full object-cover">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-800 to-transparent opacity-75"></div>
      <div class="absolute bottom-6 left-6 text-white text-3xl font-bold">Welcome Back!</div>
    </div>

    <!-- Login Form Section -->
    <div class="md:w-1/2 p-8 md:p-12 space-y-8 flex flex-col justify-center">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center">Login to Your Account</h2>

      <form class="space-y-6">

        <!-- Email Input with Microinteraction -->
        <div class="relative group">
          <input type="email" id="email" class="peer h-12 w-full border-b-2 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white placeholder-transparent focus:outline-none focus:border-purple-600 dark:focus:border-purple-400 bg-transparent" placeholder="Email address" />
          <label for="email" class="absolute left-0 -top-3.5 text-gray-600 dark:text-gray-400 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3 peer-focus:-top-3.5 peer-focus:text-purple-600 dark:peer-focus:text-purple-400 peer-focus:text-sm">Email address</label>
          <svg class="absolute right-3 top-3 text-gray-400 dark:text-gray-500 group-focus-within:text-purple-600 dark:group-focus-within:text-purple-400 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
        </div>

        <!-- Password Input with Microinteraction -->
        <div class="relative group animate-fade-in-up">
          <input type="password" id="password" class="peer h-12 w-full border-b-2 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white placeholder-transparent focus:outline-none focus:border-purple-600 dark:focus:border-purple-400 bg-transparent" placeholder="Password" />
          <label for="password" class="absolute left-0 -top-3.5 text-gray-600 dark:text-gray-400 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3 peer-focus:-top-3.5 peer-focus:text-purple-600 dark:peer-focus:text-purple-400 peer-focus:text-sm">Password</label>
          <svg class="absolute right-3 top-3 text-gray-400 dark:text-gray-500 group-focus-within:text-purple-600 dark:group-focus-within:text-purple-400 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
        </div>

        <!-- Remember Me & Forgot Password -->
        <div class="flex items-center justify-between text-sm">
          <div class="flex items-center">
            <input id="remember_me" name="remember_me" type="checkbox" class="h-4 w-4 text-purple-600 dark:text-purple-400 focus:ring-purple-500 border-gray-300 rounded dark:border-gray-600">
            <label for="remember_me" class="ml-2 block text-gray-900 dark:text-gray-300">Remember me</label>
          </div>
          <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200">Forgot your password?</a>
        </div>

        <!-- Login Button with Microinteraction -->
        <div>
          <button type="submit" class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-lg font-medium rounded-md text-white bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-offset-gray-800 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
              <svg class="h-6 w-6 text-purple-200 group-hover:text-purple-100 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
              </svg>
            </span>
            Sign in
          </button>
        </div>
      </form>

      <!-- Social Login Options (Example Microinteraction) -->
      <div class="relative">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
        </div>
      </div>

      <div class="flex justify-center space-x-4">
        <button class="flex items-center justify-center p-3 border border-gray-300 dark:border-gray-600 rounded-full shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800 transform hover:-translate-y-1 transition-transform duration-200">
          <img class="h-5 w-5 mr-2" src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google">
          Google
        </button>
        <button class="flex items-center justify-center p-3 border border-gray-300 dark:border-gray-600 rounded-full shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 transform hover:-translate-y-1 transition-transform duration-200">
          <img class="h-5 w-5 mr-2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Facebook_Logo_%282019%29.png/1200px-Facebook_Logo_%282019%29.png" alt="Facebook">
          Facebook
        </button>
      </div>

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

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

<!-- To enable micro-interactions, you would typically use JavaScript. 
     However, for the purpose of this request, some CSS-only micro-interactions 
     are simulated using Tailwind's `group` and `peer` modifiers, 
     and `hover` / `active` / `focus` pseudo-classes for basic animations. 
     More complex animations would require a JS framework like React/Vue/Angular, 
     or plain JS with Web Animations API or CSS keyframe animations. -->

Componente Pulsanti Mi piace/Reazione

Un componente reattivo Like/Reaction Buttons con supporto per la modalità oscura utilizzando Tailwind CSS. È dotato di una combinazione di colori complementari adatta a un cruscotto, con una complessità moderata per i pulsanti di reazione interattivi.

Aperto Anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-900">
  <div class="dark:bg-gray-800 p-4 rounded-lg shadow-xl">
    <div class="flex space-x-2">
      <!-- Like Button -->
      <button class="flex items-center space-x-1 p-2 rounded-full dark:bg-blue-600 text-white hover:dark:bg-blue-700 transition duration-300">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.857 2.14L18 17v-2.14a2 2 0 00-.857-1.857L14 10zM4 10h4.764a2 2 0 011.857 2.14L8 17v-2.14a2 2 0 00-.857-1.857L4 10zM9 16l-3 3m0 0l-3-3m3 3V4"></path></svg>
        <span>Like</span>
        <span class="dark:text-blue-200">1.2K</span>
      </button>

      <!-- Reactions Dropdown (simplified) -->
      <div class="relative group">
        <button class="flex items-center space-x-1 p-2 rounded-full dark:bg-green-600 text-white hover:dark:bg-green-700 transition duration-300">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m0 0H9m12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          <span>React</span>
        </button>
        <!-- This dropdown would typically be controlled by JavaScript, but for HTML-only, it's always visible on hover for demonstration -->
        <div class="hidden group-hover:block absolute left-0 mt-2 w-48 dark:bg-gray-700 rounded-md shadow-lg py-1 z-10">
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">👍 Like</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">❤️ Love</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😂 Laugh</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😮 Wow</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😢 Sad</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😡 Angry</a>
        </div>
      </div>
    </div>
  </div>
</div>

Componente lettore audio

Un componente del lettore audio reattivo con microinterazioni, combinazione di colori del tono della terra, complessità moderata e supporto per temi scuri, adatto per siti Web aziendali/aziendali.

Aperto Anteprima

                <div class="p-4 bg-stone-100 dark:bg-stone-900 rounded-lg shadow-xl max-w-md mx-auto my-10 transform transition duration-500 hover:scale-105">
  <div class="flex items-center space-x-4">
    <div class="flex-shrink-0">
      <img class="h-16 w-16 rounded-lg object-cover shadow-lg" src="https://picsum.photos/seed/audio-art/100/100" alt="Album Art">
    </div>
    <div class="flex-grow">
      <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-200">Whispering Pines</h3>
      <p class="text-sm text-stone-600 dark:text-stone-400">Nature Sounds Co.</p>
    </div>
    <button class="p-3 rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 transform transition duration-300 hover:scale-110 hover:bg-stone-400 dark:hover:bg-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
      <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
        <path d="M8 5v14l11-7z"/>
      </svg>
    </button>
  </div>

  <div class="mt-5">
    <div class="flex items-center space-x-3">
      <span class="text-xs text-stone-600 dark:text-stone-400">0:45</span>
      <div class="flex-grow bg-stone-300 dark:bg-stone-700 rounded-full h-2">
        <div class="bg-amber-700 dark:bg-amber-500 h-2 rounded-full" style="width: 45%;"></div>
      </div>
      <span class="text-xs text-stone-600 dark:text-stone-400">3:20</span>
    </div>

    <div class="flex justify-between items-center mt-4">
      <button class="p-2 rounded-full text-stone-600 dark:text-stone-400 transform transition duration-300 hover:scale-110 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none">
        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
      </button>
      <button class="p-2 rounded-full text-stone-600 dark:text-stone-400 transform transition duration-300 hover:scale-110 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none">
        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18 18l-8.5-6L18 6v12zM6 6v12h2V6H6z"/></svg>
      </button>
      <button class="p-2 rounded-full text-stone-600 dark:text-stone-400 transform transition duration-300 hover:scale-110 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none">
        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 4.5V19.5M19.5 12H4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </button>
      
      <div class="relative group">
        <button class="p-2 rounded-full text-stone-600 dark:text-stone-400 transform transition duration-300 hover:scale-110 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none">
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15v-7h2v7h-2zm0-9V7h2v1h-2z"/></svg>
        </button>
        <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-stone-700 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">Volume Control</span>
      </div>
    </div>
  </div>
</div>

Componente Notifiche

Un componente di notifiche semplice e reattivo con supporto per la modalità oscura, progettato in uno stile Skeuomorphic con una combinazione di colori in scala di grigi. Ideale per un portfolio per mostrare competenze di progettazione minime.

Aperto Anteprima

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden transform duration-300 hover:scale-105">
    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 flex items-center justify-between">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Notifications</h3>
      <span class="text-sm text-gray-500 dark:text-gray-400">3 New</span>
    </div>
    <div class="p-4 space-y-4">

      <!-- Notification Item 1 -->
      <div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
        <img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">John Doe commented on your post.</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
        </div>
      </div>

      <!-- Notification Item 2 -->
      <div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
        <img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Jane Smith liked your photo.</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p>
        </div>
      </div>

      <!-- Notification Item 3 -->
      <div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
        <img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">You have a new message from Bob Johnson.</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
        </div>
      </div>

    </div>
    <div class="px-6 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-right">
      <a href="#" class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transform duration-200 hover:underline">View All Notifications</a>
    </div>
  </div>
</div>

Componente della galleria dei prodotti

Un componente responsive della galleria prodotti con un'estetica Material Design, caratterizzato da un layout basato su griglia ed elementi interattivi adatti per mostrare prodotti o un portfolio. Include il supporto per la modalità oscura e utilizza una combinazione di colori analoga.

Aperto Anteprima

                <div class="container mx-auto p-4"">
  <!-- Product Grid -->
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
      <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover"">
      <div class="p-4"">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between mt-3"">
          <span class="text-xl font-bold text-gray-900 dark:text-white"">$49.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
      <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover"">
      <div class="p-4"">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between mt-3"">
          <span class="text-xl font-bold text-gray-900 dark:text-white"">$29.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
      <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover"">
      <div class="p-4"">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between mt-3"">
          <span class="text-xl font-bold text-gray-900 dark:text-white"">$79.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"">
      <img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover"">
      <div class="p-4"">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 4</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between mt-3"">
          <span class="text-xl font-bold text-gray-900 dark:text-white"">$19.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 146 147 148 149 150 ... 335