Categorie

Tutti i componenti

Sfoglia tutti i componenti CSS di Tailwind disponibili

Componente di navigazione breadcrumb

Un componente di navigazione breadcrumb reattivo che utilizza Tailwind CSS con uno stile di progettazione glassmorphism. Presenta uno sfondo sfocato simile al vetro, supporta il tema scuro e include immagini segnaposto.

Aperto Anteprima

                <div class="bg-white bg-opacity-30 backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-30 rounded-lg p-4 mb-6">
    <nav class="flex" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400">
                    <img src="https://picsum.photos/20/20?random=1" alt="Home" class="w-5 h-5 rounded-full mr-2">
                    Home
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
                    </svg>
                    <a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400">Category</a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
                    </svg>
                    <a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400">Subcategory</a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
                    </svg>
                    <span class="ml-1 text-sm font-medium text-gray-700 dark:text-gray-200">Current Page</span>
                </div>
            </li>
        </ol>
    </nav>
</div>

Componente Mappe di calore

Un componente Heat Maps progettato con uno stile brutalista con contrasto elevato e layout insoliti utilizzando Tailwind CSS. Supporta effetti reattivi e un tema scuro.

Aperto Anteprima

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
    <h2 class="text-3xl text-gray-900 dark:text-white font-extrabold mb-4">Heat Maps</h2>
    <div class="grid grid-cols-3 gap-4">
        <div class="relative bg-red-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=1" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">20%</div>
        </div>
        <div class="relative bg-yellow-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=2" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-black font-bold text-lg">50%</div>
        </div>
        <div class="relative bg-green-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=3" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">75%</div>
        </div>
        <div class="relative bg-blue-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=4" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">40%</div>
        </div>
        <div class="relative bg-purple-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=5" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">90%</div>
        </div>
        <div class="relative bg-gray-600 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=6" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">60%</div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-2xl text-gray-900 dark:text-white font-bold mb-2">User Avatars</h3>
        <div class="flex space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
        </div>
    </div>
</div>
<div class="hidden dark:block bg-gray-900 h-32 text-center flex items-center justify-center text-white font-bold text-xl">Dark Mode Active</div>

Componente Modulo di accesso

Un componente del modulo di accesso reattivo progettato con lo stile Glassmorphism, che incorpora effetti di vetro smerigliato, effetti di sfocatura e supporto per la modalità oscura utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-30 shadow-lg rounded-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input class="border border-gray-300 dark:border-gray-600 rounded-lg p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" type="email" id="email" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="border border-gray-300 dark:border-gray-600 rounded-lg p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" type="password" id="password" placeholder="********" required>
            </div>
            <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-lg transition duration-300" type="submit">Login</button>
        </form>
        <p class="text-center text-gray-600 dark:text-gray-400 mt-4">Or log in with</p>
        <div class="flex justify-around mt-4">
            <a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=1" alt="Google"></a>
            <a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=2" alt="Facebook"></a>
            <a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=3" alt="Twitter"></a>
        </div>
    </div>
</div>

Componente Mappa del sito

Un componente della mappa del sito in stile retrò/vintage con effetti reattivi e supporto per temi scuri.

Aperto Anteprima

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-3xl mx-auto mt-10">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">Site Map</h2>
    <ul class="space-y-4">
        <li class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-3">
                <span class="text-gray-600 dark:text-gray-300">Home</span>
            </div>
            <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">Visit</a>
        </li>
        <li class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-3">
                <span class="text-gray-600 dark:text-gray-300">About Us</span>
            </div>
            <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">Visit</a>
        </li>
        <li class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-3">
                <span class="text-gray-600 dark:text-gray-300">Services</span>
            </div>
            <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">Visit</a>
        </li>
        <li class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-3">
                <span class="text-gray-600 dark:text-gray-300">Contact</span>
            </div>
            <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">Visit</a>
        </li>
    </ul>
</div>

Componente Schede Skeuomorfe

Un componente di schede reattive con scheumorfismo, che utilizza Tailwind CSS per imitare gli elementi di design del mondo reale. Include il supporto per il tema scuro e le immagini segnaposto.

Aperto Anteprima

                <div class="flex flex-col w-full max-w-md mx-auto p-4">
  <div class="tabs flex space-x-2">
    <button class="tab px-4 py-2 font-semibold text-white bg-gray-800 rounded-lg shadow-lg focus:outline-none ">Tab 1</button>
    <button class="tab px-4 py-2 font-semibold text-gray-800 bg-white rounded-lg shadow-lg focus:outline-none ">Tab 2</button>
    <button class="tab px-4 py-2 font-semibold text-gray-800 bg-white rounded-lg shadow-lg focus:outline-none ">Tab 3</button>
  </div>
  <div class="tab-content mt-4 p-4 bg-gray-200 rounded-lg shadow-lg dark:bg-gray-800">
    <div class="flex items-center space-x-4">
      <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
      <div class="text-gray-700 dark:text-gray-300">
        <h2 class="font-bold text-lg">Tab 1 Content</h2>
        <p>This section contains information related to Tab 1.</p>
        <img class="mt-2 rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" />
      </div>
    </div>
  </div>
</div>
<style>
  /* Dark Mode Support */
  @media (prefers-color-scheme: dark) {
    .bg-gray-800 { background-color: #2d3748; }
    .bg-gray-200 { background-color: #4a5568; }
    .text-gray-700 { color: #cbd5e0; }
  }
</style>

Componente Filtri

Un componente Brutalist Filters con Tailwind CSS, caratterizzato da un design reattivo, supporto per temi scuri e segnaposto per immagini e avatar.

Aperto Anteprima

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col gap-4">
  <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Filters</h2>
  <div class="flex flex-col gap-2">
    <label class="block text-gray-700 dark:text-gray-300">Category:</label>
    <select class="border-2 border-gray-300 dark:border-gray-600 rounded-lg p-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
      <option>All</option>
      <option>Art</option>
      <option>Photography</option>
      <option>Music</option>
      <option>Technology</option>
    </select>
  </div>
  <div class="flex flex-col gap-2">
    <label class="block text-gray-700 dark:text-gray-300">Price Range:</label>
    <input type="range" min="0" max="100" class="border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-lg p-2" />
  </div>
  <div class="flex flex-col gap-2">
    <label class="block text-gray-700 dark:text-gray-300">Rating:</label>
    <select class="border-2 border-gray-300 dark:border-gray-600 rounded-lg p-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
      <option>All</option>
      <option>1 Star</option>
      <option>2 Stars</option>
      <option>3 Stars</option>
      <option>4 Stars</option>
      <option>5 Stars</option>
    </select>
  </div>
  <div class="flex justify-between">
    <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg">Reset</button>
    <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg">Apply Filters</button>
  </div>
  <div class="mt-4">
    <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">Featured Users</h3>
    <div class="grid grid-cols-2 gap-4">
      <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-12 h-12 rounded-full" />
        <div>
          <h4 class="font-semibold">John Doe</h4>
          <p class="text-gray-600 dark:text-gray-300">Photographer</p>
        </div>
      </div>
      <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/women/80.jpg" alt="User Avatar" class="w-12 h-12 rounded-full" />
        <div>
          <h4 class="font-semibold">Jane Smith</h4>
          <p class="text-gray-600 dark:text-gray-300">Artist</p>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-4">
    <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">Featured Works</h3>
    <div class="grid grid-cols-1 gap-4">
      <img src="https://picsum.photos/200/150?random=1" alt="Featured Work" class="rounded-lg shadow-md" />
      <img src="https://picsum.photos/200/150?random=2" alt="Featured Work" class="rounded-lg shadow-md" />
      <img src="https://picsum.photos/200/150?random=3" alt="Featured Work" class="rounded-lg shadow-md" />
    </div>
  </div>
</div>

Componente della barra laterale

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

Aperto 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

Aperto 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.

Aperto 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.

Aperto 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>

1 ... 228 229 230 231 232 ... 242