Categorie

Tutti i componenti

Sfoglia tutti i componenti CSS di Tailwind disponibili

Componente Badge

Un componente badge reattivo con un design 3D, con supporto per profondità e tema scuro. Ogni badge rappresenta un utente con un nome, un'immagine e una descrizione, progettati utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4">
    <!-- Badge 1 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h4>
        <p class="text-gray-600 dark:text-gray-400">Web Developer</p>
    </div>
    <!-- Badge 2 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h4>
        <p class="text-gray-600 dark:text-gray-400">Graphic Designer</p>
    </div>
    <!-- Badge 3 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Michael Johnson</h4>
        <p class="text-gray-600 dark:text-gray-400">Product Manager</p>
    </div>
    <!-- Badge 4 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sarah Connor</h4>
        <p class="text-gray-600 dark:text-gray-400">UI/UX Designer</p>
    </div>
    <!-- Badge 5 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">David Lee</h4>
        <p class="text-gray-600 dark:text-gray-400">Content Writer</p>
    </div>
    <!-- Badge 6 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Emily Davis</h4>
        <p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
    </div>
</div>

Componenti di visualizzazione dei dati

Un componente di visualizzazione dei dati progettato in stile brutalista con Tailwind CSS, con layout reattivi e supporto per temi scuri.

Aperto Anteprima

                <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Data Visualization</h2>
    <div class="flex flex-col md:flex-row space-x-0 md:space-x-4 space-y-4 md:space-y-0">
        <div class="w-full md:w-1/2 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Bar Chart</h3>
            <img src="https://picsum.photos/400/200?random=1" alt="Bar Chart Placeholder" class="w-full h-auto rounded-lg">
        </div>
        <div class="w-full md:w-1/2 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Pie Chart</h3>
            <img src="https://picsum.photos/400/200?random=2" alt="Pie Chart Placeholder" class="w-full h-auto rounded-lg">
        </div>
    </div>
    <div class="mt-4 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">User Statistics</h3>
        <div class="flex flex-wrap items-center space-x-4">
            <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">
                <span class="ml-2 text-gray-700 dark:text-gray-200">User 1</span>
            </div>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-200">User 2</span>
            </div>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-200">User 3</span>
            </div>
        </div>
    </div>
</div>

Componenti di visualizzazione dei dati

Un componente di visualizzazione dei dati reattivo con elementi di progettazione 3D con supporto per temi scuri.

Aperto Anteprima

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center py-10">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden transform transition-all hover:scale-105 hover:shadow-2xl">
    <div class="p-6">
      <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Sales Data Visualization</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
        <div class="bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg p-4 flex flex-col items-center shadow-lg">
          <h3 class="text-xl text-white font-medium">Monthly Sales</h3>
          <img class="rounded-lg mt-2" src="https://picsum.photos/300/200?random=1" alt="Sales Chart">
          <p class="text-white mt-2">Total Sales: $15,000</p>
        </div>
        <div class="bg-gradient-to-br from-green-400 to-green-600 rounded-lg p-4 flex flex-col items-center shadow-lg">
          <h3 class="text-xl text-white font-medium">User Growth</h3>
          <img class="rounded-lg mt-2" src="https://picsum.photos/300/200?random=2" alt="User Growth Chart">
          <p class="text-white mt-2">New Users: 500</p>
        </div>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-6">
      <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Team Members</h2>
      <div class="flex justify-around mt-4">
        <div class="flex flex-col items-center">
          <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1">
          <p class="text-sm text-gray-700 dark:text-gray-300">John Doe</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Sales Manager</p>
        </div>
        <div class="flex flex-col items-center">
          <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar 2">
          <p class="text-sm text-gray-700 dark:text-gray-300">Jane Smith</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Data Analyst</p>
        </div>
      </div>
    </div>
  </div>
</div>

Componenti sociali

Una sezione di componenti sociali progettata in stile scheumorfico, con effetti reattivi e supporto per temi scuri.

Aperto Anteprima

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto flex flex-col items-center">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Connect with Us</h2>
    <div class="flex flex-row space-x-4">
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/100/100?random=1" alt="Facebook" class="rounded-full mb-2">
            <h3 class="font-bold text-gray-700 dark:text-gray-200">Facebook</h3>
            <p class="text-gray-600 dark:text-gray-400">Follow us on Facebook.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/100/100?random=2" alt="Twitter" class="rounded-full mb-2">
            <h3 class="font-bold text-gray-700 dark:text-gray-200">Twitter</h3>
            <p class="text-gray-600 dark:text-gray-400">Follow us on Twitter.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/100/100?random=3" alt="Instagram" class="rounded-full mb-2">
            <h3 class="font-bold text-gray-700 dark:text-gray-200">Instagram</h3>
            <p class="text-gray-600 dark:text-gray-400">Follow us on Instagram.</p>
        </div>
    </div>
    <div class="mt-6 flex flex-col items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-16 h-16 mb-2">
        <h4 class="font-semibold text-gray-800 dark:text-white">John Doe</h4>
        <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
    </div>
</div>

Componente delle recensioni dei prodotti

Un componente web che mostra le recensioni degli utenti per un prodotto, con microinterazioni e supporto per il tema scuro utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Product Reviews</h2>
        <div class="space-y-4">
            <!-- Review Item -->
            <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105 duration-300 ease-in-out">
                <div class="flex items-center mb-2">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
                    <div class="ml-3">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-300">5 stars</p>
                    </div>
                </div>
                <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">2 days ago</span>
            </div>
            <!-- Review Item -->
            <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105 duration-300 ease-in-out">
                <div class="flex items-center mb-2">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
                    <div class="ml-3">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Jane Smith</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-300">4 stars</p>
                    </div>
                </div>
                <p class="text-gray-700 dark:text-gray-300">Praesent nec nisl a purus blandit viverra. Proin nunc est, faucibus ut, ullamcorper id, dapibus id, sapien.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">5 days ago</span>
            </div>
            <!-- Review Item -->
            <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105 duration-300 ease-in-out">
                <div class="flex items-center mb-2">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
                    <div class="ml-3">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Michael Johnson</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-300">3 stars</p>
                    </div>
                </div>
                <p class="text-gray-700 dark:text-gray-300">Curabitur bibendum, felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">1 week ago</span>
            </div>
        </div>
    </div>
</div>

Componente Infografica

Un componente infografico minimalista caratterizzato da spazi puliti ed elementi minimali, supporto per il design reattivo e tema scuro.

Aperto Anteprima

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Infographics Title</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for statistic 1</p>
        </div>
        <div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for statistic 2</p>
        </div>
        <div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for statistic 3</p>
        </div>
    </div>
    <div class="mt-6 border-t pt-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Additional Insights</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <p class="text-gray-600 dark:text-gray-400">This is an additional insight provided by User</p>
        </div>
    </div>
</div>

Componente di autenticazione a due fattori

Un design semplice e pulito del componente di autenticazione a due fattori che utilizza Tailwind CSS con effetti reattivi e supporto per temi scuri.

Aperto Anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 w-96">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Two-Factor Authentication</h2>
    <p class="text-gray-600 dark:text-gray-400 text-center mb-4">Please enter the code sent to your email.</p>
    <div class="mb-4">
      <input type="text" placeholder="Enter your code" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600" />
    </div>
    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">Verify</button>
    <div class="flex items-center justify-between mt-6">
      <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Resend Code</a>
      <a href="#" class="text-gray-500 dark:text-gray-400 hover:underline">Need Help?</a>
    </div>
    <div class="flex items-center justify-center mt-6">
      <img src="https://picsum.photos/50/50" alt="Placeholder Image" class="rounded-full shadow-md" />
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full shadow-md ml-2" />
    </div>
  </div>
</div>

Componente lettore video

Un componente del lettore video reattivo progettato con lo stile Neumorphism, utilizzando Tailwind CSS. È dotato di supporto per la modalità oscura con ombre sottili per dare un aspetto morbido all'interfaccia utente.

Aperto Anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 max-w-lg w-full">
        <div class="flex justify-center mb-4">
            <video class="rounded-lg shadow-lg" controls>
                <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
            <div class="text-sm">
                <p class="text-gray-900 dark:text-white font-medium">John Doe</p>
                <p class="text-gray-500 dark:text-gray-300">Uploaded 2 days ago</p>
            </div>
        </div>
        <div class="mt-4">
            <p class="text-gray-800 dark:text-gray-300">A brief description of the video content goes here. It can detail key points or the overall theme of the video.</p>
        </div>
    </div>
</div>

Componente Mega Menu

Un componente Mega Menu reattivo progettato con lo stile Glassmorphism, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, che supportano temi scuri utilizzando Tailwind CSS.

Aperto Anteprima

                <div class="relative bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
    <div class="absolute inset-0 bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-50 backdrop-blur-md"></div>
    <nav class="relative z-10">
        <div class="container mx-auto px-4 py-6">
            <div class="flex justify-between items-center">
                <div class="text-2xl font-bold text-gray-800 dark:text-white">Brand</div>
                <div class="hidden lg:flex space-x-8">
                    <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Home</a>
                    <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">About</a>
                    <div class="relative group">
                        <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Services</a>
                        <div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-900 rounded-lg shadow-lg group-hover:block">
                            <div class="p-4">
                                <a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">Web Design</a>
                                <a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">SEO Services</a>
                                <a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">Marketing</a>
                            </div>
                        </div>
                    </div>
                    <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Contact</a>
                </div>
                <div class="lg: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 12h16m-7 6h7"/></svg>
                    </button>
                </div>
            </div>
        </div>
    </nav>
    <div class="hidden lg:block relative overflow-hidden">
        <img class="object-cover w-full h-64 opacity-50" src="https://picsum.photos/800/400" alt="Mega Menu Background">
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-50 p-6 rounded-lg shadow-lg">
                <h2 class="text-3xl font-bold text-gray-800 dark:text-white">Welcome to Our Services</h2>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Explore our range of services tailored for your business needs.</p>
                <a href="#" class="mt-4 inline-block bg-blue-500 text-white font-bold py-2 px-4 rounded-lg shadow hover:bg-blue-600">Get Started</a>
            </div>
        </div>
    </div>
    <footer class="text-center py-4 bg-gray-200 dark:bg-gray-700">
        <p class="text-gray-800 dark:text-white">© 2023 My Company</p>
    </footer>
</div>

Componente di autenticazione a due fattori

Un componente di autenticazione a due fattori progettato con microinterazioni, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.

Aperto 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 rounded-lg shadow-lg p-6 w-full max-w-md">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-4">Two-Factor Authentication</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Please enter the code sent to your registered mobile number.</p>
        <div class="flex flex-col items-center">
            <input type="text" placeholder="Enter your code" class="w-full p-3 rounded border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all mb-4"/>
        </div>
        <div class="flex items-center justify-between mb-4">
            <button class="transition-transform transform hover:scale-105 bg-blue-500 text-white p-3 rounded-lg shadow-md hover:shadow-lg focus:ring-2 focus:ring-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500 dark:focus:ring-blue-300">Verify</button>
            <button class="text-blue-500 hover:underline dark:text-blue-400">Resend Code</button>
        </div>
        <hr class="my-4 border-gray-300 dark:border-gray-700"/>
        <div class="text-center">
            <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full mx-auto mb-2"/>
            <span class="text-gray-600 dark:text-gray-400">User's Name</span>
        </div>
    </div>
</div>

1 ... 262 263 264 265 266 ... 282