検索コンポーネント

すべてのコンポーネント

利用可能なすべてのTailwind CSSコンポーネントを参照する

天気アプリのラグジュアリーソーシャルログインコンポーネント

天気/気候アプリケーション用に設計されたエレガントで洗練されたソーシャルログインコンポーネントで、ハイコントラストカラー、洗練されたタイポグラフィ、ダークモードのサポートを特長としています。複数のログインオプションと、モダンでプレミアムな雰囲気を提供します。

開けるプレビュー

                <div class="min-h-screen bg-gradient-to-br from-indigo-950 to-gray-900 flex items-center justify-center p-4 sm:p-6 dark:from-zinc-950 dark:to-black font-serif text-white">
  <div class="w-full max-w-md bg-white/5 rounded-3xl backdrop-filter backdrop-blur-lg shadow-2xl overflow-hidden animate-fade-in-up transition-all duration-500 ease-in-out dark:bg-black/20 dark:shadow-zinc-800/50 border border-white/10 dark:border-zinc-700">
    <div class="p-8 sm:p-10">
      <h2 class="text-4xl font-extrabold text-center mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-indigo-400 dark:from-teal-300 dark:to-indigo-300 transform transition-transform duration-300 hover:scale-105">
        Welcome to AeroCast
      </h2>
      <p class="text-center text-gray-300 mb-8 max-w-sm mx-auto text-lg leading-relaxed dark:text-gray-400">
        Sign in to unlock personalized weather insights and climate data from around the globe.
      </p>

      <div class="space-y-4 mb-8">
        <button class="w-full flex items-center justify-center space-x-3 px-6 py-3 border border-white/20 rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-400 bg-gradient-to-r from-gray-800 to-gray-900 text-white dark:border-zinc-700 dark:from-zinc-800 dark:to-zinc-900 dark:focus:ring-teal-300" aria-label="Login with Google">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12.001 4.8c-3.248 0-6.059 2.199-7.054 5.163l-2.617-.61c-.518-2.695.845-5.597 3.51-7.294L7.5 1.5l2.493 1.488C9.405 3.333 10.613 3 12.001 3c1.782 0 3.298.534 4.542 1.455L14.73 6.94C13.882 5.568 12.983 4.8 12.001 4.8z" fill="#EA4335"/><path d="M22.25 10.1C22.25 9.7 22.22 9.3 22.18 8.9L12.001 8.9L12.001 13.9L17.511 13.9C17.218 15.614 16.275 16.924 14.887 17.818L17.91 20.17C19.98 18.57 21.251 16.095 21.251 13c0-.9-.1-1.7-.2-2.5zm-3.048 7.6L16.275 16.14c-1.373.914-3.14 1.46-5.02 1.46-3.486 0-6.42-2.316-7.488-5.46L1.05 12.23C.4 14.28.001 16.58.001 19c0 4.148 2.215 7.747 5.752 9.177l2.87-2.146c-2.321-.864-4.04-3.08-4.04-5.698 0-1.89.704-3.6 1.86-4.9L6.1 9.5l3.87 2.92c-.89.9-1.39 2.05-1.39 3.28 0 2.65 2.15 4.8 4.8 4.8 1.45 0 2.76-.64 3.68-1.66z" fill="rgba(0,0,0,0)"/><path d="M6.862 13.56c-.66.86-1.07 2-1.07 3.28 0 2.65 2.15 4.8 4.8 4.8 1.45 0 2.76-.64 3.68-1.66L17.91 20.17c-1.87 1.4-4.22 2.2-6.2 2.2C4.78 22.37 0 17 0 10.1C0 7.6 1.1 5.3 2.9 3.5L6.86 6.5C5.8 8.1 5.2 9.9 5.2 11.9c0 1.9.4 3.7 1.5 5.2z" fill="#34A853"/><path d="M22.25 10.1C22.25 9.7 22.22 9.3 22.18 8.9L12.001 8.9L12.001 13.9L17.511 13.9C17.218 15.614 16.275 16.924 14.887 17.818L17.91 20.17C19.98 18.57 21.251 16.095 21.251 13c0-.9-.1-1.7-.2-2.5zm-3.048 7.6L16.275 16.14c-1.373.914-3.14 1.46-5.02 1.46-3.486 0-6.42-2.316-7.488-5.46L1.05 12.23C.4 14.28.001 16.58.001 19c0 4.148 2.215 7.747 5.752 9.177l2.87-2.146c-2.321-.864-4.04-3.08-4.04-5.698 0-1.89.704-3.6 1.86-4.9L6.1 9.5l3.87 2.92c-.89.9-1.39 2.05-1.39 3.28 0 2.65 2.15 4.8 4.8 4.8 1.45 0 2.76-.64 3.68-1.66z" fill="#4285F4"/><path d="M12.001 4.8c-3.248 0-6.059 2.199-7.054 5.163l-2.617-.61c-.518-2.695.845-5.597 3.51-7.294L7.5 1.5l2.493 1.488C9.405 3.333 10.613 3 12.001 3c1.782 0 3.298.534 4.542 1.455L14.73 6.94C13.882 5.568 12.983 4.8 12.001 4.8z" fill="#FBBC04" transform="matrix(0 1 -1 0 24 0)"/></svg>
          <span class="text-lg font-semibold">Sign in with Google</span>
        </button>
        <button class="w-full flex items-center justify-center space-x-3 px-6 py-3 border border-white/20 rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-400 bg-gradient-to-r from-gray-800 to-gray-900 text-white dark:border-zinc-700 dark:from-zinc-800 dark:to-zinc-900 dark:focus:ring-teal-300" aria-label="Login with Apple">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 0c-3.328 0-6.035 2.707-6.035 6.035v11.93c0 3.328 2.707 6.035 6.035 6.035s6.035-2.707 6.035-6.035V6.035C18.035 2.707 15.328 0 12 0zm0 1.5c2.518 0 4.535 2.017 4.535 4.535v.001l-.001.001v11.931c0 2.518-2.017 4.535-4.535 4.535s-4.535-2.017-4.535-4.535V6.034C7.465 3.518 9.482 1.5 12 1.5zM12 4.5c-.829 0-1.5.671-1.5 1.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5-.671-1.5-1.5-1.5zM12 9c-.829 0-1.5.671-1.5 1.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5-.671-1.5-1.5-1.5zM12 13.5c-.829 0-1.5.671-1.5 1.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5-.671-1.5-1.5-1.5zM12 18c-.829 0-1.5.671-1.5 1.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5-.671-1.5-1.5-1.5z" clip-rule="evenodd" fill="#FFFFFF" fill-rule="evenodd"/><path d="M12 4.5c0-.829-.671-1.5-1.5-1.5S9 3.671 9 4.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5zM12 9c0-.829-.671-1.5-1.5-1.5S9 8.171 9 9s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5zM12 13.5c0-.829-.671-1.5-1.5-1.5S9 12.671 9 13.5s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5zM12 18c0-.829-.671-1.5-1.5-1.5S9 17.171 9 18s.671 1.5 1.5 1.5 1.5-.671 1.5-1.5z" opacity=".2" fill="#000000"/><path d="M12 1.5c-2.518 0-4.535 2.017-4.535 4.535v11.931c0 2.518 2.017 4.535 4.535 4.535s4.535-2.017 4.535-4.535V6.034C16.535 3.518 14.518 1.5 12 1.5z" stroke="currentColor" stroke-opacity=".1" stroke-width=".5"/></svg>

          <span class="text-lg font-semibold">Sign in with Apple</span>
        </button>
      </div>

      <div class="relative flex items-center justify-center mb-8">
        <div class="absolute inset-y-0 left-0 w-1/2 bg-gradient-to-r from-transparent to-white/10 dark:to-zinc-700/10 rounded-full blur-sm"></div>
        <div class="absolute inset-y-0 right-0 w-1/2 bg-gradient-to-l from-transparent to-white/10 dark:to-zinc-700/10 rounded-full blur-sm"></div>
        <span class="px-4 py-2 bg-gray-900 border border-white/10 text-gray-400 rounded-full text-sm uppercase tracking-wider shadow-inner dark:bg-zinc-900 dark:border-zinc-700">Or Continue With</span>
      </div>

      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Email Address</label>
          <input type="email" id="email" name="email" autocomplete="email" required class="w-full px-5 py-3 border border-white/10 bg-gray-900 text-white rounded-xl shadow-inner placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-400 focus:border-transparent dark:bg-zinc-900 dark:border-zinc-700 dark:text-gray-200" placeholder="[email protected]">
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Password</label>
          <input type="password" id="password" name="password" autocomplete="current-password" required class="w-full px-5 py-3 border border-white/10 bg-gray-900 text-white rounded-xl shadow-inner placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-teal-400 focus:border-transparent dark:bg-zinc-900 dark:border-zinc-700 dark:text-gray-200" placeholder="••••••••">
        </div>
        <div class="flex items-center justify-between text-sm">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-teal-500 border-gray-600 rounded focus:ring-teal-400 dark:border-zinc-700 dark:bg-zinc-800 dark:checked:bg-teal-500">
            <label for="remember-me" class="ml-2 block text-gray-300 dark:text-gray-400">Remember me</label>
          </div>
          <a href="#" class="font-medium text-teal-400 hover:text-teal-300 transition-colors duration-200 dark:text-teal-300 dark:hover:text-teal-200">
            Forgot your password?
          </a>
        </div>
        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-6 border border-transparent rounded-xl shadow-sm text-lg font-bold text-gray-900 bg-gradient-to-r from-teal-400 to-indigo-400 hover:from-teal-300 hover:to-indigo-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-400 transition-all duration-300 ease-in-out transform hover:scale-[1.02] active:scale-95 dark:from-teal-300 dark:to-indigo-300 dark:text-zinc-900">
            Sign In
          </button>
        </div>
      </form>

      <p class="mt-8 text-center text-gray-400 dark:text-gray-500 text-base">
        Don't have an account? 
        <a href="#" class="font-medium text-teal-400 hover:text-teal-300 transition-colors duration-200 dark:text-teal-300 dark:hover:text-teal-200">
          Sign up here
        </a>
      </p>
    </div>
  </div>
</div>

Cyberpunk_Dating_Media_Component

サイバーパンクの美学を備えたデート/ソーシャルプラットフォーム向けのレスポンシブメディアコンポーネントで、明るいキャンディーカラー、暗い背景、インタラクティブな要素が特徴です。ダークモードをサポートします。

開けるプレビュー

                <div class="min-h-screen bg-neutral-950 dark:bg-black p-4 sm:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-gradient-to-br from-neutral-900 to-neutral-800 dark:from-neutral-900 dark:to-neutral-950 rounded-xl shadow-xl border border-pink-700 dark:border-pink-800 transform hover:scale-[1.01] transition-all duration-300 ease-in-out overflow-hidden">
    <div class="relative">
      <!-- Profile Picture -->
      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile Picture" class="w-full h-64 sm:h-72 md:h-80 object-cover object-center rounded-t-xl opacity-90 border-b-2 border-pink-500 dark:border-pink-700" loading="lazy" />
      
      <!-- Overlay Gradient for Name/Age -->
      <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-neutral-900 to-transparent p-4">
        <h2 class="text-3xl sm:text-4xl font-bold text-pink-300 dark:text-pink-400 drop-shadow-lg leading-tight tracking-wider">
          Anya, <span class="font-light text-2xl sm:text-3xl text-mint-300 dark:text-mint-400">26</span>
        </h2>
      </div>

      <!-- Interactive Controls - Top Right -->
      <div class="absolute top-3 right-3 flex space-x-2">
        <button aria-label="More Options" class="p-2 rounded-full bg-neutral-800/70 dark:bg-neutral-900/70 text-mint-400 dark:text-mint-500 hover:bg-pink-600/80 dark:hover:bg-pink-700/80 hover:text-white transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-900 focus:ring-mint-500">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
          </svg>
        </button>
      </div>
    </div>

    <div class="p-4 sm:p-6 space-y-4">
      <!-- Bio/About Section -->
      <p class="text-neutral-300 dark:text-neutral-400 text-base sm:text-lg leading-relaxed">
        Exploring the digital cosmos. Looking for a connection that sparkles brighter than a supernova. Let's build a future, one byte at a time. ✨
      </p>

      <!-- Interests/Tags -->
      <div class="flex flex-wrap gap-2 pt-2">
        <span class="px-3 py-1 bg-pink-600/70 text-white dark:bg-pink-700/70 dark:text-white rounded-full text-xs sm:text-sm font-semibold tracking-wide">
          #Synthwave
        </span>
        <span class="px-3 py-1 bg-mint-600/70 text-white dark:bg-mint-700/70 dark:text-white rounded-full text-xs sm:text-sm font-semibold tracking-wide">
          #CyberpunkLit
        </span>
        <span class="px-3 py-1 bg-red-600/70 text-white dark:bg-red-700/70 dark:text-white rounded-full text-xs sm:text-sm font-semibold tracking-wide">
          #Gaming
        </span>
        <span class="px-3 py-1 bg-purple-600/70 text-white dark:bg-purple-700/70 dark:text-white rounded-full text-xs sm:text-sm font-semibold tracking-wide">
          #VR<span class="hidden sm:inline">Adventures</span>
        </span>
      </div>

      <!-- Media Gallery/Carousel Placeholder -->
      <div class="mt-6">
        <h3 class="text-xl sm:text-2xl font-bold text-mint-300 dark:text-mint-400 mb-4">My Digital Canvas</h3>
        <div class="grid grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
          <img src="https://picsum.photos/id/60/300/200" alt="Gallery Image 1" class="w-full h-32 sm:h-40 object-cover rounded-md border border-pink-500 dark:border-pink-700 transform hover:scale-105 transition-transform duration-200" loading="lazy" />
          <img src="https://picsum.photos/id/104/300/200" alt="Gallery Image 2" class="w-full h-32 sm:h-40 object-cover rounded-md border border-mint-500 dark:border-mint-700 transform hover:scale-105 transition-transform duration-200" loading="lazy" />
          <img src="https://picsum.photos/id/30/300/200" alt="Gallery Image 3" class="w-full h-32 sm:h-40 object-cover rounded-md border border-purple-500 dark:border-purple-700 transform hover:scale-105 transition-transform duration-200 hidden lg:block" loading="lazy" />
        </div>
      </div>

      <!-- Action Buttons -->
      <div class="flex justify-around items-center gap-4 mt-6 pt-4 border-t-2 border-dashed border-neutral-700/50 dark:border-neutral-800/50">
        <button aria-label="Pass" class="p-3 sm:p-4 rounded-full bg-neutral-800 dark:bg-neutral-900 border-2 border-red-500 text-red-400 dark:text-red-500 hover:bg-neutral-700 dark:hover:bg-neutral-800 hover:text-red-300 transition-colors duration-200 shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-900 focus:ring-red-500">
          <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 24 24">
            <path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/>
          </svg>
        </button>
        <button aria-label="Like" class="p-4 sm:p-5 rounded-full bg-gradient-to-r from-pink-600 to-purple-600 text-white shadow-xl transform hover:scale-110 transition-transform duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-900 focus:ring-mint-500">
          <svg class="w-8 h-8 sm:w-9 sm:h-9" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
          </svg>
        </button>
        <button aria-label="Super Like" class="p-3 sm:p-4 rounded-full bg-neutral-800 dark:bg-neutral-900 border-2 border-mint-500 text-mint-400 dark:text-mint-500 hover:bg-neutral-700 dark:hover:bg-neutral-800 hover:text-mint-300 transition-colors duration-200 shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-900 focus:ring-mint-500">
          <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 24 24">
            <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.58L4 12l8 8 8-8z"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Retro_Vintage_Toast_Notifications_Component

CRM/ビジネスツール用のシンプルなレトロ/ビンテージをテーマにしたトースト通知コンポーネントで、温かみのあるニュートラル、レスポンシブデザイン、ダークモードのサポートが特徴です。

開けるプレビュー

                <div class="fixed inset-x-0 bottom-0 p-4 sm:p-6 lg:p-8 z-50 pointer-events-none flex flex-col items-end space-y-4">
  <!-- Success Notification -->
  <div class="max-w-xs w-full bg-stone-100 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden pointer-events-auto flex ring-1 ring-stone-900/5 dark:ring-stone-100/5 transform transition-all duration-300 ease-in-out scale-100 opacity-100 data-[notification-closed=true]:scale-90 data-[notification-closed=true]:opacity-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="flex-1 w-0 p-4">
      <div class="flex items-start">
        <div class="flex-shrink-0 pt-0.5">
          <svg class="h-6 w-6 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm font-semibold text-stone-900 dark:text-stone-100 tracking-wide uppercase font-mono">Action Confirmed!</p>
          <p class="mt-1 text-sm text-stone-700 dark:text-stone-300 tracking-tight">Your changes have been saved successfully. Good job!</p>
        </div>
      </div>
    </div>
    <div class="flex border-l border-stone-200 dark:border-stone-700">
      <button type="button" class="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800" onclick="this.closest('[role=alert]').dataset.notificationClosed = 'true';">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Error Notification -->
  <div class="max-w-xs w-full bg-stone-100 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden pointer-events-auto flex ring-1 ring-stone-900/5 dark:ring-stone-100/5 transform transition-all duration-300 ease-in-out scale-100 opacity-100 data-[notification-closed=true]:scale-90 data-[notification-closed=true]:opacity-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="flex-1 w-0 p-4">
      <div class="flex items-start">
        <div class="flex-shrink-0 pt-0.5">
          <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.174 3.35 1.9 3.35h13.713c1.726 0 2.766-1.85 1.9-3.35L13.737 4.1a1.5 1.5 0 00-2.674 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm font-semibold text-stone-900 dark:text-stone-100 tracking-wide uppercase font-mono">Error Encountered!</p>
          <p class="mt-1 text-sm text-stone-700 dark:text-stone-300 tracking-tight">Unable to complete your request. Please try again later.</p>
        </div>
      </div>
    </div>
    <div class="flex border-l border-stone-200 dark:border-stone-700">
      <button type="button" class="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800" onclick="this.closest('[role=alert]').dataset.notificationClosed = 'true';">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Information Notification -->
  <div class="max-w-xs w-full bg-stone-100 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden pointer-events-auto flex ring-1 ring-stone-900/5 dark:ring-stone-100/5 transform transition-all duration-300 ease-in-out scale-100 opacity-100 data-[notification-closed=true]:scale-90 data-[notification-closed=true]:opacity-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="flex-1 w-0 p-4">
      <div class="flex items-start">
        <div class="flex-shrink-0 pt-0.5">
          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm font-semibold text-stone-900 dark:text-stone-100 tracking-wide uppercase font-mono">Heads Up!</p>
          <p class="mt-1 text-sm text-stone-700 dark:text-stone-300 tracking-tight">New features are rolling out soon. Stay tuned for updates.</p>
        </div>
      </div>
    </div>
    <div class="flex border-l border-stone-200 dark:border-stone-700">
      <button type="button" class="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800" onclick="this.closest('[role=alert]').dataset.notificationClosed = 'true';">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
        </svg>
      </button>
    </div>
  </div>
</div>

Monospace_Developer_Breadcrumb_Navigation

モノスペース/開発者の美学とレトロ/ビンテージの配色を備えたレスポンシブなパンくずナビゲーションコンポーネントで、ドキュメントやウィキサイト向けに設計されています。ダークモードのサポートが含まれています。

開けるプレビュー

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-2 md:space-x-4 font-mono text-xs md:text-sm lg:text-base p-2 rounded-md
    bg-gray-100 dark:bg-gray-800
    text-gray-700 dark:text-gray-300
    border border-gray-300 dark:border-gray-700
    shadow-sm dark:shadow-md">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center
        text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100
        transition-colors duration-200
        px-2 py-1 rounded-sm
        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        <svg class="w-3 h-3 mr-1 md:mr-2" 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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
          </path>
        </svg>
        _HOME
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-3 h-3 text-gray-400 dark:text-gray-500 mx-1 md:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
          </path>
        </svg>
        <a href="#" class="
          text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100
          transition-colors duration-200
          px-2 py-1 rounded-sm
          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          _DOCS
        </a>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-3 h-3 text-gray-400 dark:text-gray-500 mx-1 md:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
          </path>
        </svg>
        <a href="#" class="
          text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100
          transition-colors duration-200
          px-2 py-1 rounded-sm
          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          _GETTING_STARTED
        </a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="w-3 h-3 text-gray-400 dark:text-gray-500 mx-1 md:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
          </path>
        </svg>
        <span class="
          text-blue-600 dark:text-blue-400
          font-bold
          px-2 py-1
          cursor-default">
          _INSTALLATION
        </span>
      </div>
    </li>
  </ol>
</nav>

ゲーム検索ボックスコンポーネント

バウハウスのデザイン原則に触発された、ゲームWebサイト用のレスポンシブでシンプルな検索ボックスコンポーネントで、フォレスト/グリーンのカラーパレットとダークモードがサポートされています。

開けるプレビュー

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-lime-50 to-emerald-100 dark:from-stone-900 dark:to-green-950 min-h-screen flex items-center justify-center font-sans tracking-wide">
  <div class="w-full max-w-lg bg-green-50 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform skew-y-1 sm:skew-y-0 transition-transform duration-300 ease-in-out border-4 border-green-700 dark:border-green-600">
    <div class="p-4 sm:p-6 lg:p-8 bg-green-700 dark:bg-green-800 flex items-center justify-center relative">
      <h2 class="text-xl sm:text-2xl lg:text-3xl font-bold text-yellow-300 uppercase transform -skew-y-3 dark:text-lime-300 tracking-wider relative z-10">
        Find Your Game
      </h2>
      <div class="absolute inset-0 bg-gradient-to-r from-green-800 to-emerald-900 opacity-70 dark:opacity-60 z-0"></div>
    </div>
    <div class="p-6 sm:p-8 lg:p-10">
      <form action="#" method="GET" class="relative">
        <label for="search-game" class="sr-only">Search for a game</label>
        <div class="relative flex items-center bg-green-100 dark:bg-stone-700 rounded-md border-2 border-green-400 dark:border-green-600 focus-within:border-emerald-600 dark:focus-within:border-lime-500 transition-colors duration-300">
          <input
            type="search"
            id="search-game"
            name="q"
            placeholder="Search game titles..."
            aria-label="Search for a game"
            class="w-full py-3 pl-4 pr-12 text-lg text-green-900 dark:text-lime-50 placeholder-green-600 dark:placeholder-green-400 bg-transparent outline-none focus:ring-0 rounded-l-md"
            tabindex="0"
          />
          <button
            type="submit"
            aria-label="Perform search"
            class="absolute right-0 top-0 h-full w-12 flex items-center justify-center bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 text-white rounded-r-md transition-colors duration-300 transform -skew-x-6 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-stone-800"
            tabindex="0"
          >
            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <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" />
            </svg>
          </button>
        </div>
      </form>
    </div>
    <div class="relative bg-gradient-to-t from-green-700 to-green-600 dark:from-green-900 dark:to-green-800 p-2 sm:p-3 lg:p-4 text-center transform -skew-y-1 sm:skew-y-0 transition-transform duration-300 ease-in-out">
      <p class="text-sm text-yellow-200 dark:text-lime-200 uppercase font-semibold relative z-10 tracking-widest">
        Press Enter to Play
      </p>
       <div class="absolute inset-0 bg-green-800 opacity-50 dark:opacity-40 z-0"></div>
    </div>
  </div>
</div>

Eコマース産業用ナビゲーション

原材料と露出した要素の美的感覚を備えた、複雑でインダストリアルスタイルのeコマースナビゲーションコンポーネント。モノクロの黒と白の配色に明るいアクセントがあり、ダークモードをサポートして完全にレスポンシブです。

開けるプレビュー

                <header class="bg-white dark:bg-gray-950 shadow-md border-b-2 border-gray-200 dark:border-gray-800">
  <div class="container mx-auto px-4 py-3 flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
    <!-- Logo/Brand Section -->
    <div class="flex items-center flex-shrink-0">
      <a href="#" class="text-gray-900 dark:text-white text-3xl font-extrabold tracking-tight uppercase font-mono">
        <span class="text-orange-500">PRO</span>DUCTS
      </a>
    </div>

    <!-- Main Navigation & Search -->
    <div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8 w-full md:w-auto">
      <nav class="hidden md:flex space-x-6 lg:space-x-8">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
          New Arrivals
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
          Categories
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
          Sale
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
          About Us
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
        </a>
      </nav>

      <div class="relative w-full md:w-80 lg:w-96">
        <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-900 dark:text-white border-2 border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all duration-300 ease-in-out font-sans placeholder-gray-500 dark:placeholder-gray-400">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400" width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
        </svg>
      </div>
    </div>

    <!-- User Actions (Cart, Account, etc.) -->
    <div class="flex items-center space-x-6 pl-4 border-l-2 border-gray-200 dark:border-gray-800 hidden lg:flex">
      <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"></path>
        </svg>
        <span class="sr-only">Account</span>
      </a>
      <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M17 18.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-7 0c0 .83-.67 1.5-1.5 1.5S7 19.33 7 18.5s.67-1.5 1.5-1.5C9.33 17 10 17.67 10 18.5zm10.79-11.52A.981.981 0 0020 6.5H6.26L5.3 3.66A.978.978 0 004.45 3H2v2h2.24l2.94 9.53L6.16 16H20v-2H7.4l-1.12-3.86L18 8a.99.99 0 00.79-.48zM17 18.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-7 0c0 .83-.67 1.5-1.5 1.5S7 19.33 7 18.5s.67-1.5 1.5-1.5C9.33 17 10 17.67 10 18.5zm10.79-11.52A.981.981 0 0020 6.5H6.26L5.3 3.66A.978.978 0 004.45 3H2v2h2.24l2.94 9.53L6.16 16H20v-2H7.4l-1.12-3.86L18 8a.99.99 0 00.79-.48z"></path>
        </svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-orange-500 rounded-full">3</span>
        <span class="sr-only">Shopping Cart</span>
      </a>
      <button type="button" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out" onclick="document.documentElement.classList.toggle('dark')" aria-label="Toggle dark mode">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path class="dark:hidden" d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25zM12 19.5a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V20.25a.75.75 0 01.75-.75zM19.5 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5h-2.25a.75.75 0 01-.75-.75zM2.25 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H3A.75.75 0 012.25 12zM16.816 6.004a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 16.892a.75.75 0 01-1.056.077l-1.597-1.597a.75.75 0 01.077-1.056.75.75 0 011.056.077l1.597 1.597a.75.75 0 01-.077 1.056zM18.913 18.913a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 7.108a.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077.75.75 0 01-.077 1.056L6.004 7.185a.75.75 0 01-1.056-.077zM12 7.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z"></path>
          <path class="hidden dark:block" d="M9.599 3.099a.75.75 0 01.52.193 7.5 7.5 0 008.208 8.208.75.75 0 01.193.52c0 .99-.187 1.92-.513 2.766L20.082 18l-.943.943-4.053-4.052a7.5 7.5 0 00-6.713-13.687.75.75 0 01.52-.193zM12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25z"></path>
        </svg>
        <span class="sr-only">Toggle Dark Mode</span>
      </button>
    </div>

    <!-- Mobile Menu Toggle -->
    <div class="md:hidden flex items-center space-x-4">
      <button type="button" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out" onclick="document.documentElement.classList.toggle('dark')" aria-label="Toggle dark mode">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path class="dark:hidden" d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25zM12 19.5a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V20.25a.75.75 0 01.75-.75zM19.5 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5h-2.25a.75.75 0 01-.75-.75zM2.25 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H3A.75.75 0 012.25 12zM16.816 6.004a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 16.892a.75.75 0 01-1.056.077l-1.597-1.597a.75.75 0 01.077-1.056.75.75 0 011.056.077l1.597 1.597a.75.75 0 01-.077 1.056zM18.913 18.913a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 7.108a.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077.75.75 0 01-.077 1.056L6.004 7.185a.75.75 0 01-1.056-.077zM12 7.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z"></path>
          <path class="hidden dark:block" d="M9.599 3.099a.75.75 0 01.52.193 7.5 7.5 0 008.208 8.208.75.75 0 01.193.52c0 .99-.187 1.92-.513 2.766L20.082 18l-.943.943-4.053-4.052a7.5 7.5 0 00-6.713-13.687.75.75 0 01.52-.193zM12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25z"></path>
        </svg>
        <span class="sr-only">Toggle Dark Mode</span>
      </button>
      <button id="mobile-menu-button" class="text-gray-700 dark:text-gray-300 focus:outline-none focus:text-orange-500 dark:focus:text-orange-500">
        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (initially hidden) -->
  <div id="mobile-menu" class="hidden md:hidden px-4 pt-2 pb-4 space-y-2 bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">New Arrivals</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">Categories</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">Sale</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">About Us</a>
    <div class="flex items-center justify-between text-gray-800 dark:text-gray-200 pt-2 border-t border-gray-300 dark:border-gray-700">
      <a href="#" class="flex items-center px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"></path>
        </svg>
        Account
      </a>
      <a href="#" class="flex items-center px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M17 18.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-7 0c0 .83-.67 1.5-1.5 1.5S7 19.33 7 18.5s.67-1.5 1.5-1.5C9.33 17 10 17.67 10 18.5zm10.79-11.52A.981.981 0 0020 6.5H6.26L5.3 3.66A.978.978 0 004.45 3H2v2h2.24l2.94 9.53L6.16 16H20v-2H7.4l-1.12-3.86L18 8a.99.99 0 00.79-.48z"></path>
        </svg>
        Cart
        <span class="ml-1 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-white transform bg-orange-500 rounded-full">3</span>
      </a>
    </div>
  </div>
</header>

<script>
  // Basic JavaScript for mobile menu toggle
  document.addEventListener('DOMContentLoaded', function() {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    if (mobileMenuButton && mobileMenu) {
      mobileMenuButton.addEventListener('click', function() {
        mobileMenu.classList.toggle('hidden');
      });

      // Close mobile menu when a link inside is clicked (optional)
      mobileMenu.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', () => {
          mobileMenu.classList.add('hidden');
        });
      });
    }
  });
</script>

NeonGlowウェザーローダー

ネオングロー効果、ブラックとホワイトのベース、ダークモードのサポートを含む鮮やかなアクセントカラーを備えた、シンプルで応答性の高いウェザー/クライメートローダーコンポーネント。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-black p-4">
  <div class="relative flex flex-col items-center justify-center w-56 h-56 sm:w-64 sm:h-64 md:w-80 md:h-80 rounded-full bg-gray-800 dark:bg-gray-950 shadow-lg glow-border animate-pulse-border">
    <div class="relative w-40 h-40 sm:w-48 sm:h-48 md:w-60 md:h-60 rounded-full flex items-center justify-center bg-gray-700 dark:bg-gray-900 overflow-hidden">
      <!-- Inner Glow Effect -->
      <div class="absolute inset-0 rounded-full z-0 pointer-events-none animate-spin-slow" style="background: conic-gradient(from 0deg, transparent 0%, transparent 25%, #00FFFF 50%, transparent 75%, transparent 100%); filter: blur(10px); opacity: 0.7;"></div>

      <div class="absolute inset-0 rounded-full z-0 pointer-events-none animate-spin-reverse-slow" style="background: conic-gradient(from 180deg, transparent 0%, transparent 25%, #FF00FF 50%, transparent 75%, transparent 100%); filter: blur(10px); opacity: 0.7;"></div>

      <!-- Main Weather Icon/Text Container -->
      <div class="relative z-10 text-white dark:text-gray-200 text-6xl md:text-7xl font-bold flex flex-col items-center justify-center leading-none animate-pulse-text">
        <svg class="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 text-cyan-400 dark:text-fuchsia-400 drop-shadow-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <filter id="glow">
              <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
              <feMerge>
                <feMergeNode in="coloredBlur"/>
                <feMergeNode in="SourceGraphic"/>
              </feMerge>
            </filter>
          </defs>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 00-.104-10L20 9l-2.071-2.071A5 5 0 0013.818 3H10a4 4 0 00-4 4v2.586M3 15V9m0 6a2 2 0 002 2h3.28m7.295-8.586A8.995 8.995 0 0018 9v2.586M21 12H9" filter="url(#glow)"></path>
        </svg>
        <span class="mt-2 text-2xl sm:text-3xl font-light text-cyan-300 dark:text-fuchsia-300 drop-shadow-md">Loading...</span>
      </div>
    </div>
    <p class="mt-6 text-gray-400 dark:text-gray-500 text-sm sm:text-base tracking-wide animate-fade-in">Fetching climate data</p>
  </div>
</div>

<style>
  @keyframes pulse-border {
    0% {
      box-shadow: 0 0 5px rgba(0, 255, 255, 0.5), 0 0 10px rgba(255, 0, 255, 0.5), inset 0 0 5px rgba(0, 255, 255, 0.5);
    }
    50% {
      box-shadow: 0 0 15px rgba(0, 255, 255, 0.8), 0 0 30px rgba(255, 0, 255, 0.8), inset 0 0 15px rgba(0, 255, 255, 0.8);
    }
    100% {
      box-shadow: 0 0 5px rgba(0, 255, 255, 0.5), 0 0 10px rgba(255, 0, 255, 0.5), inset 0 0 5px rgba(0, 255, 255, 0.5);
    }
  }

  @keyframes spin-slow {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes spin-reverse-slow {
    from {
      transform: rotate(360deg);
    }
    to {
      transform: rotate(0deg);
    }
  }

  @keyframes pulse-text {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.8;
      transform: scale(1.05);
    }
  }

  @keyframes fade-in {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  .animate-pulse-border {
    animation: pulse-border 2s infinite ease-in-out;
  }

  .animate-spin-slow {
    animation: spin-slow 10s linear infinite;
  }

  .animate-spin-reverse-slow {
    animation: spin-reverse-slow 10s linear infinite;
  }

  .animate-pulse-text {
    animation: pulse-text 2s ease-in-out infinite;
  }

  .animate-fade-in {
    animation: fade-in 1s ease-out forwards;
    animation-delay: 0.5s; /* Delay for better visual flow */
    opacity: 0; /* Start hidden */
  }

  /* Dark mode specific glow colors */
  @media (prefers-color-scheme: dark) {
    .glow-border {
      box-shadow: 0 0 5px rgba(255, 0, 255, 0.5), 0 0 10px rgba(0, 255, 255, 0.5), inset 0 0 5px rgba(255, 0, 255, 0.5);
    }
    /* The background of the glow uses inline style for conic-gradient, so it will not directly apply to the dark mode via this class. 
       However, the accent colors for text and SVG are handled by Tailwind's dark: prefix. */
  }
</style>

Brutalist_Retro_Pagination

レトロな配色を採用したシンプルなブルータリズムスタイルのページネーションコンポーネントで、ニュースやジャーナリズムの Web サイトに適しています。ハイコントラスト、大胆なタイポグラフィ、ダークモードのサポートが特徴です。

開けるプレビュー

                <nav class="flex items-center justify-between border-t-4 border-b-4 border-gray-900 bg-[#E0E0BA] dark:bg-gray-800 px-4 py-4 md:px-6 shadow-xl font-mono">
  <div class="flex-1 flex max-md:hidden">
    <a href="#" class="relative inline-flex items-center px-4 py-3 border-4 border-gray-900 bg-[#D4A5A5] dark:bg-gray-700 text-sm font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-widest hover:bg-[#A5D4D4] dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-[#E0E0BA] dark:focus:ring-offset-gray-800">
      <svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06-.02z" clip-rule="evenodd" />
      </svg>
      Previous
    </a>
  </div>
  <div class="flex justify-center flex-1 sm:justify-start">
    <div>
      <p class="text-sm text-gray-900 dark:text-gray-200 uppercase tracking-widest">
        Page <span class="font-bold">3</span> of <span class="font-bold">12</span>
      </p>
    </div>
  </div>
  <div class="flex-1 flex justify-end max-md:hidden">
    <a href="#" class="relative inline-flex items-center px-4 py-3 border-4 border-gray-900 bg-[#D4A5A5] dark:bg-gray-700 text-sm font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-widest hover:bg-[#A5D4D4] dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-[#E0E0BA] dark:focus:ring-offset-gray-800">
      Next
      <svg class="h-5 w-5 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
      </svg>
    </a>
  </div>

  <!-- Mobile Navigation -->
  <div class="flex flex-1 justify-between md:hidden">
    <a href="#" class="relative inline-flex items-center px-3 py-2 border-4 border-gray-900 bg-[#D4A5A5] dark:bg-gray-700 text-sm font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-widest hover:bg-[#A5D4D4] dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-[#E0E0BA] dark:focus:ring-offset-gray-800">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06-.02z" clip-rule="evenodd" />
      </svg>
      <span class="sr-only">Previous</span>
    </a>
    <a href="#" class="ml-3 relative inline-flex items-center px-3 py-2 border-4 border-gray-900 bg-[#D4A5A5] dark:bg-gray-700 text-sm font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-widest hover:bg-[#A5D4D4] dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-900 focus:ring-offset-2 focus:ring-offset-[#E0E0BA] dark:focus:ring-offset-gray-800">
      <span class="sr-only">Next</span>
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
      </svg>
    </a>
  </div>
</nav>

Organic_Nature_Add_To_Cart_Button

オーガニック/自然にインスパイアされた「カートに追加」ボタンコンポーネントで、補色スキームで、教育プラットフォームに適しています。流れるようなライン、微妙なインタラクティブ要素、完全な応答性、ダークモードのサポートが特徴です。

開けるプレビュー

                <div class="flex items-center justify-center p-4 bg-lime-50 dark:bg-zinc-900 min-h-[200px]">
  <button class="
    relative px-8 py-3
    text-lg font-semibold
    text-emerald-900 dark:text-emerald-100
    bg-gradient-to-br from-emerald-400 to-lime-500
    dark:from-emerald-700 dark:to-lime-800
    rounded-full
    overflow-hidden
    shadow-lg shadow-emerald-300/50 dark:shadow-emerald-900/50
    transition-all duration-300 ease-in-out
    focus:outline-none focus:ring-4 focus:ring-emerald-400/50 dark:focus:ring-emerald-700/50
    active:scale-95
    group
  ">
    <!-- Organic Shape Background -->
    <span class="
      absolute inset-0
      bg-gradient-to-br from-emerald-500 to-lime-600
      dark:from-emerald-800 dark:to-lime-900
      rounded-full
      filter blur-sm
      opacity-0 group-hover:opacity-100
      scale-0 group-hover:scale-105
      transition-all duration-500 ease-out
      pointer-events-none
    "></span>

    <!-- Main Button Content -->
    <span class="
      relative z-10
      flex items-center justify-center
      gap-2
      transform
      group-hover:scale-105
      transition-transform duration-300 ease-out
    ">
      <svg class="w-6 h-6
        text-emerald-900 dark:text-emerald-100
        group-hover:text-emerald-100 dark:group-hover:text-amber-300
        transition-colors duration-300 ease-out
      " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.82-.446l4-4.5a1 1 0 00.086-1.267A1 1 0 0019 4H8.145l-.422-1.689A1 1 0 007.28 1H3zM7 18a2 2 0 100-4 2 2 0 000 4zm0-6a2 2 0 100-4 2 2 0 000 4zM17 18a2 2 0 100-4 2 2 0 000 4zM17 14a2 2 0 11-4 0 2 2 0 014 0z"></path>
      </svg>
      <span class="
        text-emerald-900 dark:text-emerald-100
        group-hover:text-emerald-100 dark:group-hover:text-amber-300
        transition-colors duration-300 ease-out
      ">Enroll Now</span>
    </span>

    <!-- Subtle animated glow on hover -->
    <span class="
      absolute inset-0
      rounded-full
      bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-amber-300/50 to-transparent
      dark:from-amber-600/50 dark:to-transparent
      opacity-0 group-hover:opacity-100
      scale-0 group-hover:scale-125
      transition-all duration-700 ease-out
      animate-pulse group-hover:animate-none
      pointer-events-none
    "></span>
  </button>
</div>

セッションタイムアウト警告コンポーネント

旅行/観光 Web サイト向けに設計されたレスポンシブセッションタイムアウトアラートコンポーネントで、企業の青い色調のダークモード UI が特徴です。セッションの有効期限に関する明確な通信を提供し、延長またはログアウトするオプションを提供します。

開けるプレビュー

                <div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-75 p-4 dark:bg-black dark:bg-opacity-80">
  <div class="w-full max-w-md overflow-hidden rounded-lg bg-gray-800 shadow-2xl dark:bg-gray-900 border border-blue-700 dark:border-blue-900">
    <div class="bg-blue-700 p-4 text-white dark:bg-blue-900">
      <h3 class="text-xl font-bold">Session Expiring Soon!</h3>
    </div>
    <div class="p-6 text-gray-200 dark:text-gray-300">
      <p class="mb-4 leading-relaxed">
        Your session is about to expire due to inactivity. To continue planning your adventure, please choose an option below.
      </p>
      <div class="mb-6 flex items-center justify-center space-x-3 text-sm">
        <svg class="h-6 w-6 text-yellow-400" 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>
        <span class="font-semibold text-yellow-200">Remaining time:</span>
        <span class="font-mono text-lg text-yellow-100">01:59</span>
      </div>
      <p class="mb-6 text-center text-sm italic text-gray-400 dark:text-gray-500">
        (Your data will be saved if you extend your session.)
      </p>

      <div class="flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
        <button class="flex-1 rounded-md bg-blue-600 px-6 py-3 text-lg font-semibold text-white shadow-lg transition-colors duration-200 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-800 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-500">
          Extend Session
        </button>
        <button class="flex-1 rounded-md border border-gray-600 px-6 py-3 text-lg font-semibold text-gray-300 shadow-md transition-colors duration-200 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-800 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200">
          Log Out
        </button>
      </div>
    </div>
  </div>
</div>

1 ... 63 64 65 66 67 ... 335

検索コンポーネント

カテゴリ

すべてのコンポーネント