Alle Komponenten

Mega-Menü-Komponente

Responsives Tailwind CSS Mega-Menü mit 3D-Design, analogem Farbschema und Unterstützung für den Dunkelmodus

                <nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 shadow-xl">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <div class="text-white text-2xl font-bold">BlogName</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-white hover:text-gray-200 transition duration-300">Home</a>
      <div class="relative group">
        <button class="text-white hover:text-gray-200 transition duration-300">Categories</button>
        <div class="absolute z-10 invisible group-hover:visible bg-white dark:bg-gray-700 shadow-lg rounded-md p-6 mt-2 transition duration-300 transform translate-y-2 opacity-0 group-hover:opacity-100 group-hover:translate-y-0" style="perspective: 1000px;">
          <div class="grid grid-cols-2 gap-4" style="transform: rotateY(0deg);">
            <div class="space-y-2">
              <a href="#" class="block text-gray-800 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">Technology</a>
              <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-300">Lifestyle</a>
              <a href="#" class="block text-gray-800 dark:text-white hover:text-red-600 dark:hover:text-red-400 transition duration-300">Travel</a>
            </div>
            <div class="space-y-2">
              <a href="#" class="block text-gray-800 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">Food</a>
              <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-300">Fashion</a>
              <a href="#" class="block text-gray-800 dark:text-white hover:text-red-600 dark:hover:text-red-400 transition duration-300">Sports</a>
            </div>
          </div>
        </div>
      </div>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300">About</a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default) -->
  <div class="mobile-menu hidden md:hidden bg-gradient-to-r from-purple-400 via-pink-400 to-red-400 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 py-4 px-4">
    <a href="#" class="block text-white hover:text-gray-200 transition duration-300 py-2">Home</a>
    <div class="relative group">
      <button class="block text-white hover:text-gray-200 transition duration-300 py-2">Categories</button>
      <div class="relative z-10 invisible group-hover:visible bg-white dark:bg-gray-700 shadow-lg rounded-md p-4 mt-2 transition duration-300">
        <div class="grid grid-cols-1 gap-2">
          <a href="#" class="block text-gray-800 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">Technology</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-300">Lifestyle</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-red-600 dark:hover:text-red-400 transition duration-300">Travel</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">Food</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-300">Fashion</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-red-600 dark:hover:text-red-400 transition duration-300">Sports</a>
        </div>
      </div>
    </div>
    <a href="#" class="block text-white hover:text-gray-200 transition duration-300 py-2">About</a>
    <a href="#" class="block text-white hover:text-gray-200 transition duration-300 py-2">Contact</a>
  </div>
</nav>

Balkendiagramm im Dunkelmodus

Responsives Balkendiagramm zur Anzeige von Daten mit Unterstützung des Dunkelmodus.

Vorschau öffnen

                <template>
  <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
    <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
      <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Sales Data</h2>
      <div class="relative h-60 lg:h-80">
        <!-- Bars -->
        <div class="absolute bottom-0 left-0 right-0 top-0 flex items-end justify-around px-4">
          <!-- Example bars - adjust height based on your data -->
          <div class="w-8 bg-blue-500 dark:bg-blue-600 rounded-t-lg h-3/4">
            <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">75%</span>
          </div>
          <div class="w-8 bg-green-500 dark:bg-green-600 rounded-t-lg h-2/3">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">66%</span>
          </div>
          <div class="w-8 bg-red-500 dark:bg-red-600 rounded-t-lg h-4/5">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">80%</span>
          </div>
          <div class="w-8 bg-yellow-500 dark:bg-yellow-600 rounded-t-lg h-1/2">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">50%</span>
          </div>
           <div class="w-8 bg-indigo-500 dark:bg-indigo-600 rounded-t-lg h-3/5">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">60%</span>
          </div>
           <div class="w-8 bg-purple-500 dark:bg-purple-600 rounded-t-lg h-2/4">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">50%</span>
          </div>
            <div class="w-8 bg-pink-500 dark:bg-pink-600 rounded-t-lg h-1/3">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">33%</span>
          </div>
        </div>
        <!-- X-axis Labels -->
        <div class="absolute bottom-0 left-0 right-0 h-8 flex items-center justify-around text-gray-600 dark:text-gray-400 text-sm">
          <span>Jan</span>
          <span>Feb</span>
          <span>Mar</span>
          <span>Apr</span>
          <span>May</span>
          <span>Jun</span>
          <span>Jul</span>
        </div>
      </div>
    </div>
  </div>
</template>

Retro-Bild-Lightbox-Komponente

Eine reaktionsschnelle, einfache Bild-Lightbox-Komponente mit Retro-/Vintage-Design, analogem Farbschema und Unterstützung für den Dunkelmodus, geeignet für Blogs und Content-Websites.

Vorschau öffnen

                <
  div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 font-mono bg-gray-200 dark:bg-gray-800"
>
  <
    div
    class="relative group cursor-pointer"
    onclick="this.querySelector('.lightbox').classList.remove('hidden')"
  >
    <
      img
      src="https://picsum.photos/seed/retro1/500/300"
      alt="Retro Image 1"
      class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-yellow-600 dark:border-yellow-400"
    >
    <
      div
      class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
      onclick="event.stopPropagation(); this.classList.add('hidden')"
    >
      <
        img
        src="https://picsum.photos/seed/retro1/800/600"
        alt="Retro Image 1 Enlarged"
        class="max-w-full max-h-full border-4 border-yellow-600 dark:border-yellow-400"
      >
    <
    /div
  >

  <
    div
    class="relative group cursor-pointer"
    onclick="this.querySelector('.lightbox').classList.remove('hidden')"
  >
    <
      img
      src="https://picsum.photos/seed/retro2/500/300"
      alt="Retro Image 2"
      class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-orange-600 dark:border-orange-400"
    >
    <
      div
      class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
      onclick="event.stopPropagation(); this.classList.add('hidden')"
    >
      <
        img
        src="https://picsum.photos/seed/retro2/800/600"
        alt="Retro Image 2 Enlarged"
        class="max-w-full max-h-full border-4 border-orange-600 dark:border-orange-400"
      >
    <
    /div
  >


  <
    div
    class="relative group cursor-pointer"
    onclick="this.querySelector('.lightbox').classList.remove('hidden')"
  >
    <
      img
      src="https://picsum.photos/seed/retro3/500/300"
      alt="Retro Image 3"
      class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-red-600 dark:border-red-400"
    >
    <
      div
      class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
      onclick="event.stopPropagation(); this.classList.add('hidden')"
    >
      <
        img
        src="https://picsum.photos/seed/retro3/800/600"
        alt="Retro Image 3 Enlarged"
        class="max-w-full max-h-full border-4 border-red-600 dark:border-red-400"
      >
    <
    /div
  >
<
/div
>

Warnung bei Sitzungs-Timeout

Eine einfache, monochromatische Material Design-Session-Timeout-Alarmkomponente für soziale Medien mit responsivem Design und Unterstützung für dunkle Themen.

Vorschau öffnen

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
    <div class="mt-3 text-center">
      <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-gray-100 dark:bg-gray-700">
        <svg class="h-6 w-6 text-gray-600 dark:text-gray-200" 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white mt-4">Session Expiring</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-300">Your session is about to expire. You will be logged out automatically.</p>
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-gray-600 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-600">OK</button>
      </div>
    </div>
  </div>
</div>

Retro-CAPTCHA

Eine reaktionsschnelle CAPTCHA-Komponente mit Erdtönen, moderater Komplexität und Retro/Vintage-Stil für Unternehmenswebsites mit Unterstützung für den Dunkelmodus mit Tailwind CSS. Kein JavaScript.

Vorschau öffnen

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-md w-96">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Verification</h2>
    
    <div class="mb-4">
      <label for="captcha-input" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Enter the characters you see below:</label>
      <div class="flex items-center space-x-4">
        <div class="captcha-display bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white text-xl font-mono px-4 py-2 rounded tracking-wider">
          A3fG9h
        </div>
        <button class="px-3 py-2 bg-gray-200 dark:bg-gray-500 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400">
          &#x21bb;
        </button>
      </div>
    </div>
    
    <input type="text" id="captcha-input" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-700 dark:text-white" placeholder="Enter CAPTCHA">
    
    <button class="mt-6 w-full bg-amber-600 dark:bg-amber-700 text-white py-2 rounded hover:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500">
      Verify
    </button>
  </div>
</div>

Follow-Button-Komponente

Ein Follow-Button im Neumorphism-Stil für ein Dashboard mit Unterstützung für dunkle Themen.

Vorschau öffnen

                <div class="flex justify-center items-center h-screen bg-gray-800 dark:bg-gray-900">
    <button class="relative inline-flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-full shadow-lg transition-transform transform hover:scale-105 active:scale-95 dark:shadow-inner shadow-gray-300 ">
        <span class="absolute inset-0 rounded-full bg-gradient-to-r from-pink-400 via-red-500 to-yellow-500 opacity-20 blur transition-all duration-500"></span>
        <span class="relative text-white font-bold text-lg">
            Follow
        </span>
    </button>
</div>

Komponente "Fehlermeldungen"

Fehlermeldungen Komponente mit 3D-Design, monochromatischem Farbschema, mäßiger Komplexität für Dashboard-Zwecke, responsives Design mit Unterstützung für dunkle Themen.

Vorschau öffnen

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative">
    <div class="absolute inset-0 bg-gradient-to-r from-purple-400 to-purple-600 transform -skew-y-3 rotate-1 scross-y-3 rounded-3xl dark:from-purple-700 dark:to-purple-900"></div>
    <div class="relative bg-white p-10 rounded-xl shadow-2xl text-center dark:bg-gray-800">
      <h1 class="text-3xl font-bold text-red-500 dark:text-red-400">Error!</h1>
      <p class="mt-4 text-gray-700 dark:text-gray-300">Something went wrong. Please try again later.</p>
      <button class="mt-6 px-8 py-2 bg-purple-500 text-white rounded-full hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-700">Retry</button>
    </div>
  </div>
</div>

Eine reaktionsschnelle Bild-Lightbox-Komponente, die im Material Design-Stil entworfen wurde und ein triadisches Farbschema und Unterstützung für den Dunkelmodus bietet. Es eignet sich für Portfolios, in denen Arbeiten oder Produkte präsentiert werden.

Vorschau öffnen

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
    <h2 class="mb-4 text-2xl font-semibold text-gray-800 dark:text-gray-200">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=1" alt="Portfolio Image 1" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=2" alt="Portfolio Image 2" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=3" alt="Portfolio Image 3" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=4" alt="Portfolio Image 4" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=5" alt="Portfolio Image 5" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=6" alt="Portfolio Image 6" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
    </div>
</div>

Komponente "Datentabellen"

Responsive Data Tables Component mit Dark Mode-Unterstützung unter Verwendung von Tailwind CSS

Vorschau öffnen

                <div class="container mx-auto p-4 dark:bg-gray-900">

  <div class="data-table bg-white shadow-lg rounded-lg overflow-hidden dark:bg-gray-800">
    <table class="min-w-full leading-normal">
      <thead>
        <tr class="bg-gradient-to-br from-purple-500 to-pink-500 text-white">
          <th
            class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
          >
            Name
          </th>
          <th
            class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
          >
            Role
          </th>
          <th
            class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
          >
            Status
          </th>
          <th
            class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
          >
            Created At
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <div class="flex items-center">
              <div class="flex-shrink-0 w-10 h-10">
                <img
                  class="w-full h-full rounded-full"
                  src="https://randomuser.me/api/portraits/men/1.jpg"
                  alt=""
                />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 whitespace-no-wrap dark:text-white">
                  John Doe
                </p>
              </div>
            </div>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">Admin</p>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <span
              class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight"
            >
              <span
                aria-hidden
                class="absolute inset-0 bg-green-200 opacity-50 rounded-full"
              ></span>
              <span class="relative">Active</span>
            </span>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              2023-10-27
            </p>
          </td>
        </tr>
        <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <div class="flex items-center">
              <div class="flex-shrink-0 w-10 h-10">
                <img
                  class="w-full h-full rounded-full"
                  src="https://randomuser.me/api/portraits/women/2.jpg"
                  alt=""
                />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 whitespace-no-wrap dark:text-white">
                  Jane Smith
                </p>
              </div>
            </div>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              Editor
            </p>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <span
              class="relative inline-block px-3 py-1 font-semibold text-orange-900 leading-tight"
            >
              <span
                aria-hidden
                class="absolute inset-0 bg-orange-200 opacity-50 rounded-full"
              ></span>
              <span class="relative">Pending</span>
            </span>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              2023-10-27
            </p>
          </td>
        </tr>
        <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <div class="flex items-center">
              <div class="flex-shrink-0 w-10 h-10">
                <img
                  class="w-full h-10 h-10 rounded-full"
                  src="https://randomuser.me/api/portraits/men/3.jpg"
                  alt=""
                />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 whitespace-no-wrap dark:text-white">
                  Peter Jones
                </p>
              </div>
            </div>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              Viewer
            </p>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <span
              class="relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight"
            >
              <span
                aria-hidden
                class="absolute inset-0 bg-red-200 opacity-50 rounded-full"
              ></span>
              <span class="relative">Inactive</span>
            </span>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              2023-10-27
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

OAuth-Schaltflächen-Komponente

Eine reaktionsschnelle OAuth-Schaltflächenkomponente, die für den Dunkelmodus mit einem analogen Farbschema entwickelt wurde und mehrere interaktive Elemente für soziale Medien bietet.

Vorschau öffnen

                <div class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto text-white">
    <h2 class="text-2xl font-bold mb-4">Connect with Social Media</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-between bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <span>Continue with Google</span>
            <i class="fas fa-arrow-right"></i>
        </a>

        <a href="#" class="flex items-center justify-between bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <span>Continue with Facebook</span>
            <i class="fas fa-arrow-right"></i>
        </a>

        <a href="#" class="flex items-center justify-between bg-gradient-to-r from-green-500 to-blue-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
            <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <span>Continue with Twitter</span>
            <i class="fas fa-arrow-right"></i>
        </a>

        <a href="#" class="flex items-center justify-between bg-gradient-to-r from-red-500 to-orange-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
            <img src="https://randomuser.me/api/portraits/women/20.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <span>Continue with LinkedIn</span>
            <i class="fas fa-arrow-right"></i>
        </a>
    </div>
    <p class="text-center mt-4">Or</p>
    <button class="bg-gray-700 hover:bg-gray-600 rounded-lg w-full p-2 mt-2 text-white">Sign Up with Email</button>
</div>

Kategorien