Tutti i componenti

Componente Colonne

Un componente Columns reattivo progettato con i principi di Material Design, che utilizza Tailwind CSS per lo stile, il supporto del tema scuro e le animazioni reattive.

Apri anteprima

                <div class="container mx-auto px-4">
    <h2 class="text-2xl font-bold my-6 text-gray-800 dark:text-gray-200">Columns Component</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=1" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 1</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the first column. It can contain any content.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=2" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 2</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the second column. It can contain any content.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=3" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 3</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the third column. It can contain any content.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=4" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 4</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the fourth column. It can contain any content.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=5" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 5</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the fifth column. It can contain any content.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=6" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 6</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the sixth column. It can contain any content.</p>
        </div>
    </div>
</div>

Modulo di accesso retrò

Un componente del modulo di accesso in stile retrò/vintage con effetti reattivi e supporto per temi scuri, progettato utilizzando Tailwind CSS.

Apri anteprima

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-800">
    <div class="bg-white rounded-lg shadow-lg p-8 max-w-sm w-full dark:bg-gray-800">
        <h2 class="text-2xl font-bold text-center text-purple-700 dark:text-purple-300 mb-6">Login to Your Account</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-200 mb-1" for="email">Email</label>
                <input type="email" id="email" placeholder="[email protected]" class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" required />
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-200 mb-1" for="password">Password</label>
                <input type="password" id="password" placeholder="********" class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" required />
            </div>
            <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 rounded-lg transition duration-300 dark:bg-purple-700 dark:hover:bg-purple-800">Login</button>
        </form>
        <p class="text-center text-gray-600 dark:text-gray-400 mt-4">
            <a href="#" class="hover:underline">Forgot Password?</a>
        </p>
        <div class="flex items-center justify-center mt-4">
            <img src="https://picsum.photos/40/40" alt="Placeholder Avatar" class="rounded-full mr-2" />
            <span class="text-gray-700 dark:text-gray-300">Login with Random User</span>
        </div>
    </div>
</div>

Componente Pulsanti di condivisione social

Un componente minimalista per i pulsanti di condivisione social progettato con Tailwind CSS, con layout reattivo e supporto per temi scuri. Il componente include pulsanti per la condivisione su piattaforme di social media popolari con elementi di design puliti e semplici.

Apri anteprima

                <div class="flex flex-col md:flex-row justify-center items-center space-x-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
    <div class="flex items-center space-x-2">
        <img src="https://picsum.photos/30" alt="Avatar" class="w-8 h-8 rounded-full" />
        <span class="text-gray-800 dark:text-gray-200">Share with:</span>
    </div>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 hover:bg-blue-600 text-white transition duration-200 ease-in-out">
        <img src="https://img.icons8.com/ios-filled/50/ffffff/facebook-new.png" alt="Facebook" class="w-6 h-6" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-400 hover:bg-blue-500 text-white transition duration-200 ease-in-out">
        <img src="https://img.icons8.com/ios-filled/50/ffffff/twitter-squared.png" alt="Twitter" class="w-6 h-6" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-red-500 hover:bg-red-600 text-white transition duration-200 ease-in-out">
        <img src="https://img.icons8.com/ios-filled/50/ffffff/instagram-new.png" alt="Instagram" class="w-6 h-6" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-600 text-white transition duration-200 ease-in-out">
        <img src="https://img.icons8.com/ios-filled/50/ffffff/linkedin.png" alt="LinkedIn" class="w-6 h-6" />
    </a>
</div>

Componente Pulsanti di condivisione social

Un componente reattivo dei pulsanti di condivisione social con un'estetica retrò/vintage degli anni '80/'90, con supporto per temi scuri utilizzando Tailwind CSS e immagini segnaposto.

Apri anteprima

                <div class="flex flex-col items-center justify-center p-5 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-700 rounded-lg shadow-lg">
    <h2 class="text-white text-2xl font-bold mb-4">Share Your Experience</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="facebook" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Facebook</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="twitter" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Twitter</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="instagram" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Instagram</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="linkedin" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">LinkedIn</span>
        </a>
    </div>
    <div class="mt-5">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-white shadow-lg">
    </div>
</div>

Componente di navigazione 3D

Un componente di navigazione 3D reattivo progettato con Tailwind CSS, con supporto per temi scuri ed elementi tridimensionali accattivanti.

Apri anteprima

                <nav class="bg-gray-800 shadow-xl p-4 rounded-lg">
  <div class="flex justify-between items-center">
    <div class="flex items-center">
      <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-lg">
      <h1 class="text-white ml-2 text-2xl font-bold">MyWebsite</h1>
    </div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">Home</a>
      <a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">About</a>
      <a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">Services</a>
      <a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="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 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </div>
  <div class="md:hidden mt-2">
    <div class="flex flex-col space-y-2">
      <a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">Home</a>
      <a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">About</a>
      <a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">Services</a>
      <a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">Contact</a>
    </div>
  </div>
</nav>
<style>
  @media (prefers-color-scheme: dark) {
    nav {
      background-color: #1a202c;
    }
    .text-white {
      color: #f7fafc;
    }
    .text-gray-200 {
      color: rgba(255, 255, 255, 0.7);
    }
    .hover\:bg-gray-700:hover {
      background-color: #4a5568;
    }
    nav a:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
</style>

Componente Filtri

Un componente Filtri reattivo progettato per l'interfaccia utente in modalità oscura utilizzando Tailwind CSS. Include opzioni per filtrare i contenuti, utilizza sfondi scuri e consente di risparmiare la durata della batteria.

Apri anteprima

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-xl font-bold mb-4">Filters</h2>
    <form>
        <div class="mb-4">
            <label for="category" class="block text-sm font-medium mb-2">Category</label>
            <select id="category" class="bg-gray-700 text-white border border-gray-600 rounded-md p-2 w-full">
                <option>All</option>
                <option>Technology</option>
                <option>Health</option>
                <option>Education</option>
                <option>Fashion</option>
            </select>
        </div>
        <div class="mb-4">
            <label for="price-range" class="block text-sm font-medium mb-2">Price Range</label>
            <input type="range" id="price-range" min="0" max="100" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
        </div>
        <div class="mb-4">
            <label class="block text-sm font-medium mb-2">Rating</label>
            <div class="flex space-x-1">
                <input type="radio" id="star5" name="rating" value="5" class="hidden">
                <label for="star5" class="cursor-pointer text-yellow-500">★</label>
                <input type="radio" id="star4" name="rating" value="4" class="hidden">
                <label for="star4" class="cursor-pointer text-yellow-500">★</label>
                <input type="radio" id="star3" name="rating" value="3" class="hidden">
                <label for="star3" class="cursor-pointer text-yellow-500">★</label>
                <input type="radio" id="star2" name="rating" value="2" class="hidden">
                <label for="star2" class="cursor-pointer text-yellow-500">★</label>
                <input type="radio" id="star1" name="rating" value="1" class="hidden">
                <label for="star1" class="cursor-pointer text-yellow-500">★</label>
            </div>
        </div>
        <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 rounded">Apply Filters</button>
    </form>
    <div class="mt-6">
        <h3 class="text-lg font-semibold mb-2">Featured Items</h3>
        <div class="grid grid-cols-1 gap-4">
            <div class="bg-gray-700 rounded-lg p-4 shadow">
                <img src="https://picsum.photos/200/150?random=1" alt="Random Item" class="mb-2 rounded-md">
                <h4 class="font-bold">Item Title</h4>
                <p class="text-sm">Description of the item.</p>
            </div>
            <div class="bg-gray-700 rounded-lg p-4 shadow">
                <img src="https://picsum.photos/200/150?random=2" alt="Random Item" class="mb-2 rounded-md">
                <h4 class="font-bold">Item Title</h4>
                <p class="text-sm">Description of the item.</p>
            </div>
            <div class="bg-gray-700 rounded-lg p-4 shadow">
                <img src="https://picsum.photos/200/150?random=3" alt="Random Item" class="mb-2 rounded-md">
                <h4 class="font-bold">Item Title</h4>
                <p class="text-sm">Description of the item.</p>
            </div>
        </div>
    </div>
</div>

Componente lettore video

Un componente per lettore video in stile retrò/vintage con design reattivo e supporto per la modalità oscura utilizzando Tailwind CSS.

Apri anteprima

                <div class="flex flex-col items-center justify-center p-4 bg-gray-800 rounded-lg shadow-lg max-w-md w-full">
    <div class="relative w-full pt-9/16">
        <iframe class="absolute top-0 left-0 w-full h-full rounded-lg" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="flex justify-between items-center w-full mt-4 text-white">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
            <span class="font-bold">Username</span>
        </div>
        <div class="flex items-center">
            <button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
                Play
            </button>
            <button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 ml-2 rounded">
                Pause
            </button>
        </div>
    </div>
    <div class="flex flex-col w-full mt-4">
        <input type="range" class="appearance-none w-full h-2 bg-gray-600 rounded-lg" value="50" />
        <div class="flex justify-between text-xs text-gray-400">
            <span>0:00</span>
            <span>3:45</span>
        </div>
    </div>
</div>

<style>
    .pt-9\/16 {
        padding-top: 56.25%; /* 16:9 Aspect Ratio */
    }

    .dark {
        background-color: #1F2937;
    }
    .dark .bg-gray-800 {
        background-color: #4B5563;
    }
</style>

Componente di visualizzazione del prezzo

Un componente di visualizzazione dei prezzi in stile 3D che supporta la modalità oscura e gli effetti reattivi, mostrando i dettagli del prezzo del prodotto.

Apri anteprima

                <div class="max-w-sm mx-auto p-5 bg-white rounded-lg shadow-lg dark:bg-gray-800 transition-transform transform hover:scale-105">
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/200" alt="Product Image" class="w-full h-48 object-cover rounded-md shadow-md mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Name</h2>
        <p class="text-lg text-gray-600 dark:text-gray-300 mb-4">A brief description of the product goes here, highlighting features and benefits.</p>
        <div class="flex flex-row items-baseline mb-4">
            <span class="text-2xl font-bold text-gray-800 dark:text-white">$49.99</span>
            <span class="text-sm text-gray-500 dark:text-gray-400 ml-2">/ month</span>
        </div>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <span class="text-sm text-gray-600 dark:text-gray-400">5 reviews</span>
        </div>
        <button class="mt-4 py-2 px-4 bg-blue-500 text-white rounded-md shadow-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-200">Buy Now</button>
    </div>
</div>

Componente di feedback

Un componente di feedback minimalista con design reattivo, supporto per temi scuri e assenza di JavaScript. Include un avatar, un testo di feedback dell'utente e valutazioni rappresentate da stelle.

Apri anteprima

                <div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md dark:bg-gray-800 transition-shadow duration-300 ease-in-out">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
            <span class="text-gray-500 dark:text-gray-400 text-sm">2 hours ago</span>
        </div>
    </div>
    <div class="mb-4">
        <div class="flex items-center">
            <span class="text-yellow-500">
                📍📍📍📍📍
            </span>
            <span class="text-gray-500 dark:text-gray-400 ml-2">Rating: 4.5/5</span>
        </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300">
        This is a sample feedback message from the user. It highlights the positive aspects and any areas for improvement.
    </p>
    <div class="mt-4">
        <img class="rounded-md" src="https://picsum.photos/400/200" alt="Feedback Image">
    </div>
</div>

Componente delle recensioni dei prodotti

Un componente minimalista per le recensioni dei prodotti progettato utilizzando Tailwind CSS, con effetti reattivi e supporto per i temi scuri.

Apri anteprima

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="px-6 py-4">
        <h2 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">Product Name</h2>
        <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full mr-2" src="https://i.pravatar.cc/150?img=1" alt="User Avatar">
            <div class="text-sm">
                <p class="text-gray-900 dark:text-gray-300 leading-none">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">March 10, 2022</p>
            </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">This product exceeded my expectations! Great quality and fast shipping.</p>
        <div class="flex items-center">
            <span class="text-yellow-400">
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
            </span>
            <span class="ml-3 text-gray-600 dark:text-gray-400">5/5</span>
        </div>
    </div>
    <div class="border-t border-gray-200 dark:border-gray-700">
        <div class="px-6 py-4 text-center">
            <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Read More</button>
        </div>
    </div>
</div>

Categorie