Tutti i componenti

Componente del menu dell'hamburger

Un componente del menu dell'hamburger scheumorfico per una dashboard con una combinazione di colori pastello e un design minimalista.

Apri anteprima

                <div class="flex items-center justify-between p-4 bg-pastel-light dark:bg-pastel-dark rounded-lg shadow-lg">
    <div class="flex items-center">
        <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
        <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Dashboard</h1>
    </div>
    <button class="flex items-center p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
        <div class="hamburger"> 
            <div class="w-6 h-1 bg-gray-800 dark:bg-gray-200 mb-1"></div>
            <div class="w-6 h-1 bg-gray-800 dark:bg-gray-200 mb-1"></div>
            <div class="w-6 h-1 bg-gray-800 dark:bg-gray-200"></div>
        </div>
    </button>
</div>

<div class="hidden lg:block bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg mt-2">
    <ul class="space-y-2">
        <li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
            <span class="text-gray-800 dark:text-gray-200">User Profile</span>
        </li>
        <li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
            <span class="text-gray-800 dark:text-gray-200">Settings</span>
        </li>
        <li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
            <span class="text-gray-800 dark:text-gray-200">Logout</span>
        </li>
    </ul>
</div>

<style>
.hamburger {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>

Componente Pulsanti OAuth

Un componente Web per i pulsanti di autenticazione OAuth con stile neumorfismo, progettato per un portfolio e include un layout reattivo con supporto per il tema scuro.

Apri anteprima

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="p-6 bg-white rounded-xl shadow-lg dark:bg-gray-800 dark:shadow-gray-700">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Connect with Us</h2>
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/30?blur=1" alt="Google Logo" class="mr-3 rounded-full">
                <span class="text-gray-700 dark:text-white">Sign in with Google</span>
            </a>
            <a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/30?blur=1" alt="Facebook Logo" class="mr-3 rounded-full">
                <span class="text-gray-700 dark:text-white">Sign in with Facebook</span>
            </a>
            <a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/30?blur=1" alt="GitHub Logo" class="mr-3 rounded-full">
                <span class="text-gray-700 dark:text-white">Sign in with GitHub</span>
            </a>
        </div>
    </div>
</div>

Un componente infografico semplice e reattivo con elementi di design 3D e una combinazione di colori analoga per l'uso di blog/contenuti. Include il supporto per il tema scuro utilizzando Tailwind CSS.

Apri anteprima

                <div class="container mx-auto p-6 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <div class="relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-pink-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
      <div class="relative z-10">
        <h2 class="text-2xl font-bold mb-4">Key Statistic 1</h2>
        <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>

    <div class="relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-green-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
      <div class="relative z-10">
        <h2 class="text-2xl font-bold mb-4">Key Statistic 2</h2>
        <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>

  <div class="mt-8 relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
    <div class="absolute inset-0 bg-gradient-to-br from-yellow-400 to-red-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
    <div class="relative z-10">
      <h2 class="text-2xl font-bold mb-4">Key Finding</h2>
      <p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
  </div>
</div>

Lettore audio retrò

Componente lettore audio con design retrò / vintage, combinazione di colori pastello, complessità complessa, scopo per i social media, reattivo, supporto per temi scuri, HTML solo con Tailwind CSS

Apri anteprima

                <div class="bg-gradient-to-br from-purple-200 via-pink-200 to-yellow-100 dark:from-purple-800 dark:via-pink-800 dark:to-yellow-700 p-6 rounded-lg shadow-xl max-w-sm mx-auto font-mono">
  <div class="flex justify-between items-center mb-4">
    <div class="text-gray-700 dark:text-gray-300 text-sm">NOW PLAYING</div>
    <div class="text-gray-700 dark:text-gray-300 text-sm">03:45</div>
  </div>
  <div class="flex items-center mb-6">
    <img class="w-16 h-16 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Album Art">
    <div>
      <h3 class="text-lg font-bold text-gray-800 dark:text-white">Synthwave Nights</h3>
      <p class="text-gray-600 dark:text-gray-400">Neon Rider</p>
    </div>
  </div>
  <div class="relative mb-4">
    <div class="h-2 bg-purple-300 dark:bg-purple-600 rounded-full"></div>
    <div class="absolute top-0 left-0 h-2 bg-purple-600 dark:bg-purple-300 rounded-full w-3/4"></div>
    <div class="absolute -top-1 left-3/4 w-4 h-4 bg-purple-800 dark:bg-purple-100 rounded-full shadow"></div>
  </div>
  <div class="flex justify-center items-center space-x-6">
    <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none">
      <svg class="w-8 h-8" 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 19l-7-7 7-7"></path></svg>
    </button>
    <button class="bg-purple-500 dark:bg-purple-400 text-white dark:text-gray-800 rounded-full p-3 shadow-lg hover:bg-purple-600 dark:hover:bg-purple-300 focus:outline-none">
      <svg class="w-8 h-8" 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.752 11.168l-3.197 2.132A1 1 0 0010 13.803V9.197a1 1 0 001.555-.832l3.197 2.132a1 1 0 010 1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    </button>
    <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none">
      <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
    </button>
  </div>
  <div class="flex justify-center items-center mt-4 space-x-4 text-gray-700 dark:text-gray-300 text-sm">
    <div><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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg></div>
    <div><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="M8.295 10C9.501 6.619 13.305 4 18 4s8.499 2.619 9.705 6M16 18V9m-5 5v4m9-4v4"></path></svg></div>
    <div><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="M9 19V6a2 2 0 00-2-2H5a2 2 0 00-2 2v13a2 2 0 002 2h2a2 2 0 002-2zm7 0V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v13a2 2 0 002 2h2a2 2 0 002-2z"></path></svg></div>
  </div>
</div>

Componente contenitore

Un semplice componente contenitore reattivo per il consumo di blog/contenuti con microinterazioni e supporto per temi scuri utilizzando Tailwind CSS.

Apri anteprima

                <div class="container mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl">
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/400/200" alt="Blog Image" class="w-full h-48 object-cover rounded-md transition-transform duration-300 ease-in-out hover:scale-105">
        <h2 class="mt-4 text-2xl font-semibold text-gray-800 dark:text-white transition-colors duration-300">Blog Title</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-400 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
            <div class="ml-2">
                <p class="text-gray-800 dark:text-white font-semibold">Author Name</p>
                <p class="text-gray-500 dark:text-gray-400 text-sm">Date Published</p>
            </div>
        </div>
    </div>
</div>

Componente Notifiche di tipo avviso popup

Un componente reattivo per le notifiche di tipo avviso popup progettato con Glassmorphism, con una combinazione di colori monocromatica, supporto per la modalità oscura e pronto per l'uso in un portfolio.

Apri anteprima

                <div class="fixed bottom-5 right-5 space-y-4 z-50">
    <!-- Toast Notification 1 -->
    <div class="bg-white/30 backdrop-blur-md border border-white/20 rounded-lg shadow-lg p-4 transition-all duration-300 dark:bg-gray-800/30 dark:border-gray-700/20">
        <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
            <div class="flex-1">
                <h2 class="text-gray-900 dark:text-gray-100 font-semibold">New Project Alert</h2>
                <p class="text-gray-700 dark:text-gray-300">You have successfully created a new project!</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">Just now</span>
            </div>
            <button class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
                <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="M6 18L18 6M6 6l12 12" /></svg>
            </button>
        </div>
    </div>
    <!-- Toast Notification 2 -->
    <div class="bg-white/30 backdrop-blur-md border border-white/20 rounded-lg shadow-lg p-4 transition-all duration-300 dark:bg-gray-800/30 dark:border-gray-700/20">
        <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
            <div class="flex-1">
                <h2 class="text-gray-900 dark:text-gray-100 font-semibold">Portfolio Updated</h2>
                <p class="text-gray-700 dark:text-gray-300">Your portfolio has been successfully updated!</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">5 mins ago</span>
            </div>
            <button class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
                <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="M6 18L18 6M6 6l12 12" /></svg>
            </button>
        </div>
    </div>
</div>

Componente di incorporamento multimediale

Un componente Media Embed reattivo con supporto per temi scuri, layout complesso e combinazione di colori complementari, progettato per le dashboard.

Apri anteprima

                <div class="container mx-auto p-6 bg-gray-900 text-gray-200">
  <div class="flex flex-wrap -mx-4">
    <div class="w-full lg:w-2/3 px-4 mb-6 lg:mb-0">
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <div class="relative" style="padding-top: 56.25%;">
          <iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/your-video-id" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-screen" allowfullscreen></iframe>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-3 text-teal-400 dark:text-teal-500">Video Title Here</h3>
          <p class="text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center text-gray-500 text-sm">
            <span><i class="far fa-eye mr-2"></i>1.2M Views</span>
            <span class="ml-4"><i class="far fa-comment mr-2"></i>3.5K Comments</span>
          </div>
        </div>
      </div>
    </div>
    <div class="w-full lg:w-1/3 px-4">
      <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <h4 class="text-lg font-semibold mb-4 text-orange-400 dark:text-orange-500">Related Content</h4>
        <ul>
          <li class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-md mr-4" src="https://picsum.photos/id/1018/60/60" alt="Related Video Thumbnail">
            <div>
              <p class="font-semibold text-teal-400 dark:text-teal-500 leading-tight">Related Video Title</p>
              <p class="text-gray-500 text-sm">Channel Name</p>
            </div>
          </li>
          <li class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-md mr-4" src="https://picsum.photos/id/1015/60/60" alt="Related Video Thumbnail">
            <div>
              <p class="font-semibold text-teal-400 dark:text-teal-500 leading-tight">Another Related Video</p>
              <p class="text-gray-500 text-sm">Another Channel</p>
            </div>
          </li>
           <li class="flex items-center">
            <img class="w-12 h-12 rounded-md mr-4" src="https://picsum.photos/id/1019/60/60" alt="Related Video Thumbnail">
            <div>
              <p class="font-semibold text-teal-400 dark:text-teal-500 leading-tight">Yet Another Video</p>
              <p class="text-gray-500 text-sm">Yet Another Channel</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Vai al collegamento al contenuto

Un componente di collegamento "Salta al contenuto" per l'accessibilità, progettato per dashboard in modalità scura con una combinazione di colori in scala di grigi. È moderatamente complesso a causa dello stile reattivo e della modalità oscura. Non viene utilizzato alcun JavaScript. Utilizza Tailwind CSS con i prefissi dark: per il supporto del tema scuro.

Apri anteprima

                <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:bg-gray-800 focus:text-white focus:p-3 focus:underline dark:focus:bg-gray-900 dark:focus:text-gray-200">Skip to Content</a>

Componente di reimpostazione della password

Un componente per la reimpostazione della password dal design minimalista e piatto con toni della terra, design reattivo e supporto per temi scuri, su misura per i contenuti del blog.

Apri anteprima

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6 text-center">Reset Password</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4 text-center">Enter your email address to receive a link to create a new password.</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
                <input type="email" id="email" class="bg-gray-100 dark:bg-gray-700 border rounded-lg w-full h-12 px-4 focus:outline-none focus:ring focus:ring-green-300" required>
            </div>
            <button type="submit" class="w-full bg-green-500 hover:bg-green-400 text-white font-bold py-2 rounded-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-300">Send Reset Link</button>
        </form>
        <div class="mt-6 text-center">
            <p class="text-gray-600 dark:text-gray-400">Remembered your password? <a href="#" class="text-green-500 hover:underline">Login here</a></p>
        </div>
    </div>
</div>

Componente visualizzatore a 360°

Un semplice componente visualizzatore a 360° progettato con i principi del Material Design, utilizzando colori vivaci e supporto per temi scuri, adatto per la presentazione del portfolio.

Apri anteprima

                <div class="flex flex-col items-center justify-center p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition duration-300 ease-in-out">
  <h1 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-4">360° Viewer Component</h1>
  <div class="relative w-full h-80 overflow-hidden rounded-lg shadow-md">
    <img src="https://picsum.photos/seed/viewer1/400/300" alt="360° View" class="w-full h-full object-cover transition-transform duration-700 ease-in-out" />
    <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-lg">
      <span class="text-white text-lg">Swipe to view</span>
    </div>
  </div>
  <p class="mt-4 text-gray-700 dark:text-gray-300">Showcase your work or products beautifully.</p>
  <div class="flex space-x-4 mt-6">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-lg dark:border-gray-800" />
    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-lg dark:border-gray-800" />
    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-lg dark:border-gray-800" />
  </div>
</div>

Categorie

Componente del menu dell'hamburger

Componente Pulsanti OAuth

Componente Infografica

Lettore audio retrò

Componente contenitore

Componente Notifiche di tipo avviso popup

Componente di incorporamento multimediale

Vai al collegamento al contenuto

Componente di reimpostazione della password

Componente visualizzatore a 360°