検索コンポーネント

すべてのコンポーネント

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

Neon_Glow_Grayscale_Sports_Sidebar

スポーツ/フィットネスアプリケーション向けの複雑でレスポンシブなサイドバーコンポーネントで、グレースケールの配色内にネオン/グロー効果を備えています。ダークモードのサポートと、プロファイル、ナビゲーション、チーム、設定などのインタラクティブな要素が含まれています。

開けるプレビュー

                <div class="flex h-screen bg-gray-950 text-gray-300 dark:bg-black dark:text-gray-200">
  <!-- Sidebar -->
  <div class="flex flex-col w-64 md:w-72 bg-gray-900 border-r border-gray-800 shadow-xl dark:bg-[#1a1a1a] dark:border-gray-800 transition-all duration-300">
    <div class="flex items-center justify-center h-20 border-b border-gray-800 relative">
      <div class="absolute inset-0 bg-gradient-to-r from-transparent via-blue-500/20 to-transparent blur-md opacity-0 dark:opacity-100 transition-opacity duration-500"></div>
      <div class="absolute inset-0 bg-gradient-to-r from-transparent via-pink-500/10 to-transparent blur-3xl opacity-0 dark:opacity-100 transition-opacity duration-500 z-0"></div>
      <h1 class="text-2xl font-extrabold tracking-wider uppercase text-gray-50 dark:text-gray-50 relative z-10">
        <span class="text-blue-400 dark:text-blue-500">FIT</span><span class="text-pink-400 dark:text-pink-500">HUB</span>
      </h1>
    </div>

    <nav class="flex-1 py-6 px-4 space-y-2 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-700 scrollbar-track-gray-900">

      <!-- Profile Section -->
      <div class="flex items-center p-4 rounded-lg bg-gray-800 hover:bg-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 transition-all duration-200 relative group">
        <div class="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-300"></div>
        <img class="h-12 w-12 rounded-full border-2 border-blue-400 dark:border-blue-500 object-cover relative z-10" src="https://randomuser.me/api/portraits/women/65.jpg" alt="User Avatar">
        <div class="ml-4 relative z-10">
          <p class="font-semibold text-gray-50 dark:text-gray-100">Jane Doe</p>
          <p class="text-sm text-gray-400 dark:text-gray-400">Athlete Pro</p>
        </div>
      </div>

      <!-- Main Navigation -->
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-blue-600/30 hover:text-blue-400 dark:hover:bg-blue-500/20 dark:hover:text-blue-500 group relative overflow-hidden transition-all duration-200">
        <div class="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-3m-6 0v3H9m0-6h.01M10 12l-2 2m2-2l2 2m-6 4h4"></path></svg>
        <span class="relative z-10">Dashboard</span>
      </a>
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-pink-600/30 hover:text-pink-400 dark:hover:bg-pink-500/20 dark:hover:text-pink-500 group relative overflow-hidden transition-all duration-200">
        <div class="absolute inset-0 bg-pink-500/10 dark:bg-pink-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2zm12-3c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2zM9 10l12-3"></path></svg>
        <span class="relative z-10">Workouts</span>
      </a>
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-blue-600/30 hover:text-blue-400 dark:hover:bg-blue-500/20 dark:hover:text-blue-500 group relative overflow-hidden transition-all duration-200">
        <div class="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h-4l-3-3H6.5a2.5 2.5 0 010-5H17l-3-3h4l3 3V20z"></path></svg>
        <span class="relative z-10">Team Stats</span>
      </a>
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-pink-600/30 hover:text-pink-400 dark:hover:bg-pink-500/20 dark:hover:text-pink-500 group relative overflow-hidden transition-all duration-200">
        <div class="absolute inset-0 bg-pink-500/10 dark:bg-pink-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
        <span class="relative z-10">Schedule</span>
      </a>
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-blue-600/30 hover:text-blue-400 dark:hover:bg-blue-500/20 dark:hover:text-blue-500 group relative overflow-hidden transition-all duration-200">
        <div class="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17L3 11m0 0l6-6m-6 6h12a2 2 0 012 2v6a2 2 0 01-2 2H3a2 2 0 01-2-2v-6a2 2 0 012-2zm0 0l6-6m-6 6h12a2 2 0 012 2v6a2 2 0 01-2 2H3a2 2 0 01-2-2v-6a2 2 0 012-2z"></path></svg>
        <span class="relative z-10">Reports</span>
      </a>

      <!-- Teams Section -->
      <div class="pt-4">
        <h3 class="text-xs uppercase tracking-wider text-gray-500 font-semibold mb-2">Teams</h3>
        <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
          <div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <span class="h-3 w-3 rounded-full bg-red-500 relative z-10 animate-pulse-glow-red"></span>
          <span class="ml-3 relative z-10">Phoenix United</span>
        </a>
        <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
          <div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <span class="h-3 w-3 rounded-full bg-green-500 relative z-10 animate-pulse-glow-green"></span>
          <span class="ml-3 relative z-10">Galaxy Runners</span>
        </a>
        <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
          <div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <span class="h-3 w-3 rounded-full bg-purple-500 relative z-10 animate-pulse-glow-purple"></span>
          <span class="ml-3 relative z-10">Zenith Strikers</span>
        </a>
      </div>
    </nav>

    <!-- Footer / Settings -->
    <div class="px-4 py-6 border-t border-gray-800">
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        <span class="relative z-10">Settings</span>
      </a>
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h12"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        <span class="relative z-10">Logout</span>
      </a>
    </div>
  </div>

  <!-- Main Content Area (for demonstration, not part of the sidebar itself) -->
  <div class="flex-1 p-8 text-gray-100 dark:text-gray-50 overflow-auto">
    <h2 class="text-3xl font-bold mb-6">
      <span class="text-blue-400 dark:text-blue-500">Welcome,</span> <span class="text-pink-400 dark:text-pink-500">Athlete!</span>
    </h2>
    <p class="mb-4">This is a placeholder for your main application content.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="p-6 rounded-lg bg-gray-800 border border-gray-700 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-300"></div>
        <h3 class="text-xl font-semibold mb-2 relative z-10">Daily Activity</h3>
        <p class="text-gray-400 relative z-10">Track your steps, calories, and active minutes.</p>
        <img src="https://picsum.photos/300/200?random=1" alt="Daily Activity" class="mt-4 rounded-md object-cover w-full h-32 relative z-10 opacity-70 group-hover:opacity-90 transition-opacity duration-300">
      </div>
      <div class="p-6 rounded-lg bg-gray-800 border border-gray-700 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-pink-500/10 to-transparent opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-300"></div>
        <h3 class="text-xl font-semibold mb-2 relative z-10">Upcoming Events</h3>
        <p class="text-gray-400 relative z-10">Don't miss a game or practice session.</p>
        <img src="https://picsum.photos/300/200?random=2" alt="Upcoming Events" class="mt-4 rounded-md object-cover w-full h-32 relative z-10 opacity-70 group-hover:opacity-90 transition-opacity duration-300">
      </div>
      <div class="p-6 rounded-lg bg-gray-800 border border-gray-700 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-300"></div>
        <h3 class="text-xl font-semibold mb-2 relative z-10">Performance Insights</h3>
        <p class="text-gray-400 relative z-10">Visualize your progress over time.</p>
        <img src="https://picsum.photos/300/200?random=3" alt="Performance Insights" class="mt-4 rounded-md object-cover w-full h-32 relative z-10 opacity-70 group-hover:opacity-90 transition-opacity duration-300">
      </div>
    </div>
    <p class="text-gray-500 mt-8 text-center text-sm">This content area demonstrates dark mode and overall integration.</p>
  </div>

  <style>
    /* Custom scrollbar for Webkit browsers */
    .scrollbar-thin::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    .scrollbar-thin::-webkit-scrollbar-track {
      background: transparent;
    }

    .scrollbar-thin::-webkit-scrollbar-thumb {
      background-color: #4a5568; /* gray-700 */
      border-radius: 4px;
      border: 2px solid transparent;
    }

    .scrollbar-thin::-webkit-scrollbar-thumb:hover {
      background-color: #61626c; /* slightly lighter on hover */
    }

    /* Tailwind Animation Utilities */
    @keyframes pulse-glow-red {
      0%, 100% {
        box-shadow: 0 0 0px #ef4444;
      }
      50% {
        box-shadow: 0 0 8px #ef4444, 0 0 16px #ef4444;
      }
    }
    .animate-pulse-glow-red {
        animation: pulse-glow-red 2s infinite ease-in-out;
    }

    @keyframes pulse-glow-green {
      0%, 100% {
        box-shadow: 0 0 0px #22c55e;
      }
      50% {
        box-shadow: 0 0 8px #22c55e, 0 0 16px #22c55e;
      }
    }
    .animate-pulse-glow-green {
        animation: pulse-glow-green 2s infinite ease-in-out;
    }

     @keyframes pulse-glow-purple {
      0%, 100% {
        box-shadow: 0 0 0px #a855f7;
      }
      50% {
        box-shadow: 0 0 8px #a855f7, 0 0 16px #a855f7;
      }
    }
    .animate-pulse-glow-purple {
        animation: pulse-glow-purple 2s infinite ease-in-out;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .w-64 {
            width: 56px; /* Collapsed width on mobile */
        }

        .md\:w-72 {
            width: 56px; /* Override for mobile, effectively */
        }

        .flex-col .text-2xl, .flex-col .text-base, .flex-col .text-sm, .flex-col .text-lg, .flex-col .ml-4, .flex-col .mr-3, .flex-col .px-4, .flex-col .py-3, .flex-col .h-12, .flex-col .w-12, .flex-col .h-5, .flex-col .w-5, .flex-col .px-4, .flex-col .py-6 {
            display: none; /* Hide text/padding elements when collapsed */
        }

        .flex-col .h-20 {
            height: 60px;
        }

        .flex-col .items-center.justify-center {
            justify-content: center;
        }

        .flex-col .h-20 .text-2xl {
            display: initial; /* Show title on mobile */
            font-size: 1.5rem; /* Smaller title on mobile */
            line-height: 1.75rem;
        }

        .flex-col .h-20 .text-2xl span {
            display: none;
        }

         .flex-col .h-20 h1:before {
            content: 'F'; /* Show only 'F' for the logo on mobile */
            display: block;
            color: #60a5fa;
         }

         .flex-col .h-20 h1.dark\:text-gray-50:before {
            color: #60a5fa;
         }

        .flex-col .flex-col {
            width: 56px; /* Ensure collapsed width */
        }

        .flex-col .rounded-full {
            margin: auto; /* Center avatar */
        }

        .flex-col svg {
            margin-right: 0; /* Remove margin for icons */
        }

        .flex-col .px-4.py-3 {
            padding-left:0.9rem; /* Adjust padding for icons only */
            padding-right:0.9rem;
            justify-content: center;
        }

         .flex-col .px-4.py-3 span {
             display:none; /* Hide icon text */
         }

         .flex-col .rounded-lg.bg-gray-800, .flex-col .pt-4 {
            margin-top: 0; /* Adjust spacing */
            margin-bottom: 0;
         }
         .flex-col .pt-4 .text-xs {
            display: none; /* Hide team section title on mobile */
         }
         .flex-col .h-3.w-3 {
            margin: auto; /* Center team status indicator */
         }
         .flex-col .px-4.py-6 {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
         }
    }
  </style>
</div>

Forum_Community_Component

企業/プロフェッショナルなデザインスタイルとオーシャン/ブルーの配色(ダークモードのサポートを含む)を備えた、レスポンシブでテーマ別のフォーラム/コミュニティディスカッションコンポーネント。

開けるプレビュー

                <div class="bg-blue-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8 font-sans">

  <!-- Component Header -->
  <div class="max-w-7xl mx-auto mb-8">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-2">Community Discussions</h1>
    <p class="text-lg text-blue-700 dark:text-blue-300">Engage with our professionals, share insights, and get support.</p>
  </div>

  <!-- Main Content Area - Grid Layout for Topics/Posts -->
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

    <!-- Left Column: Forum Categories/Topics -->
    <div class="md:col-span-2 space-y-6">

      <!-- Search and Filter Bar -->
      <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm flex flex-col sm:flex-row items-center gap-4">
        <input type="text" placeholder="Search discussions..." class="flex-grow p-2 border border-blue-200 dark:border-gray-700 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-blue-50 dark:bg-gray-700 text-blue-900 dark:text-white placeholder-blue-400 dark:placeholder-gray-500">
        <select class="p-2 border border-blue-200 dark:border-gray-700 rounded-md bg-blue-50 dark:bg-gray-700 text-blue-900 dark:text-white">
          <option>All Categories</option>
          <option>Product Feedback</option>
          <option>Technical Support</option>
          <option>General Discussion</option>
          <option>Announcements</option>
        </select>
        <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 ease-in-out flex-shrink-0">
          New Topic
        </button>
      </div>

      <!-- Discussion Post Card (Repeated for multiple posts) -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden animate-fade-in">
        <div class="p-4 sm:p-6 border-b border-blue-100 dark:border-gray-700">
          <div class="flex items-center mb-2">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
            <div>
              <a href="#" class="font-semibold text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-300">John Doe</a>
              <span class="text-sm text-gray-500 dark:text-gray-400 block">Posted on April 15, 2024</span>
            </div>
          </div>
          <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">How to best integrate analytics with our new CRM?</h2>
          <p class="text-blue-700 dark:text-blue-300 line-clamp-3">We're looking for the most efficient way to connect Google Analytics and our in-house CRM system to get a unified view of customer data. Any recommended tools or best practices?</p>
          <div class="mt-4 flex items-center justify-between">
            <div class="flex space-x-4 text-gray-600 dark:text-gray-400 text-sm">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4-1l-3 1 1-3A8.84 8.84 0 012 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0zm-7 4a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0z" clip="evenodd"></path></svg>56 Replies</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.293 4.293a1 1 0 001.414-1.414L11.414 11l4.293-4.293a1 1 0 00-1.414-1.414L10 9.586 5.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-4.293 4.293a1 1 0 101.414 1.414L10 12.586z"></path></svg>Category: CRM</span>
            </div>
            <a href="#" class="px-3 py-1 bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm font-medium rounded-full cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-600 transition-colors">View Discussion</a>
          </div>
        </div>
      </div>

      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden animate-fade-in">
        <div class="p-4 sm:p-6 border-b border-blue-100 dark:border-gray-700">
          <div class="flex items-center mb-2">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar">
            <div>
              <a href="#" class="font-semibold text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-300">Jane Doe</a>
              <span class="text-sm text-gray-500 dark:text-gray-400 block">Posted on April 14, 2024</span>
            </div>
          </div>
          <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">Seeking advice on enhancing team collaboration with new tools.</h2>
          <p class="text-blue-700 dark:text-blue-300 line-clamp-3">Our team is growing, and we're looking for innovative tools or strategies to improve our daily collaboration and project management. Any suggestions beyond the usual suspects?</p>
          <div class="mt-4 flex items-center justify-between">
            <div class="flex space-x-4 text-gray-600 dark:text-gray-400 text-sm">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4-1l-3 1 1-3A8.84 8.84 0 012 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0zm-7 4a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0z" clip="evenodd"></path></svg>32 Replies</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.293 4.293a1 1 0 001.414-1.414L11.414 11l4.293-4.293a1 1 0 00-1.414-1.414L10 9.586 5.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-4.293 4.293a1 1 0 101.414 1.414L10 12.586z"></path></svg>Category: Productivity</span>
            </div>
            <a href="#" class="px-3 py-1 bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm font-medium rounded-full cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-600 transition-colors">View Discussion</a>
          </div>
        </div>
      </div>

       <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden animate-fade-in">
        <div class="p-4 sm:p-6 border-b border-blue-100 dark:border-gray-700">
          <div class="flex items-center mb-2">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Avatar">
            <div>
              <a href="#" class="font-semibold text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-300">Michael Scott</a>
              <span class="text-sm text-gray-500 dark:text-gray-400 block">Posted on April 13, 2024</span>
            </div>
          </div>
          <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">Best practices for secure cloud deployments?</h2>
          <p class="text-blue-700 dark:text-blue-300 line-clamp-3">Looking for advice on maintaining robust security for our cloud infrastructure. What are the essential guidelines and tools for a corporate environment?</p>
          <div class="mt-4 flex items-center justify-between">
            <div class="flex space-x-4 text-gray-600 dark:text-gray-400 text-sm">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4-1l-3 1 1-3A8.84 8.84 0 012 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0zm-7 4a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0z" clip="evenodd"></path></svg>78 Replies</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.293 4.293a1 1 0 001.414-1.414L11.414 11l4.293-4.293a1 1 0 00-1.414-1.414L10 9.586 5.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-4.293 4.293a1 1 0 101.414 1.414L10 12.586z"></path></svg>Category: Cloud Security</span>
            </div>
            <a href="#" class="px-3 py-1 bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm font-medium rounded-full cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-600 transition-colors">View Discussion</a>
          </div>
        </div>
      </div>

    </div>

    <!-- Right Column: Sidebar (Popular Topics, Recent Activity etc.) -->
    <div class="space-y-6">

      <!-- Popular Topics -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 sm:p-6">
        <h3 class="text-lg font-bold text-blue-900 dark:text-blue-100 mb-4">Popular Topics</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 text-truncate block font-medium">Future of AI in Business Operations</a></li>
          <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 text-truncate block">Optimizing Remote Workflows</a></li>
          <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 text-truncate block">Cybersecurity Threats 2024 Report</a></li>
          <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 text-truncate block">Sustainable Business Practices</a></li>
        </ul>
      </div>

      <!-- Recent Activity -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 sm:p-6">
        <h3 class="text-lg font-bold text-blue-900 dark:text-blue-100 mb-4">Recent Activity</h3>
        <ul class="space-y-3">
          <li class="flex items-start">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
            <div>
              <p class="text-sm text-blue-700 dark:text-blue-300"><span class="font-semibold">Sarah L.</span> replied to "Challenges in Hybrid Cloud Adoption"</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">5 minutes ago</span>
            </div>
          </li>
          <li class="flex items-start">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div>
              <p class="text-sm text-blue-700 dark:text-blue-300"><span class="font-semibold">David K.</span> started "Best Practices for Q2 Planning"</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">1 hour ago</span>
            </div>
          </li>
          <li class="flex items-start">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/7.jpg" alt="Avatar">
            <div>
              <p class="text-sm text-blue-700 dark:text-blue-300"><span class="font-semibold">Emily R.</span> voted on "Effective Communication Strategies"</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">3 hours ago</span>
            </div>
          </li>
        </ul>
      </div>

      <!-- Pinned Announcements -->
      <div class="bg-blue-600 dark:bg-blue-900 text-white dark:text-blue-100 rounded-lg shadow-md p-4 sm:p-6">
        <h3 class="text-lg font-bold mb-3">📢 Important Announcement</h3>
        <p class="text-sm opacity-90">Our annual system maintenance will occur on May 1st from 2 AM to 6 AM UTC. Expect brief service interruptions. Thank you for your understanding.</p>
        <a href="#" class="mt-3 inline-block bg-blue-700 dark:bg-blue-800 hover:bg-blue-800 dark:hover:bg-blue-700 text-white text-xs font-semibold px-3 py-1 rounded-full transition duration-300">Read More</a>
      </div>

    </div>

  </div>

  <!-- Pagination (Example) -->
  <div class="max-w-7xl mx-auto mt-8 flex justify-center">
    <nav class="relative z-0 inline-flex shadow-sm -space-x-px" aria-label="Pagination">
      <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
        <span class="sr-only">Previous</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="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip="evenodd" />
        </svg>
      </a>
      <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors z-10">
        1
      </a>
      <a href="#" class="relative inline-flex items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
        2
      </a>
      <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
        3
      </a>
      <span class="relative inline-flex items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-400">
        ...
      </span>
      <a href="#" class="relative inline-flex items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
        10
      </a>
      <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
        <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.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="evenodd" />
        </svg>
      </a>
    </nav>
  </div>

</div>

Brutalist_Sepia_Timeline_Documentation

ドキュメントや Wiki サイト向けの複雑なブルータリズムスタイルのタイムラインコンポーネントで、セピア/ブラウンの色調とダークモードサポートによる完全な応答性が特徴です。ハイコントラストと生々しい美学で設計されています。

開けるプレビュー

                <div class="p-4 sm:p-8 md:p-12 min-h-screen bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 font-mono">

  <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold mb-8 sm:mb-12 text-stone-900 dark:text-stone-100 uppercase tracking-tighter border-b-4 border-stone-900 dark:border-stone-100 pb-2">
    Project Chronology <span class="text-stone-600 dark:text-stone-400">// V-0.1</span>
  </h1>

  <div class="max-w-6xl mx-auto relative">

    <!-- Vertical Line -->
    <div class="absolute left-4 sm:left-1/2 -ml-0.5 w-1 h-full bg-stone-500 dark:bg-stone-600 border border-stone-900 dark:border-stone-100 transform -translate-x-1/2"></div>

    <!-- Timeline Item 1 -->
    <div class="mb-10 sm:flex sm:justify-between items-center w-full right-aligned-item">
      <div class="order-1 sm:order-2 sm:w-1/2 flex justify-start sm:justify-end pr-4 sm:pr-8 md:pr-12">
        <div class="w-full sm:w-10/12 md:w-8/12 bg-stone-200 dark:bg-stone-800 p-4 sm:p-6 border-4 border-stone-900 dark:border-stone-100 shadow-[8px_8px_0_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.2)] transform transition-all duration-200 hover:scale-[1.01] hover:shadow-[12px_12px_0_0_rgba(0,0,0,0.8)] dark:hover:shadow-[12px_12px_0_0_rgba(255,255,255,0.2)]">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-100 uppercase pb-1 border-b-2 border-stone-500 dark:border-stone-400">System Architecture Draft</h3>
          <p class="mb-3 text-stone-700 dark:text-stone-300">Initial conceptualization of modular components and data flow. Focus on redundancy and fault tolerance.</p>
          <div class="text-sm text-stone-600 dark:text-stone-400 flex items-center justify-between">
            <span>Version 1.0.0 Alpha</span>
            <span class="font-bold text-stone-900 dark:text-stone-100">12, JAN 2023</span>
          </div>
          <div class="flex items-center space-x-2 mt-4 -ml-2">
            <img class="w-8 h-8 rounded-full border-2 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author">
            <span class="text-md text-stone-700 dark:text-stone-300">By <a href="#" class="underline font-bold">Dr. A. Smith</a></span>
          </div>
        </div>
      </div>
      <div class="absolute left-4 sm:left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-stone-900 dark:bg-stone-100 border-4 border-stone-500 dark:border-stone-600 z-10 hidden sm:block"></div>
    </div>

    <!-- Timeline Item 2 -->
    <div class="mb-10 sm:flex sm:justify-between items-center w-full left-aligned-item">
      <div class="order-1 sm:order-1 sm:w-1/2 flex justify-start sm:justify-start pl-4 sm:pl-8 md:pl-12">
        <div class="w-full sm:w-10/12 md:w-8/12 bg-stone-200 dark:bg-stone-800 p-4 sm:p-6 border-4 border-stone-900 dark:border-stone-100 shadow-[8px_8px_0_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.2)] transform transition-all duration-200 hover:scale-[1.01] hover:shadow-[12px_12px_0_0_rgba(0,0,0,0.8)] dark:hover:shadow-[12px_12px_0_0_rgba(255,255,255,0.2)]">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-100 uppercase pb-1 border-b-2 border-stone-500 dark:border-stone-400">Core Module Prototyping</h3>
          <p class="mb-3 text-stone-700 dark:text-stone-300">Development begins on critical path components, including secure data handling and authentication layers.</p>
          <img src="https://picsum.photos/400/250?random=1" alt="Prototyping" class="w-full h-auto object-cover border-2 border-stone-900 dark:border-stone-100 mb-3 grayscale mix-blend-multiply dark:mix-blend-normal">
          <div class="text-sm text-stone-600 dark:text-stone-400 flex items-center justify-between">
            <span>Hotfix Branch 3.1</span>
            <span class="font-bold text-stone-900 dark:text-stone-100">05, APR 2023</span>
          </div>
          <div class="flex items-center space-x-2 mt-4 -ml-2">
            <img class="w-8 h-8 rounded-full border-2 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/women/42.jpg" alt="Author">
            <span class="text-md text-stone-700 dark:text-stone-300">By <a href="#" class="underline font-bold">J. Rodriguez</a></span>
          </div>
        </div>
      </div>
      <div class="absolute left-4 sm:left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-stone-900 dark:bg-stone-100 border-4 border-stone-500 dark:border-stone-600 z-10 hidden sm:block"></div>
    </div>

    <!-- Timeline Item 3 -->
    <div class="mb-10 sm:flex sm:justify-between items-center w-full right-aligned-item">
      <div class="order-1 sm:order-2 sm:w-1/2 flex justify-start sm:justify-end pr-4 sm:pr-8 md:pr-12">
        <div class="w-full sm:w-10/12 md:w-8/12 bg-stone-200 dark:bg-stone-800 p-4 sm:p-6 border-4 border-stone-900 dark:border-stone-100 shadow-[8px_8px_0_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.2)] transform transition-all duration-200 hover:scale-[1.01] hover:shadow-[12px_12px_0_0_rgba(0,0,0,0.8)] dark:hover:shadow-[12px_12px_0_0_rgba(255,255,255,0.2)]">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-100 uppercase pb-1 border-b-2 border-stone-500 dark:border-stone-400">Security Audit & Remediation</h3>
          <p class="mb-3 text-stone-700 dark:text-stone-300">Comprehensive third-party security assessment. Identified and patched critical vulnerabilities.</p>
          <ul class="list-disc list-inside text-sm mb-3 text-stone-700 dark:text-stone-300">
              <li>CVE-2023-1234 patched.</li>
              <li>Cross-site scripting mitigation implemented.</li>
              <li>Access control list hardening applied.</li>
          </ul>
          <div class="text-sm text-stone-600 dark:text-stone-400 flex items-center justify-between">
            <span>Audit Report v2.1</span>
            <span class="font-bold text-stone-900 dark:text-stone-100">20, JUN 2023</span>
          </div>
          <div class="flex items-center space-x-2 mt-4 -ml-2">
            <img class="w-8 h-8 rounded-full border-2 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/men/29.jpg" alt="Author">
            <span class="text-md text-stone-700 dark:text-stone-300">By <a href="#" class="underline font-bold">Cyb. Sec. Team</a></span>
          </div>
        </div>
      </div>
      <div class="absolute left-4 sm:left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-stone-900 dark:bg-stone-100 border-4 border-stone-500 dark:border-stone-600 z-10 hidden sm:block"></div>
    </div>

    <!-- Timeline Item 4 -->
    <div class="mb-10 sm:flex sm:justify-between items-center w-full left-aligned-item">
      <div class="order-1 sm:order-1 sm:w-1/2 flex justify-start sm:justify-start pl-4 sm:pl-8 md:pl-12">
        <div class="w-full sm:w-10/12 md:w-8/12 bg-stone-200 dark:bg-stone-800 p-4 sm:p-6 border-4 border-stone-900 dark:border-stone-100 shadow-[8px_8px_0_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.2)] transform transition-all duration-200 hover:scale-[1.01] hover:shadow-[12px_12px_0_0_rgba(0,0,0,0.8)] dark:hover:shadow-[12px_12px_0_0_rgba(255,255,255,0.2)]">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-100 uppercase pb-1 border-b-2 border-stone-500 dark:border-stone-400">Beta Launch & Feedback</h3>
          <p class="mb-3 text-stone-700 dark:text-stone-300">Limited release to internal testers and key partners. Initial user feedback gathered and analyzed.</p>
          <div class="grid grid-cols-2 gap-2 mb-3">
            <img src="https://picsum.photos/200/150?random=2" alt="Beta Testing 1" class="w-full h-auto object-cover border-2 border-stone-900 dark:border-stone-100 grayscale mix-blend-multiply dark:mix-blend-normal">
            <img src="https://picsum.photos/200/150?random=3" alt="Beta Testing 2" class="w-full h-auto object-cover border-2 border-stone-900 dark:border-stone-100 grayscale mix-blend-multiply dark:mix-blend-normal">
          </div>
          <div class="text-sm text-stone-600 dark:text-stone-400 flex items-center justify-between">
            <span>Build 2023.Q3.BETA</span>
            <span class="font-bold text-stone-900 dark:text-stone-100">01, SEP 2023</span>
          </div>
          <div class="flex items-center space-x-2 mt-4 -ml-2">
            <img class="w-8 h-8 rounded-full border-2 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Author">
            <span class="text-md text-stone-700 dark:text-stone-300">By <a href="#" class="underline font-bold">Team Lead</a></span>
          </div>
        </div>
      </div>
      <div class="absolute left-4 sm:left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-stone-900 dark:bg-stone-100 border-4 border-stone-500 dark:border-stone-600 z-10 hidden sm:block"></div>
    </div>

    <!-- Timeline Item 5 (Future Milestone - visual distinction) -->
    <div class="mb-10 sm:flex sm:justify-between items-center w-full right-aligned-item opacity-70 cursor-not-allowed">
      <div class="order-1 sm:order-2 sm:w-1/2 flex justify-start sm:justify-end pr-4 sm:pr-8 md:pr-12">
        <div class="w-full sm:w-10/12 md:w-8/12 bg-stone-300 dark:bg-stone-700 p-4 sm:p-6 border-4 border-stone-600 dark:border-stone-400 border-dashed shadow-[4px_4px_0_0_rgba(0,0,0,0.5)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.1)]">
          <h3 class="text-2xl font-bold mb-2 text-stone-700 dark:text-stone-300 uppercase pb-1 border-b-2 border-stone-400 dark:border-stone-500">Public Release Candidate</h3>
          <p class="mb-3 text-stone-600 dark:text-stone-400">Preparation for wider audience release. Final checks and documentation updates.</p>
          <div class="text-sm text-stone-500 dark:text-stone-500 flex items-center justify-between">
            <span>ETA: Full Launch</span>
            <span class="font-bold text-stone-700 dark:text-stone-300">Q4, 2023+</span>
          </div>
        </div>
      </div>
      <div class="absolute left-4 sm:left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-stone-600 dark:bg-stone-400 border-4 border-stone-300 dark:border-stone-700 z-10 hidden sm:block"></div>
    </div>

  </div>

</div>

Table of Contents コンポーネント

レスポンシブでダークモードに対応した目次コンポーネントで、レトロ/ビンテージカラーパレットで、デート/ソーシャルプラットフォームに適しています。落ち着いた配色とスムーズなスクロールナビゲーションが特徴です。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 bg-gray-200 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-xs mx-auto md:max-w-sm lg:max-w-md xl:max-w-lg bg-red-800 bg-opacity-70 dark:bg-red-950 dark:bg-opacity-70 rounded-lg shadow-xl overflow-hidden backdrop-filter backdrop-blur-sm">
    <div class="p-4 sm:p-5 md:p-6 bg-red-900 bg-opacity-80 dark:bg-red-900 dark:bg-opacity-90 border-b border-rose-900 dark:border-rose-950">
      <h2 class="text-xl sm:text-2xl font-bold text-amber-200 dark:text-amber-100 uppercase tracking-wide text-center">Explore Profiles</h2>
    </div>
    <nav class="py-3 sm:py-4 md:py-5">
      <ul class="space-y-1 sm:space-y-2 px-3 sm:px-4 md:px-5">
        <li>
          <a href="#popular" class="flex items-center p-2 sm:p-3 rounded-lg text-amber-100 dark:text-amber-50 hover:bg-red-700 dark:hover:bg-red-800 transition-colors duration-200 group">
            <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3 text-amber-300 dark:text-amber-200 group-hover:text-amber-100 dark:group-hover:text-amber-50" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a4 4 0 014-4h12v-2.334A4.9 4.9 0 0013 3h-1.06C11.393 4.8 9.721 6 7.854 6c-.958 0-1.868-.27-2.614-.723M17 20a2 2 0 01-2 2H3a2 2 0 01-2-2

進行状況インジケータコンポーネント

ネオン/グロー効果とジュエルトーンを備えたシンプルで応答性の高いプログレスインジケーターコンポーネントで、コンサルティング/サービスWebサイトに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="font-sans bg-stone-950 text-emerald-300 min-h-screen p-8 sm:p-12 lg:p-16 flex items-center justify-center dark:bg-gray-950 dark:text-emerald-300">
  <div class="w-full max-w-4xl">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-10 sm:mb-14 relative group leading-tight">
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 via-emerald-200 to-emerald-400 drop-shadow-lg inline-block relative">
        Our Consulting Process
        <span class="absolute inset-x-0 bottom-[-5px] h-[3px] bg-gradient-to-r from-emerald-500 via-emerald-300 to-emerald-500 blur-sm opacity-75 animate-pulse"></span>
      </span>
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
      <!-- Step 1 -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
        <div class="relative z-10">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
            <p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">1</p>
             <span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
          </div>
          <h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Discovery</h3>
          <p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Understanding your unique needs and challenges through detailed consultation.</p>
        </div>
      </div>

      <!-- Step 2 -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
        <div class="relative z-10">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
            <p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">2</p>
             <span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
          </div>
          <h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Strategy</h3>
          <p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Crafting tailored strategies and actionable plans specific to your objectives.</p>
        </div>
      </div>

      <!-- Step 3 -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
        <div class="relative z-10">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
            <p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">3</p>
             <span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
          </div>
          <h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Execution</h3>
          <p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Implementing solutions and providing hands-on support for successful deployment.</p>
        </div>
      </div>

      <!-- Step 4 -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
        <div class="relative z-10">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
            <p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">4</p>
             <span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
          </div>
          <h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Growth</h3>
          <p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Monitoring performance and refining strategies for continuous improvement and growth.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Neumorphic Vibrant Rating System コンポーネント

Neumorphicスタイルと鮮やかな配色で設計された複雑でインタラクティブな評価システムコンポーネントで、フォーラムやコミュニティプラットフォームに適しています。星評価、アップ/ダウン投票、数値表示が含まれ、完全な応答性とダークモードがサポートされています。

開けるプレビュー

                <div class="p-6 sm:p-8 md:p-10 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-gray-800 min-h-screen 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 mx-auto rounded-3xl shadow-xl space-y-8 p-6 sm:p-8 md:p-10
    bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-850 dark:to-gray-750
    dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444] shadow-[inset_2px_2px_5px_#dcdcdc,inset_-5px_-5px_15px_#ffffff]">

    <div class="text-center">
      <h2 class="text-2xl sm:text-3xl font-bold mb-2 text-purple-700 dark:text-purple-300">
        Rate This Discussion!
      </h2>
      <p class="text-sm sm:text-base text-pink-600 dark:text-pink-200">
        Your feedback helps the community grow.
      </p>
    </div>

    <!-- Star Rating Section -->
    <div class="flex justify-center items-center gap-2 sm:gap-3 lg:gap-4 p-4 sm:p-5 rounded-2xl
      bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700
      shadow-[inset_2px_2px_5px_#e0e0e0,inset_-5px_-5px_10px_#ffffff] dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
      relative border-t border-l border-white/50 dark:border-gray-600/50">

      <!-- Each star is a 'button' for demonstration, in a real app these would be radio inputs or JS controlled -->
      <div class="group relative cursor-pointer">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-60 hover:opacity-100 transition-all duration-200
          group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] group-[.active]:opacity-100 group-[.active]:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
          fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
        <span class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Terrible</span>
      </div>
      <div class="group relative cursor-pointer">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-60 hover:opacity-100 transition-all duration-200
          group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] group-[.active]:opacity-100 group-[.active]:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
          fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
        <span class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Bad</span>
      </div>
      <div class="group relative cursor-pointer">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-60 hover:opacity-100 transition-all duration-200
          group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] group-[.active]:opacity-100 group-[.active]:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
          fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
        <span class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Okay</span>
      </div>
      <div class="group relative cursor-pointer">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-60 hover:opacity-100 transition-all duration-200
          group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] group-[.active]:opacity-100 group-[.active]:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
          fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
        <span class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Good</span>
      </div>
      <div class="group relative cursor-pointer active">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-100 transition-all duration-200
          drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] !group-hover:opacity-100 !group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
          fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
        <span class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Excellent</span>
      </div>
    </div>

    <!-- Up/Down Voting Section -->
    <div class="flex justify-center items-center gap-6 sm:gap-8 p-4 sm:p-5 rounded-2xl relative
      bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700
      shadow-[inset_2px_2px_5px_#e0e0e0,inset_-5px_-5px_10px_#ffffff] dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
      border-t border-l border-white/50 dark:border-gray-600/50">
      
      <!-- Downvote Button -->
      <button class="relative px-4 py-2 sm:px-6 sm:py-3 rounded-full group
        bg-gradient-to-br from-pink-500 to-red-500 dark:from-pink-600 dark:to-red-600
        shadow-[5px_5px_10px_#d0d0d0,-5px_-5px_10px_#ffffff] dark:shadow-[5px_5px_10px_#111,-5px_-5px_10px_#555]
        text-white font-semibold flex items-center justify-center gap-2
        hover:shadow-[inset_2px_2px_5px_#a0a0a0,inset_-5px_-5px_10px_#ffffff] dark:hover:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
        transition-all duration-200 active:scale-95">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-sm sm:text-base">Downvote</span>
      </button>
      
      <!-- Score Display -->
      <span class="text-4xl sm:text-5xl font-extrabold text-purple-700 dark:text-purple-300 drop-shadow-md">
        +124
      </span>
      
      <!-- Upvote Button active -->
      <button class="relative px-4 py-2 sm:px-6 sm:py-3 rounded-full active group
        bg-gradient-to-br from-green-500 to-blue-500 dark:from-green-600 dark:to-blue-600
        shadow-[inset_2px_2px_5px_#a0a0a0,inset_-5px_-5px_10px_#ffffff] dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
        text-white font-semibold flex items-center justify-center gap-2
        hover:shadow-[5px_5px_10px_#d0d0d0,-5px_-5px_10px_#ffffff] dark:hover:shadow-[5px_5px_10px_#111,-5px_-5px_10px_#555]
        transition-all duration-200 active:scale-95">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-sm sm:text-base">Upvote</span>
      </button>
    </div>

    <!-- Comment/Submit Section -->
    <div class="flex flex-col sm:flex-row gap-4">
      <input type="text" placeholder="Add a quick comment..." class="flex-grow px-5 py-3 rounded-full
        bg-purple-50 dark:bg-gray-700 text-purple-800 dark:text-white
        shadow-[inset_2px_2px_5px_#d0d0d0,inset_-5px_-5px_10px_#ffffff] dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
        focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-500
        placeholder-purple-400 dark:placeholder-gray-500 transition-all duration-200 text-sm sm:text-base">
      <button class="px-6 py-3 rounded-full
        bg-gradient-to-br from-purple-600 to-pink-600 dark:from-purple-700 dark:to-pink-700
        shadow-[5px_5px_10px_#d0d0d0,-5px_-5px_10px_#ffffff] dark:shadow-[5px_5px_10px_#111,-5px_-5px_10px_#555]
        text-white font-semibold flex items-center justify-center gap-2 transition-all duration-200
        hover:scale-[1.02] hover:shadow-[7px_7px_14px_#c0c0c0,-7px_-7px_14px_#ffffff] dark:hover:shadow-[7px_7px_14px_#000,-7px_-7px_14px_#666]
        active:scale-95 active:shadow-[inset_2px_2px_5px_#a0a0a0,inset_-5px_-5px_10px_#ffffff] dark:active:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]">
        Submit Rating
      </button>
    </div>

    <p class="text-xs text-center text-gray-500 dark:text-gray-400 mt-6">
      Average rating: <span class="font-bold text-indigo-700 dark:text-indigo-300">4.5/5</span> based on <span class="font-bold text-indigo-700 dark:text-indigo-300">2,345 votes</span>
    </p>

  </div>
  
  <!-- Custom Dark Mode Toggle (for demonstration) -->
  <div class="absolute top-4 right-4 flex items-center space-x-2">
    <span class="text-gray-700 dark:text-gray-300 text-sm">Light</span>
    <label for="dark-mode-toggle" class="relative inline-flex items-center cursor-pointer">
      <input type="checkbox" id="dark-mode-toggle" class="sr-only peer" onchange="document.documentElement.classList.toggle('dark')">
      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
    </label>
    <span class="text-gray-700 dark:text-gray-300 text-sm">Dark</span>
  </div>
</div>

<style>
  /* Custom CSS for Neumorphism background colors */
  .dark .bg-gray-850 {
    background-color: #1a1a1a; /* Deeper dark for neumorphism inset */
  }
  .dark .bg-gray-750 {
    background-color: #2a2a2a; /* Lighter dark for neumorphism inset */
  }
</style>

サイトマップコンポーネント

ダークモードUIとレインボーグラデーションアクセントを備えたテクノロジー/ SaaSアプリケーション用のシンプルでレスポンシブなサイトマップコンポーネント。最小限の要素と明確なナビゲーションに最適化されています。

開けるプレビュー

                <footer class="bg-gray-950 text-gray-300 py-8 md:py-12 lg:py-16 dark:bg-gray-950">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8 text-center md:text-left">

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white mb-4 bg-clip-text text-transparent bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 inline-block">Product</h3>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-white transition-colors duration-200">Features</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Pricing</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Integrations</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Roadmap</a></li>
        </ul>
      </div>

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white mb-4 bg-clip-text text-transparent bg-gradient-to-r from-green-500 via-blue-500 to-indigo-500 inline-block">Company</h3>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-white transition-colors duration-200">About Us</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Careers</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Blog</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Partners</a></li>
        </ul>
      </div>

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white mb-4 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 inline-block">Resources</h3>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-white transition-colors duration-200">Documentation</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Support</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Community</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">API Status</a></li>
        </ul>
      </div>

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white mb-4 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-orange-500 to-red-500 inline-block">Legal</h3>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-white transition-colors duration-200">Privacy Policy</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Terms of Service</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Cookie Policy</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Compliance</a></li>
        </ul>
      </div>

      <div class="col-span-1 md:col-span-3 lg:col-span-1 flex flex-col items-center md:items-start space-y-4">
        <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-500 via-yellow-400 via-green-400 via-blue-400 via-indigo-400 to-purple-500 inline-block">YourApp</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center md:text-left">Building the future of SaaS.</p>
        <div class="flex space-x-4">
          <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200" aria-label="Twitter">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-1.83 0-3.32-.49-4.81-1.48C2.18 17.77 1 15.53 1 12.5c0-2.88 1.18-5.11 3.29-6.42.06-.03.1-.05.15-.07.08-.03.17-.06.25-.09.32-.12.65-.22.99-.31 1.7-.49 3.5-.83 5.3-.83 1.94 0 3.79.34 5.56.96.96.34 1.87.8 2.72 1.34.85.54 1.63 1.18 2.34 1.89.71.71 1.35 1.49 1.89 2.34.54.85.98 1.76 1.34 2.73.62 1.77.96 3.63.96 5.56 0 2.8-1.04 4.86-3.13 6.18-2.09 1.32-4.57 1.98-7.44 1.98zM9.5 13.91l8.77-8.77 2.11 2.11-8.77 8.77-4.11-4.11L9.5 13.91z" fill="currentColor"/>
              <path d="M22.251 17.581c-.552 0-1 .448-1 1s.448 1 1 1h.75c.552 0 1-.448 1-1s-.448-1-1-1h-.75zM1.751 17.581c.552 0 1 .448 1 1s-.448 1-1 1h-.75c-.552 0-1-.448-1-1s.448-1 1-1h.75z" fill="currentColor"/>
            </svg>
          </a>
          <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200" aria-label="LinkedIn">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M19 0H5a5 5 0 00-5 5v14a5 5 0 005 5h14a5 5 0 005-5V5a5 5 0 00-5-5zM8 19H5V8h3v11zM6.5 6.73a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM19 19h-3v-4.75c0-1.4-.47-2.37-1.76-2.37-1.35 0-2.14 1.02-2.14 2.37V19h-3V8h3v1.75s.9-1.63 2.87-1.63c2.25 0 3.13 1.55 3.13 4.88V19z" fill="currentColor"/>
            </svg>
          </a>
          <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200" aria-label="GitHub">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.83 9.504.475.087.687-.206.687-.456 0-.227-.007-.75-.011-1.849-2.782.607-3.368-1.341-3.368-1.341-.454-1.15-.111-1.458-.111-1.458.37-.26.02-.255.02-.255.407-.03.62.261.62.261.363.626.953.444 1.187.34.037-.266.142-.444.258-.546-1.076-.123-2.203-.538-2.203-2.404 0-.53.192-.964.507-1.304-.05-.123-.22-.616.04-.123 0 0 .415.13.882.3.82-.254 1.69-.395 2.578-.395.888 0 1.758.14 2.578.395.467-.17.882-.3.882-.3.268.51.098.393.04.123.315.34.507.773.507 1.304 0 1.868-1.127 2.278-2.208 2.399.14.12.27.359.27.727 0 .524-.005 1.894-.01 2.146 0 .252.213.547.688.455C21.139 20.19 24 16.435 24 12.017c0-5.533-4.477-10.017-10-10.017H12z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>

    </div>

    <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm dark:border-gray-700">
      <p>&copy; 2023 YourApp, Inc. All rights reserved.</p>
    </div>
  </div>
</footer>

ユーザープロファイルコンポーネント

3Dデザインの美学とアースカラーの配色を備えたレスポンシブユーザープロファイルコンポーネントで、旅行や観光のWebサイトに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 bg-stone-100 dark:bg-stone-900 min-h-screen flex items-center justify-center font-sans">

  <div class="max-w-4xl w-full mx-auto grid md:grid-cols-2 gap-6 lg:gap-8">

    <!-- User Profile Card 1 -->
    <div class="relative bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-750 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group p-6 sm:p-8 overflow-hidden">
      <!-- Overlay for 3D effect -->
      <div class="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" style="transform: translateZ(10px); perspective: 1000px;"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="w-32 h-32 md:w-36 md:h-36 rounded-full overflow-hidden border-4 border-stone-400 dark:border-stone-600 shadow-lg mb-4 group-hover:scale-105 transition-transform duration-300">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Isabella Rossi" class="w-full h-full object-cover">
        </div>
        <h2 class="text-2xl sm:text-3xl font-extrabold text-stone-800 dark:text-stone-100 mt-2 mb-2 group-hover:text-amber-700 dark:group-hover:text-amber-500 transition-colors duration-300">Isabella Rossi</h2>
        <p class="text-md sm:text-lg text-stone-600 dark:text-stone-300 font-medium mb-4 italic">"The world is a book, and those who do not travel read only one page."</p>

        <div class="w-full grid grid-cols-2 gap-4 text-stone-700 dark:text-stone-300 mb-6">
          <div class="flex flex-col items-center">
            <span class="text-xl font-bold text-amber-700 dark:text-amber-500">12</span>
            <span class="text-sm">Trips Taken</span>
          </div>
          <div class="flex flex-col items-center">
            <span class="text-xl font-bold text-amber-700 dark:text-amber-500">23</span>
            <span class="text-sm">Reviews</span>
          </div>
        </div>

        <p class="text-sm text-stone-600 dark:text-stone-400 mb-6 max-w-sm">
          Passionate globetrotter with a love for sustainable travel and exploring hidden gems. Specializes in cultural immersions.
        </p>

        <div class="flex flex-wrap justify-center gap-3">
          <a href="#" class="inline-flex items-center px-5 py-2.5 rounded-full bg-amber-700 hover:bg-amber-800 dark:bg-amber-500 dark:hover:bg-amber-600 text-white text-sm font-semibold transition-colors duration-300 shadow-md group-hover:shadow-lg dark:shadow-stone-950/50">
            <svg class="w-4 h-4 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            Send Message
          </a>
          <a href="#" class="inline-flex items-center px-5 py-2.5 rounded-full border border-amber-700 dark:border-amber-500 text-amber-700 dark:text-amber-500 dark:hover:text-white hover:bg-amber-700 dark:hover:bg-amber-500 text-sm font-semibold transition-colors duration-300 shadow-md group-hover:shadow-lg dark:shadow-stone-950/50">
            <svg class="w-4 h-4 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0118.91 10.37M6.343 7.273v10.184h10.184"></path></svg>
            View Profile
          </a>
        </div>
      </div>
    </div>

    <!-- User Profile Card 2 -->
    <div class="relative bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-750 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group p-6 sm:p-8 overflow-hidden">
      <!-- Overlay for 3D effect -->
      <div class="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" style="transform: translateZ(10px); perspective: 1000px;"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="w-32 h-32 md:w-36 md:h-36 rounded-full overflow-hidden border-4 border-stone-400 dark:border-stone-600 shadow-lg mb-4 group-hover:scale-105 transition-transform duration-300">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Ethan Miller" class="w-full h-full object-cover">
        </div>
        <h2 class="text-2xl sm:text-3xl font-extrabold text-stone-800 dark:text-stone-100 mt-2 mb-2 group-hover:text-amber-700 dark:group-hover:text-amber-500 transition-colors duration-300">Ethan Miller</h2>
        <p class="text-md sm:text-lg text-stone-600 dark:text-stone-300 font-medium mb-4 italic">"Blessed are the curious for they shall have adventures."</p>

        <div class="w-full grid grid-cols-2 gap-4 text-stone-700 dark:text-stone-300 mb-6">
          <div class="flex flex-col items-center">
            <span class="text-xl font-bold text-amber-700 dark:text-amber-500">9</span>
            <span class="text-sm">Trips Taken</span>
          </div>
          <div class="flex flex-col items-center">
            <span class="text-xl font-bold text-amber-700 dark:text-amber-500">18</span>
            <span class="text-sm">Reviews</span>
          </div>
        </div>

        <p class="text-sm text-stone-600 dark:text-stone-400 mb-6 max-w-sm">
          Adventure seeker and nature enthusiast always looking for the next hiking trail or mountain to conquer. Enjoys wilderness expeditions.
        </p>

        <div class="flex flex-wrap justify-center gap-3">
          <a href="#" class="inline-flex items-center px-5 py-2.5 rounded-full bg-amber-700 hover:bg-amber-800 dark:bg-amber-500 dark:hover:bg-amber-600 text-white text-sm font-semibold transition-colors duration-300 shadow-md group-hover:shadow-lg dark:shadow-stone-950/50">
            <svg class="w-4 h-4 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            Send Message
          </a>
          <a href="#" class="inline-flex items-center px-5 py-2.5 rounded-full border border-amber-700 dark:border-amber-500 text-amber-700 dark:text-amber-500 dark:hover:text-white hover:bg-amber-700 dark:hover:bg-amber-500 text-sm font-semibold transition-colors duration-300 shadow-md group-hover:shadow-lg dark:shadow-stone-950/50">
            <svg class="w-4 h-4 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0118.91 10.37M6.343 7.273v10.184h10.184"></path></svg>
            View Profile
          </a>
        </div>
      </div>
    </div>

  </div>
</div>

Retro_Reaction_Buttons_Industrial

レトロなインダストリアルの美学を備えたシンプルでレスポンシブな「いいね/リアクションボタン」コンポーネントで、製造または工業企業のWebサイトに適しています。

開けるプレビュー

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-mono select-none">
  <div class="bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl p-6 border-4 border-gray-400 dark:border-gray-700 w-full max-w-sm">
    <h3 class="text-center text-xl font-bold mb-6 text-gray-800 dark:text-gray-200 uppercase tracking-wider">Process Feedback</h3>
    <div class="flex justify-around space-x-4 mb-6">
      <!-- Like Button -->
      <button class="flex flex-col items-center p-3 rounded-md transition-transform duration-200 ease-in-out transform hover:scale-105 active:scale-95
                     bg-blue-600 dark:bg-blue-700 text-white font-semibold shadow-lg
                     border-b-4 border-r-4 border-blue-800 dark:border-blue-900
                     hover:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600">
        <svg class="w-8 h-8 md:w-10 md:h-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.5a2.5 2.5 0 002.5 2.5h2.464l-.929 3.488a1 1 0 001.942.518L13 16.582V13a2.5 2.5 0 002.5-2.5V6.5a2.5 2.5 0 00-2.5-2.5h-1.586a1.5 1.5 0 01-1.06-.44L10 2.5v-.5A1.5 1.5 0 008.5 1h-1A1.5 1.5 0 006 2.5v1.272a1.5 1.5 0 01-.447 1.06L4.354 7.646A1.5 1.5 0 003.293 8.707L2.5 9.5a1.5 1.5 0 00-.5 1.06v0z"></path>
        </svg>
        <span class="mt-2 text-sm md:text-base">Success</span>
      </button>

      <!-- Dislike Button -->
      <button class="flex flex-col items-center p-3 rounded-md transition-transform duration-200 ease-in-out transform hover:scale-105 active:scale-95
                     bg-red-600 dark:bg-red-700 text-white font-semibold shadow-lg
                     border-b-4 border-r-4 border-red-800 dark:border-red-900
                     hover:bg-red-700 dark:hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-600">
        <svg class="w-8 h-8 md:w-10 md:h-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.5a2.5 2.5 0 00-2.5-2.5H9.036l.929-3.488A1 1 0 008.023.002L7 3.418V7a2.5 2.5 0 00-2.5 2.5v4a2.5 2.5 0 002.5 2.5h1.586a1.5 1.5 0 011.06.44L10 17.5v.5A1.5 1.5 0 0011.5 19h1a1.5 1.5 0 001.5-1.5v-1.272a1.5 1.5 0 01.447-1.06L15.646 12.354A1.5 1.5 0 0016.707 11.293L17.5 10.5a1.5 1.5 0 00.5-1.06v0z"></path>
        </svg>
        <span class="mt-2 text-sm md:text-base">Failure</span>
      </button>
    </div>
    <p class="text-center text-sm text-gray-700 dark:text-gray-400 mt-4 leading-relaxed">Provide quick feedback on operational processes.</p>
  </div>
</div>

Follow Button コンポーネント

パステルカラーの配色とダークモードのサポートを備えた、デート/ソーシャルプラットフォーム用に設計されたシンプルで応答性の高いフォローボタンコンポーネント。

開けるプレビュー

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <button class="follow-button flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold transition-all duration-300 ease-in-out
    bg-gradient-to-r from-purple-200 to-pink-200 text-purple-800 dark:from-purple-800 dark:to-pink-800 dark:text-white
    hover:from-purple-300 hover:to-pink-300 hover:text-purple-900 dark:hover:from-purple-700 dark:hover:to-pink-700 dark:hover:text-white
    focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700
    shadow-lg hover:shadow-xl">
    <svg class="h-5 w-5 mr-2 -ml-1 text-purple-700 dark:text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM8 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0z"></path>
    </svg>
    Follow
  </button>
</div>

1 ... 87 88 89 90 91 ... 335

検索コンポーネント

カテゴリ

すべてのコンポーネント