Cerca componenti

Categorie

Tutti i componenti

Sfoglia tutti i componenti CSS di Tailwind disponibili

Componente Lightbox immagine

Un componente lightbox per immagini reattive con supporto per la modalità scura. Questo componente visualizza una galleria di immagini e facendo clic su un'immagine si apre una finestra modale a schermo intero con frecce di navigazione per sfogliare le immagini. È dotato di un pulsante di chiusura e utilizza colori vivaci per evidenziare gli elementi interattivi. Il design è studiato su misura per un contesto aziendale/aziendale, garantendo un'esperienza utente professionale ma coinvolgente.

Aperto Anteprima

                <div class="bg-gray-900 min-h-screen p-8">
  <h1 class="text-4xl font-bold text-white mb-8 text-center">Our Work</h1>

  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
    <!-- Image 1 -->
    <div class="group cursor-pointer relative" onclick="openLightbox('img1')">
      <img id="img1-thumb" src="https://picsum.photos/seed/picsum1/400/300" alt="Image 1" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 group-hover:scale-105"/>
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-lg font-semibold">View Project</p>
      </div>
    </div>

    <!-- Image 2 -->
    <div class="group cursor-pointer relative" onclick="openLightbox('img2')">
      <img id="img2-thumb" src="https://picsum.photos/seed/picsum2/400/300" alt="Image 2" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 group-hover:scale-105"/>
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-lg font-semibold">View Project</p>
      </div>
    </div>

    <!-- Image 3 -->
    <div class="group cursor-pointer relative" onclick="openLightbox('img3')">
      <img id="img3-thumb" src="https://picsum.photos/seed/picsum3/400/300" alt="Image 3" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 group-hover:scale-105"/>
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-lg font-semibold">View Project</p>
      </div>
    </div>

    <!-- Image 4 -->
    <div class="group cursor-pointer relative" onclick="openLightbox('img4')">
      <img id="img4-thumb" src="https://picsum.photos/seed/picsum4/400/300" alt="Image 4" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 group-hover:scale-105"/>
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-lg font-semibold">View Project</p>
      </div>
    </div>

    <!-- Image 5 -->
    <div class="group cursor-pointer relative" onclick="openLightbox('img5')">
      <img id="img5-thumb" src="https://picsum.photos/seed/picsum5/400/300" alt="Image 5" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 group-hover:scale-105"/>
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-lg font-semibold">View Project</p>
      </div>
    </div>

    <!-- Image 6 -->
    <div class="group cursor-pointer relative" onclick="openLightbox('img6')">
      <img id="img6-thumb" src="https://picsum.photos/seed/picsum6/400/300" alt="Image 6" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 group-hover:scale-105"/>
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-lg font-semibold">View Project</p>
      </div>
    </div>
  </div>

  <!-- Lightbox Modal -->
  <div id="lightbox-modal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden">
    <div class="relative w-11/12 max-w-4xl max-h-[90vh] flex flex-col">
      <button class="absolute top-4 right-4 text-white text-3xl font-bold p-2 hover:text-red-500 transition-colors duration-300 z-10" onclick="closeLightbox()">&times;</button>
      <img id="lightbox-img" src="" alt="Lightbox Image" class="max-w-full max-h-full object-contain rounded-lg shadow-xl"/>
      <div class="absolute bottom-4 left-0 right-0 flex justify-between px-4">
        <button class="bg-purple-600 text-white p-3 rounded-full hover:bg-purple-700 transition-colors duration-300 shadow-lg" onclick="changeImage(-1)">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
          </svg>
        </button>
        <button class="bg-purple-600 text-white p-3 rounded-full hover:bg-purple-700 transition-colors duration-300 shadow-lg" onclick="changeImage(1)">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </button>
      </div>
      <p id="lightbox-caption" class="text-white text-center mt-4 text-lg"></p>
    </div>
  </div>
</div>

<script>
  const images = [
    { id: 'img1', src: 'https://picsum.photos/seed/picsum1/800/600', caption: 'Project Alpha - Innovative Solutions' },
    { id: 'img2', src: 'https://picsum.photos/seed/picsum2/800/600', caption: 'Project Beta - Strategic Partnerships' },
    { id: 'img3', src: 'https://picsum.photos/seed/picsum3/800/600', caption: 'Project Gamma - Creative Designs' },
    { id: 'img4', src: 'https://picsum.photos/seed/picsum4/800/600', caption: 'Project Delta - Digital Transformation' },
    { id: 'img5', src: 'https://picsum.photos/seed/picsum5/800/600', caption: 'Project Epsilon - Global Reach' },
    { id: 'img6', src: 'https://picsum.photos/seed/picsum6/800/600', caption: 'Project Zeta - Future Technologies' }
  ];
  let currentIndex = 0;

  function openLightbox(imageId) {
    const index = images.findIndex(img => img.id === imageId);
    if (index !== -1) {
      currentIndex = index;
      updateLightboxContent();
      document.getElementById('lightbox-modal').classList.remove('hidden');
    }
  }

  function closeLightbox() {
    document.getElementById('lightbox-modal').classList.add('hidden');
  }

  function changeImage(direction) {
    currentIndex = (currentIndex + direction + images.length) % images.length;
    updateLightboxContent();
  }

  function updateLightboxContent() {
    const currentImage = images[currentIndex];
    document.getElementById('lightbox-img').src = currentImage.src;
    document.getElementById('lightbox-caption').textContent = currentImage.caption;
  }

  // Close lightbox on escape key
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
      closeLightbox();
    }
  });
</script>

Componente Componenti sociali

Un componente per social media in stile retrò/vintage caratterizzato da una ricca interfaccia con più elementi interattivi, progettato con colori complementari e che supporta la modalità oscura.

Aperto Anteprima

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h1 class="text-3xl font-bold text-center text-blue-800 dark:text-blue-300 mb-4">Retro Social Media</h1>
    <div class="bg-white dark:bg-gray-700 rounded-lg p-4">
        <div class="flex mb-4">
            <img class="w-16 h-16 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
            <div>
                <h2 class="text-lg font-semibold text-blue-700 dark:text-blue-200">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
            </div>
        </div>
        <p class="text-gray-800 dark:text-gray-200 mb-4">Feeling nostalgic about the good old days of the 80s and 90s. What’s your favorite memory?</p>
        <img class="w-full h-auto rounded-lg mb-4" src="https://picsum.photos/400/200?random=1" alt="Retro Image">
        <div class="flex justify-between">
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-200">Like</button>
            <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition duration-200">Comment</button>
            <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition duration-200">Share</button>
        </div>
    </div>
    <div class="margin-top: 8px flex justify-between items-center text-gray-600 dark:text-gray-300 text-sm">
        <span class="cursor-pointer hover:underline">12 Likes</span>
        <span class="cursor-pointer hover:underline">3 Comments</span>
    </div>
</div>

Componente di accesso/registrazione

Un complesso componente di accesso/registrazione progettato con uno stile scheumorfico, utilizzando una combinazione di colori in scala di grigi per un'interfaccia dashboard. Include vari elementi interattivi ed è reattivo con il supporto del tema scuro.

Aperto Anteprima

                <div class="min-h-screen bg-white dark:bg-gray-800 flex items-center justify-center">
    <div class="bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center">Login / Signup</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="username">Username</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-100 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Enter your username">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="email">Email</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-100 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="Enter your email">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="password">Password</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-100 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="Enter your password">
            </div>
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center">
                    <input type="checkbox" class="mr-2 leading-tight" id="remember">
                    <label class="text-gray-600 dark:text-gray-300" for="remember">Remember me</label>
                </div>
                <a class="inline-block align-baseline font-bold text-sm text-gray-600 dark:text-gray-300 hover:text-gray-800" href="#">Forgot Password?</a>
            </div>
            <div class="flex flex-col">
                <button class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mb-4" type="submit">Login</button>
                <button class="bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Signup</button>
            </div>
        </form>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-300">Or sign in with</p>
            <div class="flex justify-center space-x-4 mt-2">
                <img class="h-8 w-8 rounded-full" src="https://picsum.photos/seed/pic1/40/40" alt="Avatar">
                <img class="h-8 w-8 rounded-full" src="https://picsum.photos/seed/pic2/40/40" alt="Avatar">
                <img class="h-8 w-8 rounded-full" src="https://picsum.photos/seed/pic3/40/40" alt="Avatar">
            </div>
        </div>
    </div>
</div>

Componente Badge

Un componente di badge a tema retrò con una combinazione di colori in scala di grigi, adatto per un blog o un sito di contenuti. È dotato di più elementi interattivi e piena reattività, con supporto per la modalità oscura. Il design evita JavaScript, basandosi esclusivamente su HTML e Tailwind CSS.

Aperto Anteprima

                <div class="p-8 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-8 text-center">Featured Badges</h1>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Badge 1: New Post -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-black text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            NEW POST
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">The Golden Age of Pixels</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Explore how pixel art defined an era and continues to inspire.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <svg class="w-4 h-4 mr-1" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span>2 days ago</span>
          </div>
        </div>
        <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform rotate-12">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">RETRO</span>
        </div>
      </div>

      <!-- Badge 2: Editor's Pick -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-gray-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            EDITOR'S PICK
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Vintage Tech Revival</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Diving deep into the resurgence of classic gadgets.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <svg class="w-4 h-4 mr-1" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span>1 week ago</span>
          </div>
        </div>
        <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform -rotate-12">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">CLASSIC</span>
        </div>
      </div>

      <!-- Badge 3: Trending Topic -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-gray-500 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            TRENDING
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">The Future is Analog</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Why analog experiences are making a comeback in a digital world.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <svg class="w-4 h-4 mr-1" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span>3 days ago</span>
          </div>
        </div>
         <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform rotate-6">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">POPULAR</span>
        </div>
      </div>

      <!-- Badge 4: Deep Dive -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-blue-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            DEEP DIVE
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Lost Media Found</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Uncovering the mysteries of media long thought to be gone forever.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <svg class="w-4 h-4 mr-1" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span>1 month ago</span>
          </div>
        </div>
        <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform -rotate-8">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">ARCHIVE</span>
        </div>
      </div>

      <!-- Badge 5: Community Spotlight -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-purple-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            COMMUNITY
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Our Favorite Fan Theories</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Exploring the most imaginative theories from our dedicated readers.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <svg class="w-4 h-4 mr-1" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span>2 weeks ago</span>
          </div>
        </div>
        <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform rotate-15">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">FAN</span>
        </div>
      </div>

      <!-- Badge 6: Retrospective -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
        <div class="p-6">
          <span class="inline-block bg-red-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
            RETROSPECTIVE
          </span>
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Gaming Consoles: A Look Back</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Tracing the evolution of gaming from 8-bit to beyond.</p>
          <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
            <svg class="w-4 h-4 mr-1" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span>3 weeks ago</span>
          </div>
        </div>
        <div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform -rotate-9">
          <span class="text-xs font-bold text-gray-700 dark:text-gray-300">OLD</span>
        </div>
      </div>

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

Componente Mappe di calore

Un componente di mappa di calore reattivo per i social media con design Skeuomorphism, colori complementari e supporto per la modalità oscura utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="p-4 md:p-8 dark:bg-gray-900 min-h-screen">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border-4 border-gray-200 dark:border-gray-700 p-6 md:p-8">
    <h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 text-center drop-shadow-md">
      Social Media Engagement Heat Map
    </h2>
    <div class="grid grid-cols-7 gap-2 md:gap-4 mb-4 text-sm font-semibold text-gray-600 dark:text-gray-300 text-center">
      <div>Mon</div>
      <div>Tue</div>
      <div>Wed</div>
      <div>Thu</div>
      <div>Fri</div>
      <div>Sat</div>
      <div>Sun</div>
    </div>
    <div class="grid grid-cols-7 gap-2 md:gap-4">
      <!-- Example Heat Map Cells (adjust as needed) -->
      
      <!-- Week 1 -->
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-green-300 to-green-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-green-600 dark:to-green-800 border-2 border-green-600 dark:border-green-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">15</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-yellow-300 to-yellow-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-yellow-600 dark:to-yellow-800 border-2 border-yellow-600 dark:border-yellow-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">25</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-orange-300 to-orange-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-orange-600 dark:to-orange-800 border-2 border-orange-600 dark:border-orange-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">35</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-red-300 to-red-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-red-600 dark:to-red-800 border-2 border-red-600 dark:border-red-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">45</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-purple-300 to-purple-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-purple-600 dark:to-purple-800 border-2 border-purple-600 dark:border-purple-300 " style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">55</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-blue-300 to-blue-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-blue-600 dark:to-blue-800 border-2 border-blue-600 dark:border-blue-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">65</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-indigo-300 to-indigo-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-indigo-600 dark:to-indigo-800 border-2 border-indigo-600 dark:border-indigo-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">75</span>
      </div>

      <!-- Week 2 - More cells as needed -->
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-green-300 to-green-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-green-600 dark:to-green-800 border-2 border-green-600 dark:border-green-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">20</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-blue-300 to-blue-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-blue-600 dark:to-blue-800 border-2 border-blue-600 dark:border-blue-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">30</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-red-300 to-red-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-red-600 dark:to-red-800 border-2 border-red-600 dark:border-red-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">50</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-yellow-300 to-yellow-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-yellow-600 dark:to-yellow-800 border-2 border-yellow-600 dark:border-yellow-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">40</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-indigo-300 to-indigo-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-indigo-600 dark:to-indigo-800 border-2 border-indigo-600 dark:border-indigo-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">60</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-orange-300 to-orange-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-orange-600 dark:to-orange-800 border-2 border-orange-600 dark:border-orange-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">70</span>
      </div>
      <div class="relative flex items-center justify-center h-12 md:h-16 rounded-lg bg-gradient-to-br from-purple-300 to-purple-500 text-white shadow-inner transform transition duration-300 hover:scale-105 active:scale-95 cursor-pointer dark:from-purple-600 dark:to-purple-800 border-2 border-purple-600 dark:border-purple-300" style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);">
        <span class="text-xs md:text-sm font-bold">80</span>
      </div>
    </div>
    
    <div class="mt-8 text-center">
      <p class="text-gray-700 dark:text-gray-300 text-sm md:text-base">Engagement levels tend to be higher on <span class="font-bold text-red-500 dark:text-red-400">Thursdays</span> and <span class="font-bold text-blue-500 dark:text-blue-400">Sundays</span>.</p>
    </div>

  </div>
</div>

Componente di reimpostazione della password

Un semplice componente per la reimpostazione della password progettato utilizzando i principi di Material Design con una combinazione di colori in scala di grigi. È reattivo e supporta la modalità oscura.

Aperto Anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200">Reset Password</h2>
        <p class="mt-2 text-center text-gray-600 dark:text-gray-400">Enter your email address and we will send you a link to reset your password.</p>
        <form class="mt-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
                <input type="email" required class="mt-1 block w-full appearance-none rounded-md border border-gray-300 bg-gray-50 dark:bg-gray-700 dark:border-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400" placeholder="you@example.com" />
            </div>
            <button type="submit" class="mt-6 w-full py-2 px-4 bg-gray-800 text-white font-semibold rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Send Reset Link</button>
        </form>
        <div class="mt-4 text-center">
            <a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">Back to Login</a>
        </div>
    </div>
</div>

Componente Filtri

Un componente di filtro per social media a tema retrò/vintage con toni della terra, layout semplice, design reattivo e supporto per la modalità oscura.

Aperto Anteprima

                <div class="container mx-auto p-4 md:p-8 font-serif">

  <!-- Retro/Vintage Filters Section -->
  <div class="bg-amber-100 dark:bg-amber-900 rounded-lg shadow-lg p-6 mb-8 border-4 border-amber-800 dark:border-amber-200 transform -rotate-2">
    <h2 class="text-2xl md:text-3xl font-bold text-amber-800 dark:text-amber-200 mb-4 text-center uppercase tracking-wide">Vintage Filters</h2>

    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
      <!-- Filter 1 -->
      <div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/vintage1/200/200" alt="Vintage Filter 1" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
        <p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Sepia</p>
      </div>

      <!-- Filter 2 -->
      <div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/vintage2/200/200" alt="Vintage Filter 2" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
        <p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Grayscale</p>
      </div>

      <!-- Filter 3 -->
      <div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/vintage3/200/200" alt="Vintage Filter 3" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
        <p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Lomo</p>
      </div>

      <!-- Filter 4 -->
      <div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/vintage4/200/200" alt="Vintage Filter 4" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
        <p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Noir</p>
      </div>

      <!-- Filter 5 -->
      <div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/vintage5/200/200" alt="Vintage Filter 5" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
        <p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Retro</p>
      </div>
    </div>
  </div>

  <!-- Simple Adjustments Section -->
  <div class="bg-lime-100 dark:bg-lime-900 rounded-lg shadow-lg p-6 border-4 border-lime-800 dark:border-lime-200 transform rotate-1">
    <h2 class="text-2xl md:text-3xl font-bold text-lime-800 dark:text-lime-200 mb-4 text-center uppercase tracking-wide">Basic Adjustments</h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <!-- Adjustment 1 -->
      <div class="flex items-center space-x-4 bg-lime-200 dark:bg-lime-800 p-3 rounded-md shadow-sm">
        <label for="brightness" class="text-lime-800 dark:text-lime-200 font-semibold text-sm md:text-base">Brightness:</label>
        <input type="range" id="brightness" min="0" max="200" value="100" class="flex-grow accent-lime-600 pointer-events-none">
      </div>

      <!-- Adjustment 2 -->
      <div class="flex items-center space-x-4 bg-lime-200 dark:bg-lime-800 p-3 rounded-md shadow-sm">
        <label for="contrast" class="text-lime-800 dark:text-lime-200 font-semibold text-sm md:text-base">Contrast:</label>
        <input type="range" id="contrast" min="0" max="200" value="100" class="flex-grow accent-lime-600 pointer-events-none">
      </div>
    </div>
  </div>

</div>

Componente Componenti di visualizzazione dei dati

Un componente di visualizzazione dei dati reattivo con più elementi interattivi, progettato per un blog/sito Web di contenuti. Presenta un design minimalista/piatto, una combinazione di colori complementari e include il supporto per il tema scuro.

Aperto Anteprima

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-8">Data Visualization Dashboard</h1>

    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md flex items-center justify-between">
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Total Views</p>
          <p class="text-3xl font-semibold text-indigo-600 dark:text-indigo-400">15, apt. 234</p>
        </div>
        <svg class="h-10 w-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md flex items-center justify-between">
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">New Users</p>
          <p class="text-3xl font-semibold text-green-600 dark:text-green-400">2, average. 100</p>
        </div>
        <svg class="h-10 w-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a4 4 0 014-4h12.55V14a2 2 0 100-4v-3a1 1 0 00-1-1H9V7c-.642 0-1.246.311-1.614.811L4.363 11a3.001 3.001 0 00-.309 3.016l1.248 1.942M18 17h-7l-1.5-1.5"></path></svg>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md flex items-center justify-between">
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Bounce Rate</p>
          <p class="text-3xl font-semibold text-red-600 dark:text-red-400">32.5%</p>
        </div>
        <svg class="h-10 w-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md flex items-center justify-between">
        <div>
          <p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Avg. Session</p>
          <p class="text-3xl font-semibold text-yellow-600 dark:text-yellow-400">00:03:45</p>
        </div>
        <svg class="h-10 w-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
    </div>

    <!-- Charts Section -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Page Views Over Time</h2>
        <!-- Placeholder for a line chart -->
        <div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-500 dark:text-gray-400">Line Chart Placeholder</p>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">User Acquisition Channels</h2>
        <!-- Placeholder for a bar chart -->
        <div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-500 dark:text-gray-400">Bar Chart Placeholder</p>
        </div>
      </div>
    </div>

    <!-- Engagement & User Info Section -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md lg:col-span-2">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Top Engaging Content</h2>
        <ul class="divide-y divide-gray-200 dark:divide-gray-700">
          <li class="py-3 flex justify-between items-center">
            <p class="text-gray-700 dark:text-gray-300">How to master Tailwind CSS</p>
            <span class="text-sm text-gray-500 dark:text-gray-400">2,100 Views</span>
          </li>
          <li class="py-3 flex justify-between items-center">
            <p class="text-gray-700 dark:text-gray-300">Understanding JavaScript Async/Await</p>
            <span class="text-sm text-gray-500 dark:text-gray-400">1,850 Views</span>
          </li>
          <li class="py-3 flex justify-between items-center">
            <p class="text-gray-700 dark:text-gray-300">A Guide to Modern Web Development</p>
            <span class="text-sm text-gray-500 dark:text-gray-400">1,700 Views</span>
          </li>
        </ul>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Recent Activities</h2>
        <ul class="divide-y divide-gray-200 dark:divide-gray-700">
          <li class="py-3 flex items-center space-x-3">
            <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
            <p class="text-gray-700 dark:text-gray-300 text-sm"><span class="font-medium">John Doe</span> commented on 'New Features'</p>
          </li>
          <li class="py-3 flex items-center space-x-3">
            <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/thumb/women/76.jpg" alt="User Avatar">
            <p class="text-gray-700 dark:text-gray-300 text-sm"><span class="font-medium">Jane Smith</span> shared 'Blog Post Analysis'</p>
          </li>
          <li class="py-3 flex items-center space-x-3">
            <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/77.jpg" alt="User Avatar">
            <p class="text-gray-700 dark:text-gray-300 text-sm"><span class="font-medium">Peter Jones</span> viewed 'Data Trends 2023'</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Componente di avviso timeout sessione

Un componente di avviso di timeout della sessione progettato pensando alle microinterazioni, utilizzando una combinazione di colori in scala di grigi e un design reattivo con supporto del tema scuro. Ideale per le piattaforme di e-commerce per avvisare gli utenti della scadenza della sessione.

Aperto Anteprima

                <div class="fixed top-0 left-0 right-0 z-50 p-4 flex justify-between items-center bg-white dark:bg-gray-800 flex-col sm:flex-row rounded-lg shadow-lg">
    <div class="flex items-center space-x-3">
        <img src="https://picsum.photos/50/50" alt="Session Timeout" class="w-12 h-12 rounded-full shadow-lg" />
        <div class="text-gray-900 dark:text-white">
            <h2 class="text-lg font-semibold">Session Timeout</h2>
            <p class="text-sm">Your session is about to expire. Please take action to continue shopping.</p>
        </div>
    </div>
    <div class="flex space-x-2 mt-4 sm:mt-0">
        <button class="px-4 py-2 font-semibold text-white bg-gray-900 rounded-md transition duration-300 ease-in-out hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Stay Logged In</button>
        <button class="px-4 py-2 font-semibold text-gray-900 border border-gray-900 rounded-md transition duration-300 ease-in-out hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:text-white dark:border-white dark:hover:bg-gray-700">Log Out</button>
    </div>
</div>

Componente Pulsanti

Un componente Buttons progettato con elementi 3D e colori vivaci per le interfacce dei social media, che supporta il tema scuro e il design reattivo.

Aperto Anteprima

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Connect with Us!</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center px-4 py-2 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
            <img src="https://picsum.photos/20?random=1" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
            Follow
        </a>
        <a href="#" class="flex items-center justify-center px-4 py-2 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
            <img src="https://picsum.photos/20?random=2" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
            Share
        </a>
        <a href="#" class="flex items-center justify-center px-4 py-2 bg-red-500 dark:bg-red-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
            <img src="https://picsum.photos/20?random=3" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
            Like
        </a>
    </div>
</div>

1 ... 133 134 135 136 137 ... 315