Tutti i componenti

Componente contenitore 21

Un componente contenitore reattivo in stile retrò/vintage con supporto per temi scuri.

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Welcome to Nostalgia</h2>
  <p class="text-gray-600 dark:text-gray-300 mb-4">Experience the charm of the 80s and 90s with our carefully curated content. Dive into the vintage vibes that bring back fond memories.</p>
  <img class="rounded-lg mb-4" src="https://picsum.photos/400/200?random=1" alt="Retro Image" />
  <div class="flex items-center">
    <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
    <div class="ml-4">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
      <p class="text-gray-500 dark:text-gray-400">Retro Enthusiast</p>
    </div>
  </div>
  <button class="mt-6 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out">
    Explore More
  </button>
</div>

Menu a discesa Componente 20

Un componente del menu a discesa con uno stile di design brutale che utilizza Tailwind CSS, con effetti reattivi e supporto per temi scuri.

Apri anteprima

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" aria-haspopup="true" aria-expanded="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06-.02L10 10.293l3.71-3.11a.75.75 0 111.01 1.11l-4.25 3.5a.75.75 0 01-1.01 0l-4.25-3.5a.75.75 0 01-.02-1.06z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/40?random=1" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
        Profile
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/40?random=2" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
        Settings
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/40?random=3" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
        Notifications
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/40?random=4" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
        Log out
      </a>
    </div>
  </div>
</div>

<style>
  /* Brutalism styles for dark mode support */
  [class*='bg-'] {
    background-color: #ffffff;
  }
  [class*='text-'] {
    color: #000000;
  }
  .bg-gray-800 {
    background-color: #2d3748;
  }
  .dark .text-gray-300 {
    color: #edf2f7;
  }
  .dark .hover\:bg-gray-700:hover {
    background-color: #4a5568;
  }
</style>

Componente del menu dell'hamburger 19

Un componente scheletrico del menu dell'hamburger progettato in stile scheumorfico, che imita gli elementi del mondo reale. È reattivo e include il supporto per la modalità oscura utilizzando Tailwind CSS.

Apri anteprima

                <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden w-64">
  <div class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 p-4 rounded-t-lg">
    <h1 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Menu</h1>
    <button class="focus:outline-none">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-800 dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
      </svg>
    </button>
  </div>
  <div class="p-4 space-y-4">
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">Home</span>
    </div>
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">About</span>
    </div>
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">Services</span>
    </div>
    <div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
      <img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-gray-200">Contact</span>
    </div>
  </div>
  <div class="absolute bottom-0 left-0 right-0 bg-gray-300 dark:bg-gray-700 p-4 rounded-b-lg">
    <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Log Out</a>
  </div>
</div>

Mappe di calore Componente 18

Un componente per mappe di calore reattivo progettato in stile brutalismo con contrasto elevato, con immagini segnaposto e supporto avatar per la modalità oscura.

Apri anteprima

                <div class="flex flex-col bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-4">Heat Maps Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="relative bg-red-400 p-4 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200?random=1" alt="Heat Map 1" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
            <div class="relative z-10 text-black dark:text-white">
                <h3 class="text-xl font-bold">Region A</h3>
                <p>High Activity</p>
            </div>
        </div>
        <div class="relative bg-yellow-400 p-4 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200?random=2" alt="Heat Map 2" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
            <div class="relative z-10 text-black dark:text-white">
                <h3 class="text-xl font-bold">Region B</h3>
                <p>Moderate Activity</p>
            </div>
        </div>
        <div class="relative bg-green-400 p-4 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200?random=3" alt="Heat Map 3" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
            <div class="relative z-10 text-black dark:text-white">
                <h3 class="text-xl font-bold">Region C</h3>
                <p>Low Activity</p>
            </div>
        </div>
        <div class="relative bg-blue-400 p-4 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200?random=4" alt="Heat Map 4" class="absolute inset-0 w-full h-full object-cover opacity-50 rounded-lg">
            <div class="relative z-10 text-black dark:text-white">
                <h3 class="text-xl font-bold">Region D</h3>
                <p>Very Low Activity</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h2 class="text-xl font-bold text-black dark:text-white mb-2">User Avatars</h2>
        <div class="flex flex-wrap gap-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar 1">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar 2">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar 3">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar 4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar 5">
        </div>
    </div>
</div>

Messaggio di successo Componente 17

Un componente per messaggi di successo audace e crudo progettato con Tailwind CSS con effetti reattivi e supporto per temi scuri.

Apri anteprima

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm mx-auto">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full border-2 border-green-500 mr-3">
        <h2 class="text-xl font-bold text-green-700 dark:text-green-400">Success!</h2>
    </div>
    <p class="text-gray-700 dark:text-gray-300">
        Your operation was completed successfully. Check your account for the latest updates!
    </p>
    <div class="flex justify-end mt-4">
        <button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
            Close
        </button>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        .bg-white {
            background-color: #2D3748;
        }
        .text-gray-700 {
            color: #E2E8F0;
        }
    }
</style>

Barra di navigazione Componente 16

Un componente della barra di navigazione dal design piatto minimalista con effetti reattivi e supporto per temi scuri.

Apri anteprima

                <nav class="bg-white dark:bg-gray-800 shadow-lg">
  <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0">
          <a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">Brand</a>
        </div>
        <div class="hidden md:flex md:space-x-8">
          <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
          <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
          <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Services</a>
          <a href="#" class="text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
        </div>
      </div>
      <div class="hidden md:flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border border-gray-300 dark:border-gray-700"
        />
      </div>
      <div class="-mr-2 flex md:hidden">
        <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800"> 
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
          </svg>
        </button>
      </div>
    </div>
  </div>
  <div class="md:hidden">
    <a href="#" class="block text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium">Home</a>
    <a href="#" class="block text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium">About</a>
    <a href="#" class="block text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium">Services</a>
    <a href="#" class="block text-gray-800 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-base font-medium">Contact</a>
  </div>
</nav>

L'utente menziona il componente 15

Un componente Web che visualizza le menzioni dell'utente in uno stile Material Design, con effetti reattivi e supporto per temi scuri.

Apri anteprima

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 transition duration-300 ease-in-out">
    <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-2">Mentioned Users</h3>
    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="flex items-center py-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full mr-3">
            <div>
                <p class="text-gray-700 dark:text-gray-300 font-semibold">John Doe</p>
                <span class="text-gray-500 dark:text-gray-400 text-sm">@johndoe</span>
            </div>
        </li>
        <li class="flex items-center py-2">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full mr-3">
            <div>
                <p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Smith</p>
                <span class="text-gray-500 dark:text-gray-400 text-sm">@janesmith</span>
            </div>
        </li>
        <li class="flex items-center py-2">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full mr-3">
            <div>
                <p class="text-gray-700 dark:text-gray-300 font-semibold">Alice Johnson</p>
                <span class="text-gray-500 dark:text-gray-400 text-sm">@alicejohnson</span>
            </div>
        </li>
    </ul>
    <div class="mt-4">
        <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-md w-full h-auto">
    </div>
</div>

Componente 14 dell'incorporamento dei file multimediali

Un componente Media Embed progettato in uno stile scheumorfico, con effetti reattivi e supporto per temi scuri. Include un'immagine, una descrizione e un avatar dell'utente.

Apri anteprima

                <div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 my-8">  <div class="relative">    <img src="https://picsum.photos/500/300" alt="Media Content" class="rounded-lg shadow-md"/>    <div class="absolute top-0 left-0 bg-gray-900 bg-opacity-50 text-white rounded-lg p-2">      <span>Featured Media</span>    </div>  </div>  <div class="mt-4">    <h2 class="text-lg font-bold text-gray-800 dark:text-white">Media Title</h2>    <p class="text-gray-600 dark:text-gray-400">This is a brief description of the media content displayed above.</p>  </div>  <div class="flex items-center mt-4">    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md"/>    <div class="ml-3">      <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>      <p class="text-gray-600 dark:text-gray-400 text-sm">Media Creator</p>    </div>  </div></div>

Componente Tag Cloud 13

Un componente Tag Cloud progettato con lo stile Neumorfismo. Presenta uno stile dell'interfaccia utente morbido con elementi che sembrano estrudere dallo sfondo utilizzando ombre sottili. Il componente supporta il design reattivo e i temi scuri.

Apri anteprima

                <div class="flex flex-wrap justify-center p-8 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-lg">
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 1
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 2
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 3
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 4
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 5
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 6
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 7
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 8
        </a>
    </div>
</div>

<style>
    .shadow-neumorphism {
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1),
                    -10px -10px 20px rgba(255, 255, 255, 0.5);
    }
</style>

Componente di accesso/registrazione 12

Un componente di accesso/registrazione reattivo progettato in modalità oscura, che utilizza Tailwind CSS per lo stile.

Apri anteprima

                <div class="min-h-screen flex items-center justify-center bg-gray-900 p-5">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-md">
        <h2 class="text-2xl font-bold text-white text-center">Welcome</h2>
        <p class="text-gray-400 text-center mb-6">Please login or signup to continue</p>
        <div class="mb-4">
            <label class="block text-gray-300 mb-1" for="email">Email</label>
            <input class="w-full bg-gray-700 text-white rounded border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 p-2" type="email" id="email" placeholder="Enter your email" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-300 mb-1" for="password">Password</label>
            <input class="w-full bg-gray-700 text-white rounded border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 p-2" type="password" id="password" placeholder="Enter your password" required />
        </div>
        <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">Login</button>
        <div class="flex items-center justify-between my-4">
            <hr class="w-1/4 border-gray-600">
            <span class="text-gray-400">or</span>
            <hr class="w-1/4 border-gray-600">
        </div>
        <button class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500">Signup</button>
        <p class="text-gray-400 text-center mt-4">Already have an account? <a href="#" class="text-blue-400">Login</a></p>
        <p class="text-gray-400 text-center">Need an account? <a href="#" class="text-green-400">Signup</a></p>
    </div>
</div>

Categorie