Cerca componenti

Categorie

Tutti i componenti

Sfoglia tutti i componenti CSS di Tailwind disponibili

Componente del menu dell'hamburger

Un componente di menu per hamburger complesso, reattivo e vivace con microinterazioni per l'e-commerce, con una navigazione a scorrimento, collegamenti alle categorie, una barra di ricerca e icone dei social media. Supporta la modalità oscura e utilizza Lorem Picsum per le immagini.

Aperto Anteprima

                <div class="relative">
  <input type="checkbox" id="menu-toggle" class="hidden peer" />
  <label for="menu-toggle" class="block cursor-pointer p-4 md:hidden focus:outline-none">
    <div class="w-6 h-1 bg-fuchsia-500 mb-1 transition-all duration-300 peer-checked:rotate-45 peer-checked:translate-y-2"></div>
    <div class="w-6 h-1 bg-fuchsia-500 mb-1 transition-all duration-300 peer-checked:opacity-0"></div>
    <div class="w-6 h-1 bg-fuchsia-500 transition-all duration-300 peer-checked:-rotate-45 peer-checked:-translate-y-2"></div>
  </label>

  <div class="fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-fuchsia-600 to-purple-700 text-white p-5 shadow-lg overflow-auto z-50 transform -translate-x-full peer-checked:translate-x-0 transition-transform duration-300 ease-in-out dark:from-gray-800 dark:to-gray-900 dark:text-gray-100 md:relative md:w-auto md:h-auto md:bg-none md:shadow-none md:translate-x-0 md:flex md:flex-col md:overflow-visible">
    <div class="mb-8 md:hidden">
      <img src="https://www.picsum.photos/100/100" alt="Store Logo" class="rounded-full mx-auto mb-3" />
      <p class="text-center text-lg font-bold">E-Shop</p>
    </div>

    <nav class="md:flex md:flex-col md:space-y-2">
      <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Home</a>
      <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Shop All</a>
      <div class="relative group">
        <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Categories</a>
        <div class="ml-5 text-sm absolute left-full top-0 w-48 bg-fuchsia-800 p-3 rounded-lg shadow-xl opacity-0 group-hover:opacity-100 group-hover:translate-x-2 transition-all duration-300 invisible group-hover:visible dark:bg-gray-700">
          <a href="#" class="block py-1 px-2 hover:bg-fuchsia-700 rounded-md dark:hover:bg-gray-600">Electronics</a>
          <a href="#" class="block py-1 px-2 hover:bg-fuchsia-700 rounded-md dark:hover:bg-gray-600">Apparel</a>
          <a href="#" class="block py-1 px-2 hover:bg-fuchsia-700 rounded-md dark:hover:bg-gray-600">Home Goods</a>
        </div>
      </div>
      <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Deals</a>
      <a href="#" class="block py-2.5 px-4 transition duration-300 hover:bg-fuchsia-700 hover:scale-105 rounded-lg dark:hover:bg-gray-700">Contact</a>
    </nav>

    <div class="mt-8 md:mt-4">
      <input type="text" placeholder="Search..." class="w-full p-2 rounded-lg bg-fuchsia-700 bg-opacity-70 text-white placeholder-fuchsia-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-300 dark:bg-gray-700 dark:placeholder-gray-400" />
    </div>

    <div class="mt-8 pt-8 border-t border-fuchsia-500 border-opacity-50 text-center md:mt-4 md:pt-4 md:border-none">
      <p class="text-sm mb-4">Follow Us</p>
      <div class="flex justify-center space-x-4">
        <a href="#" class="text-fuchsia-200 hover:text-white transition duration-300"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="text-fuchsia-200 hover:text-white transition duration-300"><i class="fab fa-twitter"></i></a>
        <a href="#" class="text-fuchsia-200 hover:text-white transition duration-300"><i class="fab fa-instagram"></i></a>
      </div>
    </div>
  </div>
</div>

360DegreeViewerComponent

Un semplice componente per visualizzatori a 360 gradi con un design brutalista, colori complementari e supporto per la modalità oscura. Utilizza solo HTML e Tailwind CSS.

Aperto Anteprima

                <div class="dark:bg-stone-900 bg-amber-50 relative h-screen flex flex-col items-center justify-center font-mono">
  
  <!-- Brutalist Border -->
  <div class="absolute inset-0 border-8 border-stone-950 dark:border-amber-50"></div>

  <div class="relative z-10 p-8 md:p-12 lg:p-16 bg-fuchsia-700 dark:bg-teal-700 text-amber-50 dark:text-stone-900 
                      border-4 border-stone-950 dark:border-amber-50 
                      shadow-[8px_8px_0_0_#1c1917] dark:shadow-[8px_8px_0_0_#fcd34d]">
    
    <h1 class="text-4xl md:text-5xl lg:text-6xl 
               font-extrabold mb-6 
               uppercase 
               border-b-4 border-amber-50 dark:border-stone-900 
               pb-2">
      360° Viewer
    </h1>
    
    <div class="relative w-full aspect-video 
                bg-stone-950 dark:bg-amber-50 
                border-4 border-stone-950 dark:border-amber-50 
                overflow-hidden
                mb-6">
      <!-- Placeholder for 360 image - in a real scenario, this would be a JS-powered viewer -->
      <img src="https://picsum.photos/seed/360view/800/450" 
           alt="360 degree view placeholder" 
           class="w-full h-full object-cover opacity-70">
      <div class="absolute inset-0 flex items-center justify-center">
        <p class="text-amber-50 dark:text-stone-900 text-xl md:text-2xl lg:text-3xl font-bold detection-sm:hidden">
          Content Placeholder
        </p>
      </div>
    </div>
    
    <p class="text-lg md:text-xl leading-relaxed mb-6">
      Explore this object from every angle. 
      This brutalist design emphasizes raw functionality and stark contrasts. 
      A complementary color scheme of deep fuchsia and teal (or amber and dark stone in dark mode) enhances the visual tension.
    </p>
    
    <div class="flex justify-between items-center">
      <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" 
             alt="Author Avatar" 
             class="w-12 h-12 md:w-16 md:h-16 rounded-full 
                    border-4 border-stone-950 dark:border-amber-50 
                    shadow-[4px_4px_0_0_#1c1917] dark:shadow-[4px_4px_0_0_#fcd34d]">
        <span class="text-xl font-bold">J. Doe</span>
      </div>
      <a href="#" class="inline-block px-6 py-3 
                           bg-stone-950 dark:bg-amber-50 
                           text-amber-50 dark:text-stone-900 
                           uppercase font-bold 
                           border-4 border-stone-950 dark:border-amber-50 
                           shadow-[6px_6px_0_0_#8B0000] dark:shadow-[6px_6px_0_0_#2F4F4F]
                           hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all duration-200">
        Learn More
      </a>
    </div>

  </div>
</div>

Componente Casella di ricerca

Un componente della casella di ricerca complessa in stile Glassmorphism con combinazione di colori analoga, adatto per un portfolio, con design reattivo e supporto per temi scuri utilizzando solo HTML e Tailwind CSS.

Aperto Anteprima

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4"><div class="relative w-full max-w-2xl bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-2xl shadow-2xl p-6 border border-opacity-30 border-white dark:border-opacity-30 dark:border-gray-700"><div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-blue-500 dark:from-purple-700 dark:to-blue-900 opacity-20 rounded-2xl"></div><div class="relative z-10 flex items-center space-x-4"><svg class="h-8 w-8 text-gray-800 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg><input type="text" placeholder="Search your projects, skills, or articles..." class="flex-1 p-3 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 rounded-xl text-gray-900 dark:text-white placeholder-gray-700 dark:placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-300 dark:focus:ring-purple-600 transition duration-300 ease-in-out border border-gray-300 dark:border-gray-600"></div><div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4"><div class="bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 p-4 rounded-xl space-y-2 border border-gray-200 dark:border-gray-600"><h3 class="font-semibold text-gray-800 dark:text-gray-100">Recent Searches</h3><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">#WebDesign</span><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">#FrontEndDev</span><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">#UIUX</span></div><div class="bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 p-4 rounded-xl space-y-2 border border-gray-200 dark:border-gray-600"><h3 class="font-semibold text-gray-800 dark:text-gray-100">Popular Categories</h3><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">Development</span><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">Design</span><span class="inline-block bg-white bg-opacity-40 dark:bg-gray-600 dark:bg-opacity-40 text-gray-700 dark:text-gray-200 text-sm px-3 py-1 rounded-full mr-2 mb-2">Marketing</span></div></div><div class="mt-6 text-center"><button class="px-6 py-3 bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold rounded-full shadow-md transition duration-300 ease-in-out transform hover:-translate-y-1">Advanced Search</button></div></div></div>

Componente del carrello della spesa

Un componente del carrello della spesa semplice e reattivo con supporto per il tema scuro, con uno stile che utilizza Tailwind CSS seguendo i principi del Material Design con una combinazione di colori in scala di grigi. Utilizza picsum.photos per le immagini dei prodotti.

Aperto Anteprima

                <div class="container mx-auto p-4">
  <div class="dark:bg-gray-800 bg-white shadow-md rounded-lg p-6">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Your Shopping Cart</h1>

    <!-- Cart Item 1 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-24 h-24 object-cover rounded-lg mr-4" src="https://picsum.photos/seed/product1/200/200" alt="Product Image">
      <div class="flex-grow">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h2>
        <p class="text-gray-600 dark:text-gray-400">Category: Electronics</p>
        <p class="text-gray-800 dark:text-white font-bold">$299.99</p>
      </div>
      <div class="text-gray-600 dark:text-gray-400">
        Quantity: 1
      </div>
    </div>

    <!-- Cart Item 2 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-24 h-24 object-cover rounded-lg mr-4" src="https://picsum.photos/seed/product2/200/200" alt="Product Image">
      <div class="flex-grow">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h2>
        <p class="text-gray-600 dark:text-gray-400">Category: Books</p>
        <p class="text-gray-800 dark:text-white font-bold">$19.50</p>
      </div>
      <div class="text-gray-600 dark:text-gray-400">
        Quantity: 2
      </div>
    </div>

    <!-- Cart Summary -->
    <div class="flex justify-between items-center mt-6">
      <span class="text-xl font-semibold text-gray-800 dark:text-white">Total:</span>
      <span class="text-xl font-bold text-gray-800 dark:text-white">$339.99</span>
    </div>

    <div class="mt-6 flex justify-end">
      <button class="px-6 py-3 bg-gray-800 text-white dark:bg-gray-200 dark:text-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">
        Checkout
      </button>
    </div>
  </div>
</div>

Componente del sistema di classificazione

Un complesso sistema di valutazione a tema retrò per i social media, caratterizzato da una combinazione di colori monocromatica. È completamente reattivo e supporta una modalità oscura. Questo componente utilizza solo HTML e Tailwind CSS, senza JavaScript.

Aperto Anteprima

                <div class="p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-mono">

  <!-- Retro Rating System Component -->
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
    <div class="mb-6 text-center">
      <h2 class="text-3xl font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wider">Rate This Post</h2>
      <p class="text-gray-500 dark:text-gray-400 text-sm">Share your thoughts with the community!</p>
    </div>

    <!-- User Avatar and Post Info -->
    <div class="flex items-center mb-6">
      <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-4" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <p class="text-lg font-semibold text-gray-800 dark:text-gray-100">Galactic Traveler</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Posted 2 hours ago</p>
      </div>
    </div>

    <!-- Rating Stars -->
    <div class="flex justify-center items-center mb-6">
      <input type="radio" id="star5" name="rating" value="5" class="hidden" />
      <label for="star5" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
      <input type="radio" id="star4" name="rating" value="4" class="hidden" />
      <label for="star4" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
      <input type="radio" id="star3" name="rating" value="3" class="hidden" />
      <label for="star3" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
      <input type="radio" id="star2" name="rating" value="2" class="hidden" />
      <label for="star2" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
      <input type="radio" id="star1" name="rating" value="1" class="hidden" />
      <label for="star1" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">&starf;</label>
    </div>

    <!-- Textarea for comments -->
    <div class="mb-6">
      <textarea class="w-full p-4 rounded-md bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-all duration-200 resize-y" rows="4" placeholder="Leave your comment here..."></textarea>
    </div>

    <!-- Buttons -->
    <div class="flex justify-between space-x-4">
      <button class="flex-1 py-3 px-6 rounded-md bg-gray-700 hover:bg-gray-800 text-white dark:bg-gray-600 dark:hover:bg-gray-700 transition-colors duration-200 uppercase font-semibold tracking-wide shadow-md">
        Submit Rating
      </button>
      <button class="flex-1 py-3 px-6 rounded-md bg-gray-300 hover:bg-gray-400 text-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200 transition-colors duration-200 uppercase font-semibold tracking-wide shadow-md">
        Cancel
      </button>
    </div>

    <!-- Popular Reviews Section (Responsive) -->
    <div class="mt-8 pt-6 border-t border-gray-300 dark:border-gray-700">
      <h3 class="text-2xl font-bold text-gray-700 dark:text-gray-200 mb-4 text-center">Popular Reviews</h3>
      <div class="grid gap-4 md:grid-cols-2">
        <!-- Review Card 1 -->
        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Pixel Pioneer</p>
          </div>
          <p class="text-yellow-500 dark:text-yellow-400 text-lg mb-2">★★★★★</p>
          <p class="text-gray-600 dark:text-gray-300 text-sm">"Absolutely loved this! Brings back so many memories of old forums."</p>
        </div>
        <!-- Review Card 2 -->
        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Data Diver</p>
          </div>
          <p class="text-yellow-500 dark:text-yellow-400 text-lg mb-2">★★★★☆</p>
          <p class="text-gray-600 dark:text-gray-300 text-sm">"Great design, very nostalgic. A bit slow on my old phone though."</p>
        </div>
      </div>
       <div class="mt-4 text-center">
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:underline text-sm">View all reviews</a>
      </div>
    </div>

  </div>

</div>

Componente della descrizione comando

Un componente di descrizione comando di Material Design reattivo con combinazione di colori monocromatici per l'e-commerce, con supporto per la modalità scura. Niente JavaScript, HTML e Tailwind CSS.

Aperto Anteprima

                <div class="relative flex items-center justify-center bg-gray-100 dark:bg-gray-900 min-h-screen p-8">

  <!-- Product Card (Example to show tooltip in context) -->
  <div class="group relative w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Product Image">
    <div class="p-6">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Stylish Headphones</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Immerse yourself in rich, clear sound with these premium headphones.</p>
      <div class="flex items-center justify-between">
        <span class="text-2xl font-bold text-gray-900 dark:text-gray-50">$149.99</span>
        
        <!-- Tooltip Trigger (e.g., Add to Cart Button) -->
        <button class="relative bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-medium py-2 px-4 rounded-full transition-colors duration-300 group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          Add to Cart

          <!-- Tooltip Content -->
          <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max px-3 py-1.5 bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-900 text-sm rounded-md opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 pointer-events-none shadow-lg">
            Add item to your shopping cart
            <svg class="absolute top-full left-1/2 -translate-x-1/2 w-3 h-3 text-gray-800 dark:text-gray-100 transform rotate-180" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10 0L0 10h20L10 0z"/>
            </svg>
          </div>
        </button>
      </div>
    </div>
  </div>

  <!-- Another Tooltip Example (e.g., Info Icon) -->
  <div class="group relative ml-12">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-500 dark:text-gray-400 cursor-pointer transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-500" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2h1a1 1 0 001-1V9a1 1 0 00-1-1H9zm6 3a1 1 0 100 2h2a1 1 0 100-2h-2z" clip-rule="evenodd" />
    </svg>

    <!-- Tooltip Content -->
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max px-3 py-1.5 bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-900 text-sm rounded-md opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 pointer-events-none shadow-lg">
      More information about the product
      <svg class="absolute top-full left-1/2 -translate-x-1/2 w-3 h-3 text-gray-800 dark:text-gray-100 transform rotate-180" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 0L0 10h20L10 0z"/>
      </svg>
    </div>
  </div>

</div>

GlassmorphismModalComponent

Un componente modale in stile Glassmorphism con combinazione di colori analoga, complessità moderata, adatto per la visualizzazione di blog/contenuti. Presenta un design reattivo con supporto per il tema scuro utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="fixed inset-0 bg-gray-900 bg-opacity-70 flex justify-center items-center p-4 z-50 dark:bg-opacity-80"> <div class="relative bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl p-6 md:p-8 lg:p-10 max-w-2xl w-full m-4 border border-opacity-30 border-white dark:bg-gray-800 dark:bg-opacity-20 dark:border-gray-700 text-gray-900 dark:text-white transform transition-all scale-100 opacity-100"> <!-- Close Button --> <button class="absolute top-4 right-4 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 transition duration-300 ease-in-out 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="M6 18L18 6M6 6l12 12"></path> </svg> </button> <!-- Modal Header --> <div class="mb-6"> <h3 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2">The Wonders of Glassmorphism</h3> <p class="text-lg text-gray-800 dark:text-gray-200">Embrace the beauty of translucent design.</p> </div> <!-- Modal Content - Article Preview --> <div class="space-y-6 text-gray-800 dark:text-gray-200"> <img src="https://picsum.photos/600/350?random=1" alt="Abstract Glassmorphism Background" class="rounded-lg mb-4 shadow-md object-cover w-full h-auto"> <p class="leading-relaxed"> Glassmorphism is a design trend characterized by a frosted-glass effect, where backgrounds are blurred to create a sense of depth and translucency. This aesthetic often involves vibrant colors, light borders, and distinct layering, giving UI elements a sense of floating on the screen. It

Componente del modulo di registrazione

Un componente del modulo di registrazione reattivo con uno stile glassmorphism, una combinazione di colori del tono della terra e il supporto del tema scuro. Progettato per le piattaforme di social media, con un layout semplice ed elementi minimi. Utilizza Tailwind CSS per lo stile e include segnaposto di immagini di esempio.

Aperto Anteprima

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="relative p-8 rounded-lg shadow-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg w-full max-w-md border border-gray-200 dark:border-gray-700">
    <div class="absolute inset-0 -z-10 rounded-lg bg-gradient-to-br from-stone-300 to-stone-500 opacity-30 dark:from-stone-700 dark:to-stone-900"></div>
    
    <h2 class="text-3xl font-bold text-center text-stone-800 dark:text-stone-100 mb-6">Register</h2>
    
    <form>
      <div class="mb-4">
        <label for="username" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Username</label>
        <input type="text" id="username" name="username" placeholder="Enter your username" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
      </div>
      
      <div class="mb-4">
        <label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Email</label>
        <input type="email" id="email" name="email" placeholder="Enter your email" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
      </div>
      
      <div class="mb-6">
        <label for="password" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Password</label>
        <input type="password" id="password" name="password" placeholder="Enter your password" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
      </div>
      
      <button type="submit" class="w-full bg-stone-600 dark:bg-stone-700 text-white p-3 rounded-lg font-semibold hover:bg-stone-700 dark:hover:bg-stone-800 transition duration-300 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
        Register
      </button>
    </form>
    
    <p class="text-center text-stone-700 dark:text-stone-300 text-sm mt-6">
      Already have an account? <a href="#" class="text-stone-800 dark:text-stone-200 font-semibold hover:underline">Login here</a>
    </p>
  </div>
</div>

Componente Componenti sociali

Componenti sociali Componente con un design scheumorfico, combinazione di colori complementari e complessità moderata. È progettato per siti Web aziendali/aziendali, è reattivo e supporta temi scuri.

Aperto Anteprima

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center font-sans"><div class="bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 max-w-md w-full transform transition duration-500 hover:scale-105 group" style="box-shadow: 0 15px 30px rgba(0,0,0,0.2), inset 0 -5px 10px rgba(0,0,0,0.1), inset 0 5px 10px rgba(255,255,255,0.7);"> <div class="flex justify-center mb-6"><img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 group-hover:border-purple-500 transition duration-500" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" style="box-shadow: 0 0 15px rgba(0,0,0,0.2);"></div><h2 class="text-3xl font-extrabold text-gray-800 dark:text-white text-center mb-4 group-hover:text-purple-600 transition duration-500" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">John Doe</h2><p class="text-gray-600 dark:text-gray-300 text-center mb-8" style="text-shadow: 0.5px 0.5px 1px rgba(255,255,255,0.4);">Software Engineer at Acme Corp</p><div class="flex justify-around items-center mb-8"><div class="text-center"><p class="text-2xl font-bold text-blue-600 dark:text-blue-400" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">5.2K</p><p class="text-gray-500 dark:text-gray-400 text-sm">Followers</p></div><div class="border-l border-gray-300 dark:border-gray-600 h-10"></div><div class="text-center"><p class="text-2xl font-bold text-green-600 dark:text-green-400" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">1.8K</p><p class="text-gray-500 dark:text-gray-400 text-sm">Following</p></div><div class="border-l border-gray-300 dark:border-gray-600 h-10"></div><div class="text-center"><p class="text-2xl font-bold text-red-600 dark:text-red-400" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">250</p><p class="text-gray-500 dark:text-gray-400 text-sm">Posts</p></div></div><div class="flex flex-col space-y-4"><button class="bg-gradient-to-br from-purple-600 to-indigo-700 text-white py-3 px-6 rounded-xl text-lg font-semibold hover:from-purple-700 hover:to-indigo-800 transition duration-300 transform hover:-translate-y-1 shadow-lg dark:shadow-xl" style="box-shadow: inset 0 2px 5px rgba(255,255,255,0.3), inset 0 -2px 5px rgba(0,0,0,0.3), 0 5px 15px rgba(0,0,0,0.2);">Follow</button><button class="bg-gradient-to-br from-yellow-500 to-orange-600 text-white py-3 px-6 rounded-xl text-lg font-semibold hover:from-yellow-600 hover:to-orange-700 transition duration-300 transform hover:-translate-y-1 shadow-lg dark:shadow-xl" style="box-shadow: inset 0 2px 5px rgba(255,255,255,0.3), inset 0 -2px 5px rgba(0,0,0,0.3), 0 5px 15px rgba(0,0,0,0.2);">Message</button></div></div></div>

Componente Tag Cloud

Un componente Tag Cloud reattivo con stili di Material Design, una combinazione di colori complementari e una complessità moderata per l'e-commerce, con supporto per temi scuri.

Aperto Anteprima

                <div class="dark:bg-gray-900 bg-white p-6 rounded-lg shadow-md max-w-4xl mx-auto">
  <h2 class="text-2xl font-semibold mb-4 dark:text-white text-gray-800">Popular Tags</h2>
  <div class="flex flex-wrap gap-3">
    <!-- Tag Item 1 -->
    <a href="#" class="dark:bg-purple-700 dark:text-purple-100 bg-indigo-500 text-indigo-50 px-4 py-2 rounded-full hover:bg-indigo-600 dark:hover:bg-purple-800 transition duration-300 shadow-md text-sm">
      Electronics
    </a>
    <!-- Tag Item 2 -->
    <a href="#" class="dark:bg-teal-700 dark:text-teal-100 bg-green-500 text-green-50 px-4 py-2 rounded-full hover:bg-green-600 dark:hover:bg-teal-800 transition duration-300 shadow-md text-sm">
      Apparel
    </a>
    <!-- Tag Item 3 -->
    <a href="#" class="dark:bg-orange-700 dark:text-orange-100 bg-red-500 text-red-50 px-4 py-2 rounded-full hover:bg-red-600 dark:hover:bg-orange-800 transition duration-300 shadow-md text-sm">
      Home Goods
    </a>
    <!-- Tag Item 4 -->
    <a href="#" class="dark:bg-blue-700 dark:text-blue-100 bg-blue-500 text-blue-50 px-4 py-2 rounded-full hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-300 shadow-md text-sm">
      Books
    </a>
    <!-- Tag Item 5 -->
    <a href="#" class="dark:bg-red-700 dark:text-red-100 bg-pink-500 text-pink-50 px-4 py-2 rounded-full hover:bg-pink-600 dark:hover:bg-red-800 transition duration-300 shadow-md text-sm">
      Sporting Goods
    </a>
    <!-- Tag Item 6 -->
    <a href="#" class="dark:bg-lime-700 dark:text-lime-100 bg-yellow-500 text-yellow-50 px-4 py-2 rounded-full hover:bg-yellow-600 dark:hover:bg-lime-800 transition duration-300 shadow-md text-sm">
      Outdoors
    </a>
    <!-- Tag Item 7 -->
    <a href="#" class="dark:bg-cyan-700 dark:text-cyan-100 bg-teal-500 text-teal-50 px-4 py-2 rounded-full hover:bg-teal-600 dark:hover:bg-cyan-800 transition duration-300 shadow-md text-sm">
      Kitchen
    </a>
    <!-- Tag Item 8 -->
    <a href="#" class="dark:bg-fuchsia-700 dark:text-fuchsia-100 bg-purple-500 text-purple-50 px-4 py-2 rounded-full hover:bg-purple-600 dark:hover:bg-fuchsia-800 transition duration-300 shadow-md text-sm">
      Toys
    </a>
    <!-- Tag Item 9 -->
    <a href="#" class="dark:bg-emerald-700 dark:text-emerald-100 bg-green-600 text-green-50 px-4 py-2 rounded-full hover:bg-green-700 dark:hover:bg-emerald-800 transition duration-300 shadow-md text-sm">
      Gaming
    </a>
    <!-- Tag Item 10 -->
    <a href="#" class="dark:bg-rose-700 dark:text-rose-100 bg-red-600 text-red-50 px-4 py-2 rounded-full hover:bg-red-700 dark:hover:bg-rose-800 transition duration-300 shadow-md text-sm">
      Automotive
    </a>
  </div>
</div>

1 ... 149 150 151 152 153 ... 335