Alle Komponenten

Videoplayer-Komponente

Ein Videoplayer im Glassmorphism-Stil mit durchscheinenden Elementen aus Milchglas, pastellfarbenem Farbschema und einer komplexen Benutzeroberfläche, die für Geschäfts-/Unternehmenswebsites geeignet ist. Es unterstützt responsives Design und ein dunkles Theme mit Tailwind CSS ohne JavaScript.

Vorschau öffnen

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="relative w-full max-w-4xl bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-2xl shadow-xl overflow-hidden border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20">
    <!-- Video Player Header -->
    <div class="p-4 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border-b border-white border-opacity-30 dark:border-gray-600 dark:border-opacity-30 flex items-center justify-between">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Corporate Presentation</h2>
      <div class="flex space-x-2">
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Main Video Area -->
    <div class="aspect-w-16 aspect-h-9 w-full bg-black relative">
      <img src="https://picsum.photos/seed/picsum/1280/720" alt="Video Thumbnail" class="absolute inset-0 w-full h-full object-cover">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 dark:bg-opacity-60">
        <button class="p-4 rounded-full bg-white bg-opacity-60 dark:bg-gray-700 dark:bg-opacity-60 text-gray-800 dark:text-white hover:scale-110 transition-transform transform shadow-lg">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Video Controls -->
    <div class="p-4 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border-t border-white border-opacity-30 dark:border-gray-600 dark:border-opacity-30 flex items-center justify-between flex-wrap">
      <div class="flex items-center space-x-4 mb-2 sm:mb-0 w-full sm:w-auto">
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </button>
        <span class="text-gray-800 dark:text-white text-sm">0:00 / 5:30</span>
      </div>
      <div class="flex-grow mx-4 mb-2 sm:mb-0">
        <div class="h-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50">
          <div class="h-full w-1/3 bg-pink-300 dark:bg-pink-400 rounded-full"></div>
        </div>
      </div>
      <div class="flex items-center space-x-2 w-full sm:w-auto justify-end">
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors hidden sm:block">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path d="M11 5a2 2 0 11-4 0 2 2 0 014 0zM10 3a1 1 0 100 2 1 1 0 000-2zm0 13a1 1 0 100 2 1 1 0 000-2z" />
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM5.5 8.5C5.224 8.5 5 8.276 5 8s.224-.5.5-.5.5.224.5.5-.224.5-.5.5zM14.5 8.5C14.224 8.5 14 8.276 14 8s.224-.5.5-.5.5.224.5.5-.224.5-.5.5z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V5zm1.48 8.163a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75h-.01a.75.75 0 01-.75-.75v-.01zm4.717 0a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75h-.01a.75.75 0 01-.75-.75v-.01zm4.717 0a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75h-.01a.75.75 0 01-.75-.75v-.01z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Related Videos / Playlist (Example) -->
    <div class="p-4 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-md rounded-b-2xl border-t border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20 hidden md:block">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Next Up</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Related Video Item -->
        <div class="flex items-center space-x-3 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 rounded-lg p-3 shadow-sm hover:bg-opacity-60 dark:hover:bg-opacity-60 transition-colors">
          <img src="https://picsum.photos/seed/related1/80/45" alt="Related Video" class="rounded w-20 h-auto object-cover">
          <div>
            <p class="text-sm font-medium text-gray-800 dark:text-white">Future of Business AI</p>
            <p class="text-xs text-gray-600 dark:text-gray-300">John Doe • 12K views</p>
          </div>
        </div>
        <div class="flex items-center space-x-3 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 rounded-lg p-3 shadow-sm hover:bg-opacity-60 dark:hover:bg-opacity-60 transition-colors">
          <img src="https://picsum.photos/seed/related2/80/45" alt="Related Video" class="rounded w-20 h-auto object-cover">
          <div>
            <p class="text-sm font-medium text-gray-800 dark:text-white">Marketing Strategies 2024</p>
            <p class="text-xs text-gray-600 dark:text-gray-300">Jane Smith • 8K views</p>
          </div>
        </div>
        <div class="flex items-center space-x-3 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 rounded-lg p-3 shadow-sm hover:bg-opacity-60 dark:hover:bg-opacity-60 transition-colors">
          <img src="https://picsum.photos/seed/related3/80/45" alt="Related Video" class="rounded w-20 h-auto object-cover">
          <div>
            <p class="text-sm font-medium text-gray-800 dark:text-white">Team Collaboration Tools</p>
            <p class="text-xs text-gray-600 dark:text-gray-300">Mike Johnson • 5K views</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Komponente des Einkaufswagens

Eine Warenkorbkomponente im Retro-/Vintage-Stil mit Graustufen-Farbschema, moderater Komplexität und responsivem Design mit Unterstützung für dunkle Themen. Entwickelt für Business-/Corporate-Websites, die Tailwind CSS verwenden. Kein JavaScript, nur HTML mit Tailwind-Klassen. Verwendet picsum.photos für Bilder und randomuser.me für Avatare.

Vorschau öffnen

                <div class="antialiased dark:bg-gray-900 dark:text-gray-200">
  <div class="h-full bg-gray-100 dark:bg-gray-800 p-8">
    <div class="mx-auto max-w-3xl">
      <header class="flex items-center justify-between">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Your Cart</h1>
        <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Continue Shopping</a>
      </header>

      <div class="mt-8">
        <ul class="space-y-4">
          <li class="flex items-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
            <img src="https://picsum.photos/seed/product1/80/80" alt="Nike Air Force 1" class="h-20 w-20 rounded-lg object-cover mr-4">
            <div class="flex-grow">
              <h3 class="text-base font-semibold text-gray-900 dark:text-white">Nike Air Force 1</h3>
              <p class="text-sm text-gray-500 dark:text-gray-300">Size: 10</p>
              <p class="text-sm text-gray-500 dark:text-gray-300">Color: White</p>
              <div class="mt-2 flex items-center justify-between">
                <span class="text-base font-bold text-gray-900 dark:text-white">$120.00</span>
                <div class="flex items-center">
                  <button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">-</button>
                  <input type="text" class="w-10 border-0 bg-transparent text-center text-sm font-medium text-gray-900 dark:text-white" value="1" readonly>
                  <button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">+</button>
                </div>
              </div>
            </div>
            <button class="ml-4 text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300">
              <svg class="h-5 w-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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
            </button>
          </li>
          <li class="flex items-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
            <img src="https://picsum.photos/seed/product2/80/80" alt="Apple Watch Series 7" class="h-20 w-20 rounded-lg object-cover mr-4">
            <div class="flex-grow">
              <h3 class="text-base font-semibold text-gray-900 dark:text-white">Apple Watch Series 7</h3>
              <p class="text-sm text-gray-500 dark:text-gray-300">Color: Space Gray</p>
              <p class="text-sm text-gray-500 dark:text-gray-300">Band: Solo Loop</p>
              <div class="mt-2 flex items-center justify-between">
                <span class="text-base font-bold text-gray-900 dark:text-white">$399.00</span>
                <div class="flex items-center">
                  <button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">-</button>
                  <input type="text" class="w-10 border-0 bg-transparent text-center text-sm font-medium text-gray-900 dark:text-white" value="1" readonly>
                  <button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">+</button>
                </div>
              </div>
            </div>
            <button class="ml-4 text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300">
              <svg class="h-5 w-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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
            </button>
          </li>
        </ul>
      </div>

      <div class="mt-8 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
        <div class="flex items-center justify-between">
          <p class="text-base font-semibold text-gray-900 dark:text-white">Subtotal</p>
          <p class="text-base font-semibold text-gray-900 dark:text-white">$519.00</p>
        </div>
        <div class="mt-2 flex items-center justify-between">
          <p class="text-base font-semibold text-gray-900 dark:text-white">Shipping</p>
          <p class="text-base font-semibold text-gray-900 dark:text-white">Free</p>
        </div>
        <div class="mt-4 flex items-center justify-between border-t border-gray-200 pt-4 dark:border-gray-600">
          <p class="text-xl font-bold text-gray-900 dark:text-white">Total</p>
          <p class="text-xl font-bold text-gray-900 dark:text-white">$519.00</p>
        </div>
      </div>

      <div class="mt-8 flex justify-end">
        <button type="button" class="rounded-lg bg-gray-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800">Proceed to Checkout</button>
      </div>
    </div>
  </div>
</div>

Galerie-Komponente

Eine responsive Galeriekomponente mit Glassmorphism-Design, analogem Farbschema, komplexem Layout und Unterstützung für dunkle Themen für den E-Commerce.

Vorschau öffnen

                <div class="bg-gradient-to-br from-purple-100 via-purple-200 to-pink-100 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 min-h-screen p-8">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold text-center text-purple-800 dark:text-purple-300 mb-12 drop-shadow-lg">Product Gallery</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Product Card 1 -->
      <div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden transform transition-all duration-500 hover:scale-105 group relative">
        <div class="p-6 relative z-10">
          <img src="https://picsum.photos/id/237/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-lg mb-4 shadow-md group-hover:shadow-xl transition-shadow duration-300">
          <h2 class="text-2xl font-semibold text-purple-900 dark:text-purple-200 mb-2">Product Title 1</h2>
          <p class="text-purple-800 dark:text-purple-300 text-lg mb-4">A short description of the product, highlighting its key features.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-3xl font-bold text-purple-900 dark:text-purple-100">$99.99</span>
            <span class="text-sm text-purple-700 dark:text-purple-300 line-through">$120.00</span>
          </div>
          <div class="flex space-x-2 text-purple-700 dark:text-purple-300 mb-4">
            <span class="text-yellow-400">★</span>
            <span class="text-yellow-400">★</span>
            <span class="text-yellow-400">★</span>
            <span class="text-yellow-400">★</span>
            <span class="text-gray-400">★</span>
            <span>(4.5 stars)</span>
          </div>
          <button class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-300 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">Add to Cart</button>
        </div>
        <div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-pink-400 opacity-20 group-hover:opacity-40 transition-opacity duration-300 z-0"></div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden transform transition-all duration-500 hover:scale-105 group relative">
        <div class="p-6 relative z-10">
          <img src="https://picsum.photos/id/238/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-lg mb-4 shadow-md group-hover:shadow-xl transition-shadow duration-300">
          <h2 class="text-2xl font-semibold text-purple-900 dark:text-purple-200 mb-2">Product Title 2</h2>
          <p class="text-purple-800 dark:text-purple-300 text-lg mb-4">Another great product with amazing features and benefits you\

Komponente des Checkout-Formulars

Eine minimalistische, flache Design-Checkout-Formularkomponente für ein Portfolio mit Erdtönen, responsivem Design, Unterstützung für den Dunkelmodus und mehreren interaktiven Elementen. Verwendet HTML und Tailwind CSS.

Vorschau öffnen

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 sm:p-8 flex items-center justify-center font-sans">
  <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 sm:p-8 lg:p-10 w-full max-w-md">
    <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 text-center">Checkout</h2>

    <!-- Progress Stepper -->
    <div class="flex justify-between items-center mb-8">
      <div class="text-center">
        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-green-500 text-white flex items-center justify-center mx-auto mb-1 text-sm sm:text-base">1</div>
        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Shipping</p>
      </div>
      <div class="flex-1 h-1 bg-gray-300 dark:bg-gray-700 mx-2"></div>
      <div class="text-center">
        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-600 dark:text-gray-400 flex items-center justify-center mx-auto mb-1 text-sm sm:text-base">2</div>
        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Payment</p>
      </div>
      <div class="flex-1 h-1 bg-gray-300 dark:bg-gray-700 mx-2"></div>
      <div class="text-center">
        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-600 dark:text-gray-400 flex items-center justify-center mx-auto mb-1 text-sm sm:text-base">3</div>
        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Review</p>
      </div>
    </div>

    <!-- Shipping Information Form -->
    <form>
      <div class="mb-4">
        <label for="fullName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>
        <input type="text" id="fullName" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="John Doe">
      </div>

      <div class="mb-4">
        <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Address</label>
        <input type="text" id="address" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="1234 Main St">
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
        <div>
          <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">City</label>
          <input type="text" id="city" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Anytown">
        </div>
        <div>
          <label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">State / Province</label>
          <input type="text" id="state" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="CA">
        </div>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
        <div>
          <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Zip / Postal Code</label>
          <input type="text" id="zip" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="12345">
        </div>
        <div>
          <label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Country</label>
          <select id="country" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100">
            <option>United States</option>
            <option>Canada</option>
            <option>Mexico</option>
            <option>Other</option>
          </select>
        </div>
      </div>

      <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-300 ease-in-out">
        Continue to Payment
      </button>
    </form>

    <!-- Product Summary (Example, can be expanded) -->
    <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
      <h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-100">Order Summary</h3>
      <div class="flex justify-between mb-2">
        <span class="text-gray-600 dark:text-gray-400">Subtotal:</span>
        <span class="text-gray-800 dark:text-gray-100">$99.00</span>
      </div>
      <div class="flex justify-between mb-2">
        <span class="text-gray-600 dark:text-gray-400">Shipping:</span>
        <span class="text-gray-800 dark:text-gray-100">$7.00</span>
      </div>
      <div class="flex justify-between font-bold text-lg border-t border-gray-300 dark:border-gray-600 pt-2 mt-4">
        <span class="text-gray-800 dark:text-gray-100">Total:</span>
        <span class="text-gray-800 dark:text-gray-100">$106.00</span>
      </div>
    </div>

  </div>
</div>

360°-Viewer-Komponente

Eine 360-Grad-Betrachterkomponente mit Glassmorphism-Design, monochromatischem Farbschema und moderater Komplexität. Es wurde für Blog-/Content-Zwecke entwickelt, ist reaktionsschnell und unterstützt den Dunkelmodus mit Tailwind CSS. Es ist kein JavaScript enthalten, nur HTML mit Tailwind-Klassen. Verwendet picsum.photos für Bilder.

Vorschau öffnen

                
<div class="dark:bg-gray-900 bg-gray-100 flex items-center justify-center min-h-screen p-4">
  <div class="bg-white dark:bg-gray-800 backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 rounded-xl shadow-lg p-6 w-full max-w-md border border-gray-200 dark:border-gray-700">
    <div class="text-center mb-6">
      <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-2">360° Product Viewer</h2>
      <p class="text-gray-600 dark:text-gray-300">Experience the product from every angle.</p>
    </div>

    <div class="relative mb-6 rounded-lg overflow-hidden border border-gray-300 dark:border-gray-600 aspect-video">
      <!-- Placeholder for 360 viewer - In a real scenario, this would be a series of images or a specialized viewer library -->
      <img src="https://picsum.photos/600/400?random=1" alt="Product View 1" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-100" id="viewer-image">
      <img src="https://picsum.photos/600/400?random=2" alt="Product View 2" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-0">
      <img src="https://picsum.photos/600/400?random=3" alt="Product View 3" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-0">
    </div>

    <div class="flex justify-center space-x-2 mb-6">
      <button class="p-3 rounded-full bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition duration-300">
        <svg class="w-6 h-6 text-white" 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="M15 19l-7-7 7-7"></path></svg>
      </button>
      <button class="p-3 rounded-full bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition duration-300">
        <svg class="w-6 h-6 text-white" 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="M9 5l7 7-7 7"></path></svg>
      </button>
    </div>

    <div class="text-center text-gray-700 dark:text-gray-300 text-sm">
      <p>Drag or use arrows to rotate view (interactive features would require JavaScript).</p>
    </div>
  </div>
</div>

Komponente "Warnmeldungen"

Bei dieser Komponente handelt es sich um eine Warnmeldung mit einem minimalistischen/flachen Design, einem Farbschema in Erdtönen und einem komplexen Layout. Es wurde für Social-Media-Schnittstellen entwickelt und ist reaktionsschnell mit Unterstützung für dunkle Themen. Es verwendet Tailwind CSS für das Styling und enthält mehrere interaktive Elemente.

Vorschau öffnen

                
<div class="space-y-4 p-4 max-w-md mx-auto">

  <!-- Success Alert -->
  <div class="flex items-center p-4 bg-green-100 text-green-800 rounded-lg shadow-md dark:bg-green-700 dark:text-green-100" role="alert">
    <svg class="w-6 h-6 mr-3" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    <div>
      <div class="font-bold">Success! Your post has been shared.</div>
      <div class="text-sm">You've reached 120 new people.</div>
    </div>
    <button class="ml-auto text-green-800 dark:text-green-100 hover:text-green-600 dark:hover:text-green-300 focus:outline-none">
      <svg class="w-4 h-4" 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="M6 18L18 6M6 6l12 12"></path></svg>
    </button>
  </div>

  <!-- Warning Alert -->
  <div class="flex items-center p-4 bg-yellow-100 text-yellow-800 rounded-lg shadow-md dark:bg-yellow-700 dark:text-yellow-100" role="alert">
    <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.332 16c-.77 1.333.192 3 1.732 3z"></path></svg>
    <div>
      <div class="font-bold">Warning: Some images failed to upload.</div>
      <div class="text-sm">Please check your network connection.</div>
    </div>
    <button class="ml-auto text-yellow-800 dark:text-yellow-100 hover:text-yellow-600 dark:hover:text-yellow-300 focus:outline-none">
      <svg class="w-4 h-4" 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="M6 18L18 6M6 6l12 12"></path></svg>
    </button>
  </div>

  <!-- Error Alert with Avatar -->
  <div class="flex items-start p-4 bg-red-100 text-red-800 rounded-lg shadow-md dark:bg-red-700 dark:text-red-100" role="alert">
    <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    <div>
      <div class="font-bold">Error: Message delivery failed.</div>
      <div class="text-sm">User

Komponente "Neumorphism-Tabs"

Eine neumorphe Registerkartenkomponente für Dashboard-Benutzeroberflächen mit einem Graustufen-Farbschema, responsivem Design und Unterstützung für dunkle Designs, die nur HTML und Tailwind CSS verwenden.

Vorschau öffnen

                <div class="p-4 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-2xl bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-6">
    <div class="flex space-x-4 mb-6">
      <button class="flex-1 py-3 px-4 rounded-lg text-gray-700 dark:text-gray-300 text-sm font-medium 
                     shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark 
                     hover:shadow-neumorphic-light hover:dark:shadow-neumorphic-dark 
                     focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
                     transition ease-in-out duration-300">
        Overview
      </button>
      <button class="flex-1 py-3 px-4 rounded-lg text-gray-800 dark:text-white text-sm font-medium 
                     bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark
                     focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
                     transition ease-in-out duration-300">
        Analytics
      </button>
      <button class="flex-1 py-3 px-4 rounded-lg text-gray-700 dark:text-gray-300 text-sm font-medium 
                     shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark 
                     hover:shadow-neumorphic-light hover:dark:shadow-neumorphic-dark 
                     focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
                     transition ease-in-out duration-300">
        Reports
      </button>
    </div>

    <div class="p-6 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
      <!-- Content for the active tab -->
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Analytics Dashboard</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Card 1 -->
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Total Users</h4>
          <p class="text-2xl font-bold text-gray-900 dark:text-white">1,234,567</p>
        </div>
        <!-- Card 2 -->
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Page Views</h4>
          <p class="text-2xl font-bold text-gray-900 dark:text-white">5,678,901</p>
        </div>
        <!-- Card 3 -->
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Bounce Rate</h4>
          <p class="text-2xl font-bold text-gray-900 dark:text-white">32.5%</p>
        </div>
      </div>
    </div>

  </div>
  <style>
    .shadow-neumorphic-light {
      box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 6px 6px 12px #1a1a1a, -6px -6px 12px #4a4a4a;
    }
    .shadow-neumorphic-inset-light {
      box-shadow: inset 6px 6px 12px #b0b0b0, inset -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-inset-dark {
      box-shadow: inset 6px 6px 12px #1a1a1a, inset -6px -6px 12px #4a4a4a;
    }
  </style>
</div>

Komponente "Warnmeldungen"

Eine Warnmeldungskomponente im Retro-/Vintage-Stil für Geschäfts-/Unternehmenswebsites mit Erdtönen und responsivem Design mit Unterstützung für den Dunkelmodus.

Vorschau öffnen

                <div class="max-w-md mx-auto p-4">
  </div>
  
  <div class="bg-stone-200 dark:bg-stone-800 p-4 rounded-lg shadow-md mb-4 border border-stone-300 dark:border-stone-700">
    <div class="flex items-center space-x-3">
      <div class="text-amber-600 dark:text-amber-400">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
      </div>
      <div>
        <h4 class="text-stone-800 dark:text-stone-200 text-lg font-semibold">Important Update</h4>
        <p class="text-stone-600 dark:text-stone-400 text-sm">Our terms of service have been updated. Please review the changes at your earliest convenience.</p>
      </div>
    </div>
    <div class="mt-4 flex justify-end space-x-3">
      <button class="px-4 py-2 bg-stone-300 dark:bg-stone-700 text-stone-800 dark:text-stone-200 rounded-md hover:bg-stone-400 dark:hover:bg-stone-600 transition duration-300">Dismiss</button>
      <button class="px-4 py-2 bg-amber-600 text-white rounded-md hover:bg-amber-700 transition duration-300">Learn More</button>
    </div>
  </div>
  
  <div class="bg-green-200 dark:bg-green-800 p-4 rounded-lg shadow-md mb-4 border border-green-300 dark:border-green-700">
    <div class="flex items-center space-x-3">
      <div class="text-green-700 dark:text-green-400">
        <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div>
        <h4 class="text-green-800 dark:text-green-200 text-lg font-semibold">Success!</h4>
        <p class="text-green-600 dark:text-green-400 text-sm">Your profile has been updated successfully.</p>
      </div>
    </div>
    <div class="mt-4 flex justify-end">
      <button class="px-4 py-2 bg-green-300 dark:bg-green-700 text-green-800 dark:text-green-200 rounded-md hover:bg-green-400 dark:hover:bg-green-600 transition duration-300">Close</button>
    </div>
  </div>

  <div class="bg-red-200 dark:bg-red-800 p-4 rounded-lg shadow-md mb-4 border border-red-300 dark:border-red-700">
    <div class="flex items-center space-x-3">
      <div class="text-red-700 dark:text-red-400">
        <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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div>
        <h4 class="text-red-800 dark:text-red-200 text-lg font-semibold">Error Occurred</h4>
        <p class="text-red-600 dark:text-red-400 text-sm">Failed to process your request. Please try again later.</p>
      </div>
    </div>
    <div class="mt-4 flex justify-end">
      <button class="px-4 py-2 bg-red-300 dark:bg-red-700 text-red-800 dark:text-red-200 rounded-md hover:bg-red-400 dark:hover:bg-red-600 transition duration-300">Dismiss</button>
    </div>
  </div>

  <div class="bg-blue-200 dark:bg-blue-800 p-4 rounded-lg shadow-md mb-4 border border-blue-300 dark:border-blue-700">
    <div class="flex items-center space-x-3">
      <div class="text-blue-700 dark:text-blue-400">
        <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div>
        <h4 class="text-blue-800 dark:text-blue-200 text-lg font-semibold">Information</h4>
        <p class="text-blue-600 dark:text-blue-400 text-sm">You have 3 unread messages in your inbox.</p>
      </div>
    </div>
    <div class="mt-4 flex justify-end">
      <button class="px-4 py-2 bg-blue-300 dark:bg-blue-700 text-blue-800 dark:text-blue-200 rounded-md hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-300">View Messages</button>
    </div>
  </div>
</div>

Komponente "Erfolgsmeldungen"

Eine minimalistische/flache Design-Komponente für Erfolgsnachrichten für soziale Medien mit hellen Pastellfarben und einem komplexen, responsiven Layout.

Vorschau öffnen

                <div class="min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-8 space-y-8 border border-gray-200 dark:border-gray-700">
    <h2 class="text-5xl font-extrabold text-center text-gray-800 dark:text-gray-100 leading-tight">
      <span class="block">Congratulations!</span>
      <span class="block text-purple-500 dark:text-purple-400 mt-2">Your Post is Live!</span>
    </h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Left Section: Post Preview -->
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-100 dark:border-gray-600">
        <h3 class="text-2xl font-bold text-gray-700 dark:text-gray-200 mb-4">Your Latest Creation</h3>
        <div class="relative rounded-lg overflow-hidden mb-4 aspect-video shadow-lg ring-4 ring-purple-300 dark:ring-purple-600">
          <img src="https://picsum.photos/800/450?random=1" alt="Post Image" class="w-full h-full object-cover">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent p-4 flex items-end">
            <p class="text-white text-lg font-semibold">"Exploring new horizons and pushing boundaries."</p>
          </div>
        </div>
        <div class="flex items-center space-x-3 mb-3">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-pink-300 dark:border-pink-500">
          <p class="text-gray-600 dark:text-gray-300 font-medium">@CreativeExplorer</p>
        </div>
        <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
          <span><i class="fas fa-heart text-red-400"></i> 1.2K Likes</span>
          <span><i class="fas fa-comment text-blue-400"></i> 89 Comments</span>
          <span><i class="fas fa-share-alt text-green-400"></i> 20 Shares</span>
        </div>
      </div>
      
      <!-- Right Section: Next Steps & Sharing -->
      <div class="space-y-6">
        <!-- Metrics Card -->
        <div class="bg-purple-50 dark:bg-purple-900 border border-purple-200 dark:border-purple-700 rounded-lg p-6 shadow-md">
          <h3 class="text-2xl font-bold text-purple-700 dark:text-purple-200 mb-4">Performance Snapshot</h3>
          <div class="grid grid-cols-2 gap-4 text-center">
            <div>
              <p class="text-4xl font-extrabold text-purple-600 dark:text-purple-300">+15%</p>
              <p class="text-gray-600 dark:text-gray-300 mt-1">Engagement Rate</p>
            </div>
            <div>
              <p class="text-4xl font-extrabold text-pink-600 dark:text-pink-300">+300</p>
              <p class="text-gray-600 dark:text-gray-300 mt-1">New Followers</p>
            </div>
          </div>
        </div>
        
        <!-- Call to Actions -->
        <div class="bg-pink-50 dark:bg-pink-900 border border-pink-200 dark:border-pink-700 rounded-lg p-6 shadow-md space-y-4">
          <h3 class="text-2xl font-bold text-pink-700 dark:text-pink-200 mb-4">What's Next?</h3>
          <button class="w-full bg-gradient-to-r from-purple-400 to-pink-400 text-white font-bold py-3 px-6 rounded-full text-lg shadow-lg hover:from-purple-500 hover:to-pink-500 transform hover:scale-105 transition duration-300 ease-in-out">
            <i class="fas fa-share-alt mr-2"></i> Share This Post
          </button>
          <button class="w-full bg-white dark:bg-gray-700 text-purple-600 dark:text-purple-300 font-bold py-3 px-6 rounded-full text-lg shadow-lg border border-purple-300 dark:border-purple-600 hover:bg-purple-50 dark:hover:bg-gray-600 transform hover:scale-105 transition duration-300 ease-in-out">
            <i class="fas fa-chart-line mr-2"></i> View Analytics
          </button>
          <button class="w-full text-gray-600 dark:text-gray-300 bg-transparent border border-gray-300 dark:border-gray-600 font-bold py-3 px-6 rounded-full text-lg hover:bg-gray-100 dark:hover:bg-gray-700 transform hover:scale-105 transition duration-300 ease-in-out">
            <i class="fas fa-plus mr-2"></i> Create Another Post
          </button>
        </div>
      </div>
    </div>
    
    <!-- Footer Message -->
    <p class="text-center text-gray-500 dark:text-gray-400 text-md mt-8">

Komponente "Benachrichtigungen"

Eine reaktionsschnelle Benachrichtigungskomponente mit 3D-Design, einfachem Graustufenlayout und Unterstützung für dunkle Themen, die für Unternehmenswebsites geeignet ist.

Vorschau öffnen

                <div class="dark:bg-gray-900 bg-gray-100 p-6 rounded-lg shadow-lg relative overflow-hidden">
  <div class="absolute inset-0 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 opacity-20 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900"></div>
  <div class="relative z-10">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Notifications</h2>
    <div class="space-y-4">
      <div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div>
          <p class="text-gray-900 dark:text-white font-semibold">John Doe</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">New message received.</p>
        </div>
      </div>
      <div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
        <div>
          <p class="text-gray-900 dark:text-white font-semibold">Jane Smith</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post.</p>
        </div>
      </div>
      <div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Avatar">
        <div>
          <p class="text-gray-900 dark:text-white font-semibold">Peter Jones</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Commented on your photo.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Kategorien