Alle Komponenten

Zeitleisten-Komponente

Eine minimalistische/flache Design-Zeitleistenkomponente zur Präsentation von Arbeiten oder Produkten in einem Portfolio, die mit Reaktionsfähigkeit und Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS entwickelt wurde.

Vorschau öffnen

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

Chat-Fenster-Komponente

Eine reaktionsschnelle Chat-Fensterkomponente mit einem triadischen Farbschema, Mikrointeraktionen und Unterstützung für den Dunkelmodus, die für den E-Commerce entwickelt wurde. Es verfügt über einen Chat-Header, eine Nachrichtenliste mit Absender-/Empfängernachrichten und eine Nachrichteneingabe.

Vorschau öffnen

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

Sticky Navigation-Komponente

Eine klebrige Navigationskomponente für den E-Commerce mit einem minimalistischen/flachen Design mit leuchtenden Farben. Es enthält ein Logo, eine Suchleiste, ein Warenkorbsymbol und einen Benutzer-Avatar, die alle mit Tailwind CSS gestaltet sind, um Reaktionsfähigkeit und Unterstützung für dunkle Themen zu gewährleisten.

Vorschau öffnen

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

Badges-Komponente

Eine einfache und reaktionsschnelle Badges-Komponente, die mit einer 3D-Ästhetik und einem komplementären Farbschema für den Konsum von Blogs und Inhalten entwickelt wurde. Unterstützt den Dunkelmodus.

Vorschau öffnen

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

Komponente "Komponenten für die Inhaltsanzeige"

Eine einfache und lebendige Komponente zur Anzeige von Inhalten mit Mikrointeraktionen, responsivem Design und Unterstützung für dunkle Themen, die sich für Blogs und den Konsum von Inhalten eignet. Verwendet picsum.photos für Bilder und randomuser.me für Avatare.

Vorschau öffnen

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

Produktvergleichskomponente

Eine Produktvergleichskomponente mit Skeuomorphismus-Designstil, Pastellfarbschema und mittlerer Komplexitätsstufe, die für Dashboards entwickelt wurde. Es enthält Responsive Design und Unterstützung für dunkle Themen mit Tailwind CSS.

Vorschau öffnen

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

Tabs-Komponente

Eine responsive Tabs-Komponente mit einem skeuomorphen Design, einem analogen Farbschema und einer Unterstützung für dunkle Themen, die für professionelle Business-Websites geeignet ist. Die Komponente verwendet Tailwind CSS für das Styling und enthält kein JavaScript.

Vorschau öffnen

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

Komponente "Benachrichtigungen"

Eine Benachrichtigungskomponente mit einem glasmorphischen Design mit einem monochromatischen Farbschema, das auf Geschäfts-/Unternehmenswebanwendungen zugeschnitten ist. Die Komponente enthält verschiedene interaktive Elemente und unterstützt den Dunkelmodus.

Vorschau öffnen

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

Komponente "Social-Share-Buttons"

Eine minimalistische Social-Share-Buttons-Komponente, die für Dashboards entwickelt wurde, mit einem lebendigen Farbschema und responsivem Design sowie Unterstützung für den Dunkelmodus.

Vorschau öffnen

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

Zurück zum Anfang Schaltflächenkomponente

Eine minimalistische und flache Back to Top Button-Komponente für Dashboards mit einem monochromen Farbschema. Es ist mäßig komplex mit interaktiven Funktionen, einem responsiven Design und Unterstützung für dunkle Themen, die ausschließlich mit HTML und Tailwind CSS erstellt wurden.

Vorschau öffnen

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

Kategorien