Categorie

Tutti i componenti

Sfoglia tutti i componenti CSS di Tailwind disponibili

Componente di miglioramento della navigazione

Un componente di navigazione reattivo progettato in stile Material Design utilizzando Tailwind CSS, con supporto per temi scuri ed effetti reattivi.

Aperto Anteprima

                <nav class="bg-white dark:bg-gray-800 shadow-md">
    <div class="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50" alt="Logo" class="h-10 w-10 rounded-full">
            <a href="#" class="text-gray-800 dark:text-white font-semibold text-lg">Brand</a>
        </div>
        <div class="hidden md:flex space-x-6">
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Home</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">About</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Services</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Contact</a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-800 dark:text-white focus:outline-none">
                <svg class="w-6 h-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 class="px-4 md:hidden">
        <div class="py-4 flex flex-col space-y-2">
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Home</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">About</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Services</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Contact</a>
        </div>
    </div>
</nav>

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-8">
    <h1 class="text-3xl font-bold mb-4">Welcome to Our Website</h1>
    <p class="mb-4">This is a responsive navigation enhancement component made using Tailwind CSS with Material Design principles.</p>
    <img src="https://picsum.photos/800/400" alt="Placeholder" class="rounded shadow-lg mb-4">
    <div class="flex">
        <div class="w-1/3">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full h-16 w-16 shadow">
        </div>
        <div class="w-2/3 pl-4">
            <h2 class="text-xl font-semibold">John Doe</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur.</p>
        </div>
    </div>
</div>

Componente Componenti sociali

Un componente social brutalista che mostra un design audace con contrasto elevato, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS. Presenta avatar utente, collegamenti ai social media e immagini segnaposto.

Aperto Anteprima

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Connect With Us</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
            <img src="https://picsum.photos/200/200?random=1" alt="Profile 1" class="rounded-full mb-2 mx-auto" />
            <p class="text-lg font-semibold">John Doe</p>
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@john_doe</a>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
            <img src="https://picsum.photos/200/200?random=2" alt="Profile 2" class="rounded-full mb-2 mx-auto" />
            <p class="text-lg font-semibold">Jane Smith</p>
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@jane_smith</a>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
            <img src="https://picsum.photos/200/200?random=3" alt="Profile 3" class="rounded-full mb-2 mx-auto" />
            <p class="text-lg font-semibold">Alice Johnson</p>
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@alice_j</a>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
            <img src="https://picsum.photos/200/200?random=4" alt="Profile 4" class="rounded-full mb-2 mx-auto" />
            <p class="text-lg font-semibold">Bob Brown</p>
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@bob_brown</a>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white">Follow Us</h3>
        <div class="flex space-x-4 mt-2">
            <a href="#" class="text-gray-600 dark:text-gray-400">Facebook</a>
            <a href="#" class="text-gray-600 dark:text-gray-400">Twitter</a>
            <a href="#" class="text-gray-600 dark:text-gray-400">Instagram</a>
            <a href="#" class="text-gray-600 dark:text-gray-400">LinkedIn</a>
        </div>
    </div>
</div>

Sommario Componente

Un componente dell'indice reattivo progettato con lo stile Glassmorphism, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, che supportano temi chiari e scuri con Tailwind CSS.

Aperto Anteprima

                <div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-60 backdrop-blur-lg border border-gray-300 dark:border-gray-600 rounded-lg p-6 shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Table of Contents</h2>
    <ul class="mt-4 space-y-3">
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section1" class="text-gray-800 dark:text-white">Section 1: Introduction</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section2" class="text-gray-800 dark:text-white">Section 2: Features</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section3" class="text-gray-800 dark:text-white">Section 3: Installation</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section4" class="text-gray-800 dark:text-white">Section 4: Usage</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section5" class="text-gray-800 dark:text-white">Section 5: Conclusion</a>
        </li>
    </ul>
</div>

Neumorfismo Componente Fisarmonica

Componente fisarmonica con design neumorfico, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.

Aperto Anteprima

                <div x-data="{ activeTab: 1 }" class="max-w-3xl mx-auto p-8 dark:bg-gray-800 dark:text-white rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">

  <div class="mb-6">
    <button @click="activeTab = activeTab === 1 ? null : 1" class="w-full text-left py-3 px-4 text-gray-700 font-semibold rounded-md focus:outline-none focus:ring focus:ring-blue-300 dark:text-gray-300 dark:focus:ring-blue-700 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition duration-300 ease-in-out">
      <h2>Section 1</h2>
    </button>
    <div x-show="activeTab === 1" class="mt-2 p-4 text-gray-600 leading-relaxed dark:text-gray-400">
      <p>Content for section 1. This is where the detailed information for the first section goes.</p>
    </div>
  </div>

  <div class="mb-6">
    <button @click="activeTab = activeTab === 2 ? null : 2" class="w-full text-left py-3 px-4 text-gray-700 font-semibold rounded-md focus:outline-none focus:ring focus:ring-blue-300 dark:text-gray-300 dark:focus:ring-blue-700 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition duration-300 ease-in-out">
      <h2>Section 2</h2>
    </button>
    <div x-show="activeTab === 2" class="mt-2 p-4 text-gray-600 leading-relaxed dark:text-gray-400">
      <p>Content for section 2. More detailed information can be added here for the second section.</p>
    </div>
  </div>

  <div class="mb-6">
    <button @click="activeTab = activeTab === 3 ? null : 3" class="w-full text-left py-3 px-4 text-gray-700 font-semibold rounded-md focus:outline-none focus:ring focus:ring-blue-300 dark:text-gray-300 dark:focus:ring-blue-700 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition duration-300 ease-in-out">
      <h2>Section 3</h2>
    </button>
    <div x-show="activeTab === 3" class="mt-2 p-4 text-gray-600 leading-relaxed dark:text-gray-400">
      <p>Content for section 3. This is the content for the third and final section of the accordion.</p>
    </div>
  </div>

</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #cbced1, -7px -7px 15px #ffffff;
  }

  .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #4b5563, -7px -7px 15px #374151;
  }

  .shadow-neumorphic-light-inset {
    box-shadow: inset 5px 5px 10px #cbced1, inset -5px -5px 10px #ffffff;
  }

  .shadow-neumorphic-dark-inset {
    box-shadow: inset 5px 5px 10px #4b5563, inset -5px -5px 10px #374151;
  }

  /* Basic responsiveness */
  @media (max-width: 768px) {
    .p-8 {
      padding: 2rem;
    }
  }
</style>

Torna all'inizio Componente pulsante

Un pulsante "Torna all'inizio" reattivo che segue i principi del Material Design, supportando la modalità oscura con Tailwind CSS per lo stile e gli effetti reattivi.

Aperto Anteprima

                <div class="fixed bottom-5 right-5 z-50">
    <button class="bg-blue-500 text-white rounded-full p-2 shadow-lg transition-transform transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:shadow-md dark:focus:ring-blue-300">
        <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="M12 4v16m0 0L8 16m4 4l4-4" />
        </svg>
    </button>
</div>

<style>
  /* Tailwind dark mode support */
  @media (prefers-color-scheme: dark) {
      .bg-blue-500 { background-color: #3b82f6; }
      .bg-blue-700 { background-color: #2563eb; }
      .text-white { color: #ffffff; }
      .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
      .dark .shadow-md { box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); }
  }
</style>

Piè di pagina di Glassmorphism

Un componente del piè di pagina reattivo progettato con lo stile glassmorphism, con effetti simili al vetro smerigliato e supporto per temi scuri utilizzando Tailwind CSS.

Aperto Anteprima

                <footer class="bg-white bg-opacity-30 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border-t border-gray-200 dark:border-gray-700 py-10">
    <div class="container mx-auto px-6">
        <div class="flex flex-col md:flex-row justify-between items-center text-center md:text-left">
            <div class="mb-4 md:mb-0">
                <h3 class="text-xl font-semibold">Your Company</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">Your slogan or tagline goes here.</p>
            </div>
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/50/50" alt="Random placeholder" class="rounded-full border border-gray-300 dark:border-gray-600">
                <p class="text-sm text-gray-600 dark:text-gray-400">Contact us: [email protected]</p>
            </div>
        </div>
        <div class="flex flex-col md:flex-row justify-center md:justify-between mt-8">
            <div class="mb-4 md:mb-0">
                <ul class="flex space-x-4">
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Home</a></li>
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">About</a></li>
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Services</a></li>
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
                </ul>
            </div>
            <div>
                <p class="text-sm text-gray-600 dark:text-gray-400">© 2023 Your Company. All rights reserved.</p>
            </div>
        </div>
    </div>
</footer>

Componente Badge

Un componente Badge reattivo progettato con lo stile Glassmorphism, con elementi traslucidi simili al vetro smerigliato ed effetti di sfocatura, con supporto per la modalità oscura.

Aperto Anteprima

                <div class="flex flex-wrap justify-center space-x-4 mt-10">
    <!-- Badge 1 -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mb-2">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">John Doe</h3>
        <p class="text-gray-500 dark:text-gray-400">Web Developer</p>
    </div>
    <!-- Badge 2 -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/50/51" alt="Avatar" class="rounded-full mb-2">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Jane Smith</h3>
        <p class="text-gray-500 dark:text-gray-400">Graphic Designer</p>
    </div>
    <!-- Badge 3 -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/50/52" alt="Avatar" class="rounded-full mb-2">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Mike Lee</h3>
        <p class="text-gray-500 dark:text-gray-400">UX Designer</p>
    </div>
    <!-- Badge 4 -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/50/53" alt="Avatar" class="rounded-full mb-2">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Emily Clark</h3>
        <p class="text-gray-500 dark:text-gray-400">Product Manager</p>
    </div>
</div>

Componente CAPTCHA di progettazione dei materiali

Un componente CAPTCHA reattivo con i principi del Material Design, incluso il supporto del tema scuro.

Aperto Anteprima

                <div class="flex flex-col items-center justify-center p-6 bg-white rounded-lg shadow-md max-w-sm mx-auto dark:bg-gray-800 dark:shadow-lg">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Please prove you're human</h2>
    <div class="mt-4 mb-6">
        <img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="w-full h-auto rounded-lg shadow-sm" />
    </div>
    <div class="flex items-center justify-between w-full">
        <input type="text" placeholder="Enter the text" class="border border-gray-300 rounded-lg p-2 w-3/4 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" />
        <button class="ml-2 px-4 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600 transition duration-200">Submit</button>
    </div>
    <div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
        <p>If you can't read the text, refresh to get a new image.</p>
    </div>
</div>

Componente Messaggi di successo

Un componente per la visualizzazione di messaggi di successo con uno stile di progettazione 3D, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="p-6 max-w-md mx-auto bg-white rounded-lg shadow-md dark:bg-gray-800 transition duration-300 ease-in-out transform hover:scale-105">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50/50?random=1" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 shadow-lg dark:shadow-xl">
        <div class="flex-1">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h2>
            <p class="text-gray-600 dark:text-gray-400">Your action was completed successfully.</p>
        </div>
    </div>
    <div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
        <span class="text-sm text-gray-500 dark:text-gray-400">2 minutes ago</span>
        <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">View Details</a>
    </div>
</div>

RetroHeaderComponent

Componente Header retrò/vintage con effetti reattivi e supporto per temi scuri.

Aperto Anteprima

                <header class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-white p-4">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-2xl font-bold">RetroHeader</div>
    <nav class="hidden md:flex space-x-4">
      <a href="#" class="hover:underline">Home</a>
      <a href="#" class="hover:underline">About</a>
      <a href="#" class="hover:underline">Contact</a>
    </nav>
    <div class="md:hidden">
      <button class="text-gray-800 dark:text-white focus:outline-none">
        <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 12h16M4 18h16"></path></svg>
      </button>
    </div>
  </div>
</header>

1 ... 209 210 211 212 213 ... 242