Tutti i componenti

Componente Timeline

Un componente della timeline Minimalist/Flat Design per mostrare lavori o prodotti in un portfolio, progettato con reattività e supporto per la modalità oscura utilizzando Tailwind CSS.

Apri anteprima

                <div class="bg-gray-100 dark:bg-gray-900 p-6">
    <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">My Portfolio Timeline</h2>
    <div class="relative">
        <div class="flex flex-col">
            <!-- Timeline Item 1 -->
            <div class="flex items-center mb-8">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Title 1</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of the project or work done. It showcases the skills and methods used in the project.</p>
                    <div class="mt-2">
                        <img src="https://picsum.photos/200/100" alt="Project Image" class="rounded-lg shadow-md">
                    </div>
                </div>
            </div>
            <!-- Timeline Item 2 -->
            <div class="flex items-center mb-8">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Title 2</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of the project or work done. It showcases the skills and methods used in the project.</p>
                    <div class="mt-2">
                        <img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="rounded-lg shadow-md">
                    </div>
                </div>
            </div>
            <!-- Timeline Item 3 -->
            <div class="flex items-center mb-8">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Title 3</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of the project or work done. It showcases the skills and methods used in the project.</p>
                    <div class="mt-2">
                        <img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="rounded-lg shadow-md">
                    </div>
                </div>
            </div>
            <!-- Timeline Item 4 -->
            <div class="flex items-center mb-8">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Title 4</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description of the project or work done. It showcases the skills and methods used in the project.</p>
                    <div class="mt-2">
                        <img src="https://picsum.photos/200/100?random=3" alt="Project Image" class="rounded-lg shadow-md">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Componente della finestra di chat

Un componente reattivo della finestra di chat con una combinazione di colori triadica, microinterazioni e supporto per la modalità scura, progettato per l'e-commerce. Presenta un'intestazione della chat, un elenco di messaggi con messaggi mittente/destinatario e un input per i messaggi.

Apri anteprima

                <div class="flex flex-col h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden font-sans">

  <!-- Chat Header -->
  <div class="w-full bg-purple-600 dark:bg-purple-800 p-4 flex items-center justify-between shadow-md">
    <div class="flex items-center">
      <img src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-white animate-pulse-slow" />
      <h2 class="text-white text-lg font-semibold">Customer Support</h2>
    </div>
    <div class="relative">
      <div class="w-3 h-3 bg-green-400 rounded-full absolute right-0 bottom-0 ring-2 ring-purple-600 dark:ring-purple-800 animate-ping-slow"></div>
      <div class="w-3 h-3 bg-green-400 rounded-full absolute right-0 bottom-0"></div>
    </div>

  </div>

  <!-- Chat Messages -->
  <div class="flex-1 p-4 overflow-y-auto space-y-4 scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-700 scrollbar-track-gray-100 dark:scrollbar-track-gray-900">

    <!-- Receiver Message -->
    <div class="flex items-end justify-start animate-fade-in-down">
      <img src="https://www.randomuser.me/api/portraits/women/76.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600" />
      <div class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-lg max-w-xs transition-all duration-300 ease-in-out transform origin-bottom-left hover:scale-105">
        <p>Hello! How can I help you today?</p>
        <span class="text-xs text-gray-600 dark:text-gray-400 block mt-1 text-right">10:00 AM</span>
      </div>
    </div>

    <!-- Sender Message -->
    <div class="flex items-end justify-end animate-fade-in-up">
      <div class="bg-blue-400 dark:bg-blue-600 text-white p-3 rounded-lg max-w-xs transition-all duration-300 ease-in-out transform origin-bottom-right hover:scale-105">
        <p>I'm looking for information about my recent order, #12345.</p>
        <span class="text-xs text-blue-100 dark:text-blue-200 block mt-1 text-right">10:02 AM</span>
      </div>
      <img src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 border-2 border-blue-400 dark:border-blue-600" />
    </div>

    <!-- Receiver Message with Image -->
    <div class="flex items-end justify-start animate-fade-in-down">
      <img src="https://www.randomuser.me/api/portraits/women/76.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600" />
      <div class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-lg max-w-xs transition-all duration-300 ease-in-out transform origin-bottom-left hover:scale-105">
        <p>Certainly! Could you please provide your full name and the email address associated with the order?</p>
        <img src="https://picsum.photos/id/237/200/150" alt="Order details" class="mt-2 rounded-md transition-all duration-300 ease-in-out transform hover:scale-105" />
        <span class="text-xs text-gray-600 dark:text-gray-400 block mt-1 text-right">10:05 AM</span>
      </div>
    </div>

    <!-- Sender Message with Typing Indicator -->
    <div class="flex items-end justify-end animate-fade-in-up">
      <div class="bg-blue-400 dark:bg-blue-600 text-white p-3 rounded-lg max-w-xs transform origin-bottom-right">
        <div class="flex items-center space-x-1">
          <span class="h-2 w-2 bg-white rounded-full animate-bounce-dot"></span>
          <span class="h-2 w-2 bg-white rounded-full animate-bounce-dot animation-delay-200"></span>
          <span class="h-2 w-2 bg-white rounded-full animate-bounce-dot animation-delay-400"></span>
        </div>
        <span class="text-xs text-blue-100 dark:text-blue-200 block mt-1 text-right">Typing...</span>
      </div>
      <img src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 border-2 border-blue-400 dark:border-blue-600" />
    </div>

  </div>

  <!-- Message Input -->
  <div class="bg-cyan-500 dark:bg-cyan-700 p-4 flex items-center shadow-lg">
    <input type="text" placeholder="Type your message..." class="flex-1 p-3 rounded-full bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 transition-all duration-300 ease-in-out transform focus:scale-105" />
    <button class="ml-4 bg-blue-500 dark:bg-blue-600 text-white p-3 rounded-full shadow-lg hover:bg-blue-600 dark:hover:bg-blue-700 transform hover:scale-110 transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
        <path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.543 60.543 0 0018.445-8.986.75.75 0 000-1.218A60.543 60.543 0 003.478 2.405z" />
      </svg>
    </button>
  </div>

</div>

<!-- Custom Tailwind CSS for microinteractions and scrollbar styling -->
<style>
  @keyframes pulse-slow {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  .animate-pulse-slow {
    animation: pulse-slow 3s infinite ease-in-out;
  }

  @keyframes ping-slow {
    0% {
      transform: scale(0.8);
      opacity: 1;
    }
    100% {
      transform: scale(2.2);
      opacity: 0;
    }
  }

  .animate-ping-slow {
    animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  @keyframes slide-in-bottom {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .animate-slide-in-bottom {
    animation: slide-in-bottom 0.5s ease-out;
  }

  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.5s ease-out;
  }

  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out;
  }

  @keyframes bounce-dot {
    0%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-5px);
    }
  }

  .animate-bounce-dot {
    animation: bounce-dot 1.4s infinite ease-in-out both;
  }

  .animation-delay-200 {
    animation-delay: 0.2s;
  }

  .animation-delay-400 {
    animation-delay: 0.4s;
  }

  /* Custom Scrollbar Styles */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc; /* thumb track */
  }

  .dark .scrollbar-thin {
    scrollbar-color: #4a5568 #1a202c; /* thumb track for dark mode */
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: #f7fafc; /* Light mode track */
    border-radius: 10px;
  }

  .dark .scrollbar-thin::-webkit-scrollbar-track {
    background: #1a202c; /* Dark mode track */
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #cbd5e0; /* Light mode thumb */
    border-radius: 10px;
    border: 2px solid #f7fafc; /* Light mode border around thumb */
  }

  .dark .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #4a5568; /* Dark mode thumb */
    border: 2px solid #1a202c; /* Dark mode border around thumb */
  }
</style>

Componente di navigazione permanente

Un componente di navigazione appiccicoso per l'e-commerce, caratterizzato da un design minimalista/piatto con colori vivaci. Include un logo, una barra di ricerca, un'icona del carrello e un avatar dell'utente, il tutto con Tailwind CSS per la reattività e il supporto del tema scuro.

Apri anteprima

                <nav class="sticky top-0 z-50 bg-white dark:bg-gray-900 shadow-md">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo -->
    <a href="#" class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">YourStore</a>

    <!-- Search Bar (hidden on small screens, shown on medium and up) -->
    <div class="hidden md:flex items-center flex-grow mx-4 relative">
      <input type="text" placeholder="Search products..." class="w-full py-2 pl-10 pr-4 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
      <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500 w-5 h-5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
    </div>

    <!-- Navigation Icons -->
    <div class="flex items-center space-x-4">
      <!-- Cart Icon -->
      <a href="#" class="relative p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition duration-300">
        <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 4a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
      </a>

      <!-- User Avatar -->
      <a href="#" class="p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      </a>

      <!-- Mobile Menu Button (shown on small screens) -->
      <button class="md:hidden p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition duration-300">
        <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" 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>

  <!-- Mobile Search Bar (shown on small screens, hidden on medium and up) -->
  <div class="md:hidden px-4 py-2">
    <div class="relative">
      <input type="text" placeholder="Search products..." class="w-full py-2 pl-10 pr-4 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
      <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500 w-5 h-5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
    </div>
  </div>
</nav>

Componente Badge

Un componente Badge semplice e reattivo progettato con un'estetica 3D e una combinazione di colori complementari per il consumo di blog e contenuti. Supporta la modalità oscura.

Apri anteprima

                <div class="flex flex-wrap p-5 justify-center">
    <div class="m-2 transition-transform transform hover:scale-105 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-lg p-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="font-semibold">Badge 1</span>
        </div>
        <p class="text-sm mt-2">This is a description for badge 1.</p>
    </div>
    <div class="m-2 transition-transform transform hover:scale-105 bg-red-500 dark:bg-red-700 text-white rounded-lg shadow-lg p-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="font-semibold">Badge 2</span>
        </div>
        <p class="text-sm mt-2">This is a description for badge 2.</p>
    </div>
    <div class="m-2 transition-transform transform hover:scale-105 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow-lg p-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="font-semibold">Badge 3</span>
        </div>
        <p class="text-sm mt-2">This is a description for badge 3.</p>
    </div>
</div>

Componente Componenti di visualizzazione dei contenuti

Un componente di visualizzazione dei contenuti semplice e vivace con microinterazioni, design reattivo e supporto per temi scuri, adatto per blog e consumo di contenuti. Utilizza picsum.photos per le immagini e randomuser.me per gli avatar.

Apri anteprima

                <div class="min-h-screen bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-black p-4 flex items-center justify-center">
  <div class="max-w-md w-full bg-white dark:bg-gray-700 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-purple-500/50 dark:hover:shadow-red-500/50">
    <div class="relative">
      <img class="w-full h-48 object-cover transition-opacity duration-300 hover:opacity-80" src="https://picsum.photos/600/400?random=1" alt="Article Thumbnail">
      <div class="absolute bottom-0 left-0 bg-black bg-opacity-50 dark:bg-opacity-70 text-white px-3 py-1 rounded-tr-lg text-sm font-semibold">
        Article
      </div>
    </div>
    <div class="p-5">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 transition-colors duration-300 hover:text-purple-700 dark:hover:text-red-400">
        The Future of Web Development
      </h3>
      <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed">
        Explore the exciting new trends and technologies shaping the web, from AI-powered tools to immersive user experiences.
      </p>
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-3">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-purple-500 dark:border-red-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
          <div>
            <p class="text-gray-800 dark:text-white font-semibold text-sm">John Doe</p>
            <p class="text-gray-500 dark:text-gray-400 text-xs">2 hours ago</p>
          </div>
        </div>
        <a href="#" class="text-purple-600 dark:text-red-400 hover:text-purple-800 dark:hover:text-red-600 transition-colors duration-300 font-medium text-sm flex items-center group">
          Read More
          <svg class="ml-1 w-4 h-4 transform transition-transform duration-300 group-hover:translate-x-1" 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="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
        </a>
      </div>
    </div>
  </div>
</div>

Componente di confronto dei prodotti

Un componente di confronto dei prodotti con stile di progettazione Skeuomorphism, combinazione di colori pastello e livello di complessità moderato, progettato per i dashboard. Include un design reattivo e il supporto per i temi scuri utilizzando Tailwind CSS.

Apri anteprima

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Comparison</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'selector',
            theme: {
                extend: {
                    colors: {
                        pastelPink: '#FFD1DC',
                        pastelBlue: '#AEC6CF',
                        pastelGreen: '#77DD77',
                        pastelYellow: '#FDFD96',
                        pastelPurple: '#B39EB5',
                        darkBackground: '#2D3748',
                        darkCard: '#4A5568',
                        darkText: '#E2E8F0'
                    },
                    boxShadow: {
                        skeuo: '9px 9px 18px #a7a7a7, -9px -9px 18px #ffffff',
                        skeuoDark: '9px 9px 18px #222B36, -9px -9px 18px #384350'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-200 dark:bg-darkBackground p-8">

    <div class="max-w-6xl mx-auto bg-white dark:bg-darkCard rounded-xl shadow-skeuo dark:shadow-skeuoDark p-8">
        <h1 class="text-3xl font-bold mb-8 text-gray-800 dark:text-darkText text-center">Product Comparison</h1>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

            <!-- Product 1 -->
            <div class="bg-pastelPink dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:scale-105 active:scale-95 ease-in-out border-t-4 border-l-4 border-gray-300 dark:border-gray-600">
                <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-darkText">Product Alpha</h2>
                <img src="https://picsum.photos/300/200?random=1" alt="Product Alpha" class="w-full h-48 object-cover rounded-md mb-4 shadow-inner">
                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature A</li>
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature B</li>
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-red-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg> Feature C</li>
                </ul>
                <div class="mt-6 text-center">
                    <button class="bg-pastelPurple dark:bg-purple-700 text-white font-bold py-2 px-6 rounded-full shadow-md text-lg active:shadow-none">
                        View Details
                    </button>
                </div>
            </div>

            <!-- Product 2 -->
            <div class="bg-pastelBlue dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:scale-105 active:scale-95 ease-in-out border-t-4 border-l-4 border-gray-300 dark:border-gray-600">
                <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-darkText">Product Beta</h2>
                <img src="https://picsum.photos/300/200?random=2" alt="Product Beta" class="w-full h-48 object-cover rounded-md mb-4 shadow-inner">
                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature A</li>
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature D</li>
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature E</li>
                </ul>
                <div class="mt-6 text-center">
                    <button class="bg-pastelPurple dark:bg-purple-700 text-white font-bold py-2 px-6 rounded-full shadow-md text-lg active:shadow-none">
                        View Details
                    </button>
                </div>
            </div>

            <!-- Product 3 -->
            <div class="bg-pastelGreen dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:scale-105 active:scale-95 ease-in-out border-t-4 border-l-4 border-gray-300 dark:border-gray-600">
                <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-darkText">Product Gamma</h2>
                <img src="https://picsum.photos/300/200?random=3" alt="Product Gamma" class="w-full h-48 object-cover rounded-md mb-4 shadow-inner">
                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature A</li>
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature F</li>
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature G</li>
                </ul>
                <div class="mt-6 text-center">
                    <button class="bg-pastelPurple dark:bg-purple-700 text-white font-bold py-2 px-6 rounded-full shadow-md text-lg active:shadow-none">
                        View Details
                    </button>
                </div>
            </div>

        </div>
    </div>

</body>
</html>

Componente Schede

Un componente Schede reattivo con un design scheumorfico, una combinazione di colori analoga e un supporto per temi scuri, adatto per siti Web aziendali professionali. Il componente utilizza Tailwind CSS per lo stile e non include JavaScript.

Apri anteprima

                <div class="bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-950 p-8 rounded-xl shadow-2xl m-4
            font-sans text-gray-800 dark:text-gray-200">

  <div class="flex border-b-2 border-gray-300 dark:border-gray-700 mb-6 space-x-2">
    <!-- Tab 1 Button -->
    <input type="radio" name="tabs" id="tab1" class="hidden" checked>
    <label for="tab1" class="relative block cursor-pointer px-6 py-3 text-lg font-semibold
                          text-gray-600 dark:text-gray-400
                          hover:text-amber-700 hover:dark:text-amber-300
                          transition-colors duration-300
                          peer-checked:text-amber-800 peer-checked:dark:text-white
                          peer-checked:bg-gradient-to-b peer-checked:from-white peer-checked:via-gray-100 peer-checked:to-gray-200
                          peer-checked:dark:from-gray-700 peer-checked:dark:via-gray-800 peer-checked:dark:to-gray-900
                          peer-checked:border-x peer-checked:border-t peer-checked:border-gray-300 peer-checked:dark:border-gray-700
                          rounded-tl-lg rounded-tr-lg
                          before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1 before:bg-transparent
                          peer-checked:before:bg-amber-500 peer-checked:before:dark:bg-amber-400
                          peer-checked:before:shadow-[0_0_15px_rgba(251,191,36,0.6)]">
      Company Profile
    </label>

    <!-- Tab 2 Button -->
    <input type="radio" name="tabs" id="tab2" class="hidden">
    <label for="tab2" class="relative block cursor-pointer px-6 py-3 text-lg font-semibold
                          text-gray-600 dark:text-gray-400
                          hover:text-amber-700 hover:dark:text-amber-300
                          transition-colors duration-300
                          peer-checked:text-amber-800 peer-checked:dark:text-white
                          peer-checked:bg-gradient-to-b peer-checked:from-white peer-checked:via-gray-100 peer-checked:to-gray-200
                          peer-checked:dark:from-gray-700 peer-checked:dark:via-gray-800 peer-checked:dark:to-gray-900
                          peer-checked:border-x peer-checked:border-t peer-checked:border-gray-300 peer-checked:dark:border-gray-700
                          rounded-tl-lg rounded-tr-lg
                          before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1 before:bg-transparent
                          peer-checked:before:bg-amber-500 peer-checked:before:dark:bg-amber-400
                          peer-checked:before:shadow-[0_0_15px_rgba(251,191,36,0.6)]">
      Our Services
    </label>

    <!-- Tab 3 Button -->
    <input type="radio" name="tabs" id="tab3" class="hidden">
    <label for="tab3" class="relative block cursor-pointer px-6 py-3 text-lg font-semibold
                          text-gray-600 dark:text-gray-400
                          hover:text-amber-700 hover:dark:text-amber-300
                          transition-colors duration-300
                          peer-checked:text-amber-800 peer-checked:dark:text-white
                          peer-checked:bg-gradient-to-b peer-checked:from-white peer-checked:via-gray-100 peer-checked:to-gray-200
                          peer-checked:dark:from-gray-700 peer-checked:dark:via-gray-800 peer-checked:dark:to-gray-900
                          peer-checked:border-x peer-checked:border-t peer-checked:border-gray-300 peer-checked:dark:border-gray-700
                          rounded-tl-lg rounded-tr-lg
                          before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1 before:bg-transparent
                          peer-checked:before:bg-amber-500 peer-checked:before:dark:bg-amber-400
                          peer-checked:before:shadow-[0_0_15px_rgba(251,191,36,0.6)]">
      Contact Us
    </label>
  </div>

  <!-- Tab Content 1 -->
  <div role="tabpanel" aria-labelledby="tab1" class="tab-content" id="content1">
    <h2 class="text-3xl font-bold text-amber-700 dark:text-amber-300 mb-4
               drop-shadow-lg">About Our Company</h2>
    <p class="mb-6 leading-relaxed text-gray-700 dark:text-gray-300">
      Founded in 2005, we have grown into a leading innovator in sustainable energy solutions.
      Our commitment to excellence and customer satisfaction drives us to deliver cutting-edge technologies.
      We believe in a future powered by clean, renewable resources, and we are dedicated to making that a reality.
    </p>
    <img src="https://picsum.photos/id/150/800/400" alt="Modern Office Building" class="rounded-lg shadow-xl mb-6">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div>
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Our Mission</h3>
        <p class="text-gray-600 dark:text-gray-400">To empower businesses and communities with reliable,
          eco-friendly energy alternatives, fostering a greener planet for generations to come.</p>
      </div>
      <div>
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Our Vision</h3>
        <p class="text-gray-600 dark:text-gray-400">To be the global leader in renewable energy, recognized for our
          innovation, integrity, and significant positive impact on the environment.</p>
      </div>
    </div>
  </div>

  <!-- Tab Content 2 -->
  <div role="tabpanel" aria-labelledby="tab2" class="tab-content hidden" id="content2">
    <h2 class="text-3xl font-bold text-amber-700 dark:text-amber-300 mb-4
               drop-shadow-lg">Comprehensive Service Portfolio</h2>
    <p class="mb-6 leading-relaxed text-gray-700 dark:text-gray-300">
      We offer a wide array of services designed to meet the diverse needs of our clients,
      from initial consultation and system design to installation and ongoing maintenance.
      Our solutions are tailored to maximize efficiency and deliver sustainable results.
    </p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
                  border border-gray-200 dark:border-gray-700
                  hover:shadow-xl transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Solar Solutions</h3>
        <p class="text-gray-600 dark:text-gray-400">Residential and commercial solar panel installation and maintenance.</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
                  border border-gray-200 dark:border-gray-700
                  hover:shadow-xl transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Wind Energy Consulting</h3>
        <p class="text-gray-600 dark:text-gray-400">Site assessment, turbine selection, and project management.</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
                  border border-gray-200 dark:border-gray-700
                  hover:shadow-xl transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Energy Audits</h3>
        <p class="text-gray-600 dark:text-gray-400">Thorough analysis to identify energy inefficiencies and recommend improvements.</p>
      </div>
    </div>
    <img src="https://picsum.photos/id/152/800/400" alt="Renewable Energy Solutions" class="rounded-lg shadow-xl">
  </div>

  <!-- Tab Content 3 -->
  <div role="tabpanel" aria-labelledby="tab3" class="tab-content hidden" id="content3">
    <h2 class="text-3xl font-bold text-amber-700 dark:text-amber-300 mb-4
               drop-shadow-lg">Connect With Us</h2>
    <p class="mb-6 leading-relaxed text-gray-700 dark:text-gray-300">
      We are always eager to hear from you. Whether you have a question, a project inquiry, or just want to chat,
      our team is ready to assist. Reach out to us through the methods below!
    </p>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
                  border border-gray-200 dark:border-gray-700">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Our Office</h3>
        <p class="text-gray-600 dark:text-gray-400">123 Eco-Friendly Lane, Green City, GC 12345</p>
        <p class="text-gray-600 dark:text-gray-400">United States</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
                  border border-gray-200 dark:border-gray-700">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Get in Touch</h3>
        <p class="text-gray-600 dark:text-gray-400">Email: <a href="mailto:[email protected]"
                                                              class="text-amber-600 dark:text-amber-400 hover:underline">[email protected]</a></p>
        <p class="text-gray-600 dark:text-gray-400">Phone: (123) 456-7890</p>
      </div>
    </div>
    <div class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Service Representative"
           class="w-20 h-20 rounded-full shadow-lg border-4 border-amber-400 dark:border-amber-500">
      <div>
        <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe, Lead Representative</p>
        <p class="text-gray-600 dark:text-gray-400">"We're here to help you power your future."</p>
      </div>
    </div>
  </div>

</div>

<style>
  /* Base styling for the tab content - hidden by default */
  .tab-content {
    display: none;
  }

  /* Show the content associated with the checked radio button */
  input[name="tabs"]:checked + label + .tab-content {
    display: block;
  }

  /* If using sibling combinator for tab content not directly adjacent */
  input#tab1:checked ~ #content1,
  input#tab2:checked ~ #content2,
  input#tab3:checked ~ #content3 {
    display: block;
  }
</style>

Componente Notifiche

Un componente Notifiche caratterizzato da un design a morfismo vetroscopico con una combinazione di colori monocromatica, su misura per applicazioni web aziendali/aziendali. Il componente include vari elementi interattivi e supporta la modalità oscura.

Apri anteprima

                <div class="flex flex-col items-center justify-center p-8 bg-gray-900 text-white min-h-screen">
    <div class="bg-gray-800 backdrop-blur-md bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-2xl font-bold mb-4">Notifications</h2>
        <!-- Notification Item -->
        <div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div class="flex-1">
                <p class="font-semibold">John Doe</p>
                <p class="text-sm">You have a meeting scheduled at 3 PM.</p>
                <span class="text-xs text-gray-400">10 minutes ago</span>
            </div>
        </div>
        <!-- Notification Item -->
        <div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
            <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div class="flex-1">
                <p class="font-semibold">Jane Smith</p>
                <p class="text-sm">Your invoice has been paid.</p>
                <span class="text-xs text-gray-400">15 minutes ago</span>
            </div>
        </div>
        <!-- Notification Item -->
        <div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
            <img src="https://randomuser.me/api/portraits/men/13.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div class="flex-1">
                <p class="font-semibold">Mike Johnson</p>
                <p class="text-sm">New comment on your post.</p>
                <span class="text-xs text-gray-400">30 minutes ago</span>
            </div>
        </div>
        <!-- Notification Item -->
        <div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
            <img src="https://randomuser.me/api/portraits/women/14.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div class="flex-1">
                <p class="font-semibold">Emily Davis</p>
                <p class="text-sm">Project deadline is approaching.</p>
                <span class="text-xs text-gray-400">1 hour ago</span>
            </div>
        </div>
        <div class="mt-4 text-center">
            <button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                View All Notifications
            </button>
        </div>
    </div>
</div>

Componente Pulsanti di condivisione social

Un componente minimalista dei pulsanti di condivisione social progettato per le dashboard, caratterizzato da una combinazione di colori vivaci e un design reattivo, con supporto per la modalità scura.

Apri anteprima

                <div class="flex items-center justify-center space-x-4 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Share this Dashboard</h2>
  <div class="flex space-x-2">
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-red-500 text-white hover:bg-red-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=1" alt="Share on Facebook" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=2" alt="Share on Twitter" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-green-500 text-white hover:bg-green-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=3" alt="Share on LinkedIn" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-yellow-500 text-white hover:bg-yellow-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=4" alt="Share via Email" class="w-5 h-5" />
    </a>
  </div>
</div>

Torna all'inizio Componente pulsante

Un componente minimalista e piatto del pulsante Torna all'inizio per i cruscotti, caratterizzato da una combinazione di colori monocromatica. È moderatamente complesso con funzionalità interattive, un design reattivo e il supporto per i temi scuri, costruito esclusivamente con HTML e Tailwind CSS.

Apri anteprima

                <div class="fixed bottom-4 right-4">
  <a href="#" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-full shadow-md hover:bg-gray-400 dark:hover:bg-gray-600 transition-colors duration-300 ease-in-out flex items-center justify-center">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
    </svg>
  </a>
</div>

Categorie