Tutti i componenti

Componente della barra laterale

Un componente minimalista della barra laterale con design reattivo e supporto per temi scuri, che utilizza Tailwind CSS.

Apri anteprima

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <aside class="w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 shadow-lg transition-all duration-300 ease-in-out">
    <div class="px-6 py-4">
      <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full" />
        <h1 class="text-xl font-semibold text-gray-800 dark:text-white">John Doe</h1>
      </div>
      <nav>
        <ul class="space-y-2">
          <li>
            <a href="#" class="block p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition duration-200">Dashboard</a>
          </li>
          <li>
            <a href="#" class="block p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition duration-200">Profile</a>
          </li>
          <li>
            <a href="#" class="block p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition duration-200">Settings</a>
          </li>
          <li>
            <a href="#" class="block p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition duration-200">Support</a>
          </li>
        </ul>
      </nav>
    </div>
  </aside>
  <main class="flex-grow p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Welcome to your Dashboard</h2>
    <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <img src="https://picsum.photos/300/200" alt="Placeholder Image" class="w-full h-auto rounded-lg mb-2" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Section 1</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description about this section.</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <img src="https://picsum.photos/300/200" alt="Placeholder Image" class="w-full h-auto rounded-lg mb-2" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Section 2</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description about this section.</p>
      </div>
    </div>
  </main>
</div>

Barra di navigazione

Componente della barra di navigazione reattiva in modalità oscura utilizzando Tailwind CSS

Apri anteprima

                <nav class="bg-gray-800 text-white p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="text-lg font-bold">Brand</div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="hover:text-gray-400">Home</a>
            <a href="#" class="hover:text-gray-400">About</a>
            <a href="#" class="hover:text-gray-400">Services</a>
            <a href="#" class="hover:text-gray-400">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-white focus:outline-none" id="menu-btn">
                <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="M4 6h16M4 12h16m-7 6h7"/>
                </svg>
            </button>
        </div>
    </div>
    <div class="md:hidden" id="menu" style="display: none;">
        <a href="#" class="block px-4 py-2 hover:bg-gray-700">Home</a>
        <a href="#" class="block px-4 py-2 hover:bg-gray-700">About</a>
        <a href="#" class="block px-4 py-2 hover:bg-gray-700">Services</a>
        <a href="#" class="block px-4 py-2 hover:bg-gray-700">Contact</a>
    </div>
</nav>

<!-- User Avatar Section -->
<div class="p-4 bg-gray-900">
    <div class="container mx-auto flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <span class="ml-2">User Name</span>
    </div>
</div>

<!-- Placeholder Image Section -->
<div class="p-4">
    <img src="https://picsum.photos/1920/1080" alt="Placeholder Image" class="w-full h-auto">
</div>

Componente Casella di ricerca

Un componente della casella di ricerca reattiva progettato in uno stile brutalista con supporto per temi scuri utilizzando Tailwind CSS.

Apri anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
    <div class="bg-gray-800 p-8 rounded-lg shadow-lg space-y-4">
        <h1 class="text-3xl font-bold text-center">Search</h1>
        <div class="flex items-center bg-gray-700 p-2 rounded-md">
            <input type="text" placeholder="Type to search..." class="flex-grow bg-transparent border-none text-white outline-none placeholder-gray-400" />
            <button class="ml-2 bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition duration-300">Go</button>
        </div>
        <div class="text-center">
            <img src="https://picsum.photos/200/100" alt="Placeholder image" class="w-full h-auto rounded-md mt-4">
        </div>
        <div class="flex items-center justify-between mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            <span class="text-sm">User Name</span>
        </div>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1F1F1F;
        }
        .bg-gray-800 {
            background-color: #2d2d2d;
        }
        .bg-gray-700 {
            background-color: #3e3e3e;
        }
    }
</style>

Componente pulsante Aggiungi al carrello

Un pulsante reattivo "Aggiungi al carrello" progettato in modalità scura utilizzando Tailwind CSS, con effetti al passaggio del mouse e supporto per il tema scuro.

Apri anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
    <div class="flex flex-col items-center bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/300" alt="Product Image" class="w-full h-auto rounded-lg mb-4" />
        <h2 class="text-lg font-semibold mb-2">Product Name</h2>
        <p class="text-gray-400 mb-4">Short description of the product goes here.</p>
        <div class="flex items-center justify-between w-full">
            <span class="text-xl font-bold">$19.99</span>
            <button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
                Add to Cart
            </button>
        </div>
    </div>
</div>

Componente Mega Menu

Un componente mega menu reattivo progettato con particolare attenzione alle microinterazioni e al supporto del tema scuro utilizzando Tailwind CSS.

Apri anteprima

                <div class="relative bg-white dark:bg-gray-800">
  <nav class="flex flex-col md:flex-row justify-between items-center p-4">
    <div class="flex items-center">
      <a href="#" class="text-lg font-semibold text-gray-800 dark:text-white hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">Brand</a>
      <div class="hidden md:flex space-x-4 ml-8">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">Home</a>
        <div class="relative group">
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">Services</a>
          <div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-900 shadow-lg rounded-lg group-hover:block transition duration-150 ease-in-out">
            <ul class="py-2">
              <li class="px-4 py-2 hover:bg-blue-100 dark:hover:bg-gray-700"><a href="#" class="block text-gray-800 dark:text-gray-300">Web Design</a></li>
              <li class="px-4 py-2 hover:bg-blue-100 dark:hover:bg-gray-700"><a href="#" class="block text-gray-800 dark:text-gray-300">SEO</a></li>
              <li class="px-4 py-2 hover:bg-blue-100 dark:hover:bg-gray-700"><a href="#" class="block text-gray-800 dark:text-gray-300">Content Writing</a></li>
            </ul>
          </div>
        </div>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">About Us</a>
      </div>
    </div>
    <div class="md:hidden">
      <button class="text-gray-600 dark:text-gray-300 focus:outline-none hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">
        <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="M4 6h16M4 12h16m-7 6h7"/>
        </svg>
      </button>
    </div>
  </nav>

  <div class="mt-4 max-w-6xl mx-auto px-2">
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 transition duration-150 ease-in-out hover:shadow-lg">
        <img src="https://picsum.photos/200/150?random=1" alt="Placeholder" class="rounded mb-4" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Service One</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description of the service offered.</p>
      </div>
      <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 transition duration-150 ease-in-out hover:shadow-lg">
        <img src="https://picsum.photos/200/150?random=2" alt="Placeholder" class="rounded mb-4" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Service Two</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description of the service offered.</p>
      </div>
      <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 transition duration-150 ease-in-out hover:shadow-lg">
        <img src="https://picsum.photos/200/150?random=3" alt="Placeholder" class="rounded mb-4" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Service Three</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description of the service offered.</p>
      </div>
      <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 transition duration-150 ease-in-out hover:shadow-lg">
        <img src="https://picsum.photos/200/150?random=4" alt="Placeholder" class="rounded mb-4" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Service Four</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description of the service offered.</p>
      </div>
    </div>
  </div>
</div>

Componente del modulo di registrazione

Un componente del modulo di registrazione reattivo con Glassmorphism, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, che supporta la modalità oscura e la visualizzazione di immagini segnaposto.

Apri anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <form class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-md p-8 w-full max-w-md">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Register</h2>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="username">Username</label>
            <input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="text" id="username" placeholder="Your Username" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
            <input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="email" id="email" placeholder="Your Email" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
            <input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="password" id="password" placeholder="Your Password" required />
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Avatar</label>
            <div class="flex items-center">
                <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600" />
                <input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="text" id="avatar" value="https://randomuser.me/api/portraits/men/10.jpg" readonly />
            </div>
        </div>
        <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-md shadow focus:outline-none focus:ring focus:ring-blue-500 mt-4">Register</button>
    </form>
</div>

Componente Modulo di accesso

Un componente del modulo di accesso progettato con Glassmorphism, con elementi traslucidi simili al vetro smerigliato ed effetti reattivi, che supporta temi scuri utilizzando Tailwind CSS.

Apri anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 bg-opacity-40 backdrop-blur-lg rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="username">Username</label>
                <input class="block w-full px-4 py-2 border rounded-md bg-transparent border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="username" placeholder="Enter your username" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="block w-full px-4 py-2 border rounded-md bg-transparent border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="password" id="password" placeholder="Enter your password" required>
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 transition duration-150 ease-in-out">
                    <label class="ml-2 text-sm text-gray-600 dark:text-gray-300">Remember me</label>
                </div>
                <a href="#" class="text-sm text-blue-600 hover:underline dark:text-blue-400">Forgot password?</a>
            </div>
            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Login</button>
        </form>
        <p class="mt-6 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Sign up</a></p>
    </div>
</div>

Componente Material Design Forms

Un componente di moduli reattivi progettato con i principi di Material Design utilizzando Tailwind CSS, con supporto per la modalità oscura.

Apri anteprima

                <div class="container mx-auto p-6">
    <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Contact Us</h2>
    <form class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8">
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="name">Name</label>
            <input class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="name" type="text" placeholder="Your Name" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
            <input class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="email" type="email" placeholder="Your Email" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="message">Message</label>
            <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" id="message" rows="4" placeholder="Your Message" required></textarea>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300">Avatar</label>
            <img class="rounded-full w-20 h-20 mb-2 border border-gray-300" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        </div>
        <button class="w-full p-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">Submit</button>
    </form>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1E1E2F;
        }
    }
</style>

Componenti caricatori

Un componente loader progettato in base ai principi di Material Design con supporto CSS Tailwind per la modalità oscura e gli effetti reattivi.

Apri anteprima

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
    <h1 class="text-2xl font-bold mb-8 text-gray-800 dark:text-white">Loading...</h1>
    <div class="flex items-center justify-center space-x-4">
        <div class="loader w-16 h-16 border-4 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
        <div class="loader w-16 h-16 border-4 border-green-500 rounded-full border-t-transparent animate-spin"></div>
        <div class="loader w-16 h-16 border-4 border-red-500 rounded-full border-t-transparent animate-spin"></div>
    </div>
    <div class="mt-8">
        <img class="w-24 h-24 rounded-full shadow-lg" src="https://picsum.photos/100/100" alt="Random Image" />
    </div>
    <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">This is an example of a loading component with material design.</div>
</div>

<style>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    .loader {
        @apply animate-spin;
    }

    @media (prefers-color-scheme: dark) {
        /* Dark mode styles */
        .loader {
            filter: brightness(1.2);
        }
    }
</style>

Barra di navigazione skeuomorphic

Un componente della barra di navigazione reattivo progettato in uno stile scheumorfico con supporto per temi scuri utilizzando Tailwind CSS.

Apri anteprima

                <nav class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50/50?random=1" alt="Logo" class="h-10 rounded-full">
            <span class="text-xl font-bold dark:text-white">Brand</span>
        </div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Home
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                About
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Services
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Contact
            </a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-800 dark:text-gray-200 p-2 rounded-lg focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="md:hidden">
        <div class="flex flex-col space-y-1 mt-2">
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Home
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                About
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Services
            </a>
            <a href="#" class="text-gray-800 dark:text-gray-200 p-2 rounded-lg transition duration-200 hover:bg-gray-300 dark:hover:bg-gray-700">
                Contact
            </a>
        </div>
    </div>
</nav>

Categorie