検索コンポーネント

すべてのコンポーネント

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

ログイン/サインアップコンポーネント

グラデーションオーシャン/ブルーテーマ、スムーズなトランジション、ダークモードのサポートを備えたレスポンシブログイン/サインアップコンポーネントで、イベントや会議のWebサイトに適しています。

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-blue-100 to-blue-300 dark:from-gray-900 dark:to-blue-950 transition-all duration-500 ease-in-out font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden md:max-w-xl lg:max-w-4xl flex flex-col md:flex-row transition-all duration-500 ease-in-out transform hover:scale-105">
    <!-- Left Side: Image/Info Section (Visible on MD and larger) -->
    <div class="relative hidden md:flex md:w-1/2 lg:w-2/3 bg-gradient-to-br from-blue-600 to-indigo-800 dark:from-blue-900 dark:to-purple-950 p-8 flex-col justify-center items-center text-white transition-all duration-500 ease-in-out">
      <div class="absolute inset-0 bg-cover bg-center opacity-20" style="background-image: url('https://picsum.photos/800/600?random=1');"></div>
      <div class="relative z-10 text-center opacity-0 md:opacity-100 transition-opacity duration-1000 ease-in-out">
        <h2 class="text-4xl lg:text-5xl font-extrabold mb-4 drop-shadow-lg">Welcome to Horizon Events</h2>
        <p class="text-lg lg:text-xl font-light leading-relaxed">Connect, learn, and grow. Your gateway to unforgettable experiences and valuable networking opportunities.</p>
        <div class="mt-8">
          <button class="px-6 py-3 bg-white text-blue-700 dark:bg-gray-700 dark:text-white rounded-full font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-75">
            Learn More
          </button>
        </div>
      </div>
    </div>

    <!-- Right Side: Form Section -->
    <div class="w-full md:w-1/2 lg:w-1/3 p-6 sm:p-8 md:p-10 lg:p-12 flex flex-col justify-center bg-white dark:bg-gray-800 transition-all duration-500 ease-in-out">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-200 mb-6 text-center md:text-left transition-colors duration-300">
        <span class="block md:inline">Join Us</span> <span class="hidden md:inline text-blue-600 dark:text-blue-400">Now</span>
      </h2>

      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transition-colors duration-300">Email Address</label>
          <div class="mt-1">
            <input id="email" name="email" type="email" autocomplete="email" required
                   class="appearance-none block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-base bg-gray-50 dark:bg-gray-700 dark:text-white transition-all duration-300 ease-in-out placeholder:text-sm md:placeholder:text-base">
          </div>
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transition-colors duration-300">Password</label>
          <div class="mt-1">
            <input id="password" name="password" type="password" autocomplete="current-password" required
                   class="appearance-none block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-base bg-gray-50 dark:bg-gray-700 dark:text-white transition-all duration-300 ease-in-out placeholder:text-sm md:placeholder:text-base">
          </div>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox"
                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:bg-gray-700 dark:border-gray-600 rounded cursor-pointer">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300 transition-colors duration-300">Remember me</label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-300">Forgot your password?</a>
          </div>
        </div>

        <div>
          <button type="submit"
                  class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-base font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-700 dark:to-indigo-800 hover:from-blue-700 hover:to-indigo-800 dark:hover:from-blue-800 dark:hover:to-indigo-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 ease-in-out transform hover:scale-105">
            Sign In
          </button>
        </div>
      </form>

      <div class="mt-6 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400 transition-colors duration-300">
          New to Horizon Events?
          <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-300">Sign Up Today!</a>
        </p>
      </div>

      <div class="mt-8 relative">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 transition-colors duration-300">Or continue with</span>
        </div>
      </div>

      <div class="mt-6 grid grid-cols-2 gap-3">
        <div>
          <button class="w-full inline-flex justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-all duration-300 ease-in-out transform hover:-translate-y-px">
            <img src="https://www.svgrepo.com/show/355037/google.svg" alt="Google icon" class="h-5 w-5 mr-2"/>
            Google
          </button>
        </div>
        <div>
          <button class="w-full inline-flex justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-all duration-300 ease-in-out transform hover:-translate-y-px">
            <img src="https://www.svgrepo.com/show/475656/facebook-color.svg" alt="Facebook icon" class="h-5 w-5 mr-2"/>
            Facebook
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

タイムラインコンポーネント

教育プラットフォーム向けに設計された複雑で応答性の高いタイムラインコンポーネントで、アースカラーと完全なダークモードのサポートを備えた、すっきりとしたミニマリストのタイポグラフィに焦点を当てたデザインが特徴です。

開けるプレビュー

                <div class="font-sans antialiased text-gray-800 bg-gray-50 dark:bg-gray-900 dark:text-gray-100 min-h-screen py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-4xl sm:text-5xl font-extrabold mb-12 text-center leading-tight dark:text-gray-50">
      Learning Journey Timeline
    </h1>

    <div class="space-y-16">
      <!-- Timeline Item 1 -->
      <div class="relative flex flex-col md:flex-row items-center">
        <div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
        <div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>

        <div class="md:flex-1 md:pr-8 md:text-right">
          <p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 1</p>
          <h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Foundations of Web Development</h2>
          <p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
            Dive into the essential building blocks of the web. Learn HTML for structuring content and CSS for styling beautiful web pages. Discover browser developer tools and basic responsive design principles.
          </p>
          <div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-end">
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">HTML5</span>
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">CSS3</span>
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Responsive Design</span>
          </div>
        </div>

        <div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
        <div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
        <div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>

        <div class="md:flex-1 md:pl-8 mt-6 md:mt-0">
          <img src="https://picsum.photos/400/250?random=1" alt="Foundations" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
          <div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-start">
            <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Approx. 40 hours
          </div>
        </div>
      </div>

      <!-- Timeline Item 2 -->
      <div class="relative flex flex-col md:flex-row-reverse items-center">
        <div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
        <div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>

        <div class="md:flex-1 md:pl-8 md:text-left">
          <p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 2</p>
          <h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Interactive Frontend with JavaScript</h2>
          <p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
            Unlock dynamic behavior using JavaScript. Master DOM manipulation, event handling, and asynchronous programming. Build interactive user interfaces and enhance user experience.
          </p>
          <div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-start">
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">JavaScript ES6+</span>
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">DOM Manipulation</span>
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">APIs (Fetch)</span>
          </div>
        </div>

        <div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
        <div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
        <div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>

        <div class="md:flex-1 md:pr-8 mt-6 md:mt-0">
          <img src="https://picsum.photos/400/250?random=2" alt="Frontend Interactive" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
          <div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-end">
            <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Approx. 50 hours
          </div>
        </div>
      </div>

      <!-- Timeline Item 3 -->
      <div class="relative flex flex-col md:flex-row items-center">
        <div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
        <div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>

        <div class="md:flex-1 md:pr-8 md:text-right">
          <p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 3</p>
          <h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Modern Frameworks: Building SPAs</h2>
          <p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
            Step into the world of Single Page Applications. Learn the fundamentals of popular JavaScript frameworks like React, Vue, or Angular. Understand component-based architecture and state management.
          </p>
          <div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-end">
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">React/Vue/Angular</span>
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Component Architecture</span>
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">State Management</span>
          </div>
        </div>

        <div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
        <div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
        <div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>

        <div class="md:flex-1 md:pl-8 mt-6 md:mt-0">
          <img src="https://picsum.photos/400/250?random=3" alt="Modern Frameworks" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
          <div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-start">
            <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Approx. 60 hours
          </div>
        </div>
      </div>

      <!-- Timeline Item 4 -->
      <div class="relative flex flex-col md:flex-row-reverse items-center">
        <div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
        <div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>

        <div class="md:flex-1 md:pl-8 md:text-left">
          <p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 4</p>
          <h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Backend Fundamentals & Databases</h2>
          <p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
            Explore server-side development. Learn to build RESTful APIs with Node.js and Express. Understand database concepts with SQL (PostgreSQL) and NoSQL (MongoDB) and connect them to your frontend.
          </p>
          <div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-start">
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Node.js</span>
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Express.js</span>
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">SQL/NoSQL DBs</span>
          </div>
        </div>

        <div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
        <div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
        <div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>

        <div class="md:flex-1 md:pr-8 mt-6 md:mt-0">
          <img src="https://picsum.photos/400/250?random=4" alt="Backend & Databases" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
          <div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-end">
            <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Approx. 70 hours
          </div>
        </div>
      </div>

      <!-- Timeline Item 5 -->
      <div class="relative flex flex-col md:flex-row items-center">
        <div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
        <div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>

        <div class="md:flex-1 md:pr-8 md:text-right">
          <p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 5</p>
          <h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Deployment & DevOps Basics</h2>
          <p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
            Take your applications live. Understand deployment strategies, CI/CD pipelines, and cloud platforms like Netlify/Vercel for frontend and Heroku/AWS for backend. Learn basic version control with Git.
          </p>
          <div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-end">
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Git & GitHub</span>
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">CI/CD</span>
            <span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Cloud Deployment</span>
          </div>
        </div>

        <div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
        <div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
        <div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>

        <div class="md:flex-1 md:pl-8 mt-6 md:mt-0">
          <img src="https://picsum.photos/400/250?random=5" alt="Deployment & DevOps" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
          <div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-start">
            <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Approx. 35 hours
          </div>
        </div>
      </div>

      <!-- Example of the final step, could be a certificate or portfolio link -->
      <div class="relative flex flex-col items-center justify-center mt-12">
        <div class="absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-green-700 dark:bg-green-600 border-2 border-white dark:border-gray-900 z-10"></div>
        <h2 class="text-3xl font-bold text-center text-green-700 dark:text-green-500 mt-8 mb-6">
          Your Journey Completed!
        </h2>
        <p class="text-lg text-gray-700 dark:text-gray-300 text-center max-w-2xl mx-auto">
          Congratulations on completing your full-stack web development journey! You are now equipped with the skills to build and deploy modern web applications. Continue exploring and building!
        </p>
        <button class="mt-8 px-6 py-3 bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 text-white font-semibold rounded-lg shadow-md transition-colors duration-300">
          Explore More Courses
        </button>
      </div>
    </div>
  </div>
</div>

2要素認証コンポーネント

オーシャン/ブルーのカラーグラデーションとスムーズなトランジションで設計された、複雑で応答性の高い2要素認証(2FA)コンポーネントで、ニュースWebサイトやメディアアウトレットに適しています。ダークモードのサポートと豊富なインタラクティブインターフェイスが含まれています。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-blue-100 to-blue-300 dark:from-gray-900 dark:to-blue-950 transition-all duration-500 ease-in-out font-sans">

  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-500 ease-in-out group hover:shadow-2xl dark:shadow-blue-900/50 border border-blue-50/50 dark:border-blue-900 relative">

    <!-- Background Blob/Gradient Effect -->
    <div class="absolute -top-20 -left-20 w-64 h-64 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:from-blue-700 dark:to-blue-900 transition-all duration-500 ease-in-out"></div>
    <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-gradient-to-br from-cyan-400 to-sky-600 rounded-full mix-blend-multiply filter blur-xl opacity-70 animation-delay-2000 animate-blob dark:from-sky-700 dark:to-teal-900 transition-all duration-500 ease-in-out"></div>
    <div class="absolute -top-10 -right-10 w-48 h-48 bg-gradient-to-br from-indigo-400 to-purple-600 rounded-full mix-blend-multiply filter blur-xl opacity-70 animation-delay-4000 animate-blob dark:from-purple-700 dark:to-fuchsia-900 transition-all duration-500 ease-in-out"></div>

    <div class="p-8 sm:p-10 relative z-10">
      <div class="text-center mb-8">
        <svg class="mx-auto h-16 w-16 text-blue-600 dark:text-blue-400 transform transition-all duration-500 ease-in-out group-hover:scale-110" 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 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
        </svg>
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mt-4 leading-tight group-hover:text-amber-500 dark:group-hover:text-indigo-400 transition-colors duration-500 ease-in-out">
          Two-Factor Authentication
        </h2>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300 transition-colors duration-500 ease-in-out">
          Please enter the 6-digit code sent to your device.
        </p>
      </div>

      <form action="#" method="POST">
        <div class="space-y-6">
          <div class="flex justify-center space-x-2 sm:space-x-4">
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
            <span class="h-full w-2 sm:w-4 flex items-center justify-center text-gray-400 dark:text-gray-500 text-4xl">-</span>
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
            <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 p-0 text-center text-3xl font-bold rounded-xl border-2 border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-4 focus:ring-blue-400 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-500 transition-all duration-300 ease-in-out shadow-sm group-hover:border-blue-500 dark:group-hover:border-blue-600 appearance-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:-webkit-appearance-none [&::-webkit-outer-spin-button]:-webkit-appearance-none" inputmode="numeric" pattern="[0-9]*">
          </div>

          <button type="submit" class="w-full flex justify-center py-4 px-6 border border-transparent rounded-full shadow-lg text-lg font-semibold text-white bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-75 dark:from-blue-700 dark:to-blue-900 dark:hover:from-blue-600 dark:hover:to-blue-800 dark:focus:ring-blue-700 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group-hover:shadow-2xl group-hover:shadow-blue-500/40 dark:group-hover:shadow-blue-900/60">
            Verify Code
          </button>
        </div>
      </form>

      <div class="mt-8 text-center text-sm">
        <p class="mb-2 text-gray-600 dark:text-gray-300 transition-colors duration-500 ease-in-out">
          Didn't receive the code?
        </p>
        <p>
          <a href="#" class="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-300 ease-in-out hover:underline group-hover:text-blue-700 dark:group-hover:text-blue-500">
            Resend Code
          </a>
          <span class="mx-2 text-gray-400 dark:text-gray-600">•</span>
          <a href="#" class="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-300 ease-in-out hover:underline group-hover:text-blue-700 dark:group-hover:text-blue-500">
            Use another method
          </a>
        </p>

        <div class="mt-8 pt-6 border-t border-blue-100 dark:border-blue-900/50 transition-colors duration-500 ease-in-out">
          <p class="text-xs text-gray-500 dark:text-gray-400">
            Having trouble? <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline">Contact Support</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is for the blob animation - Tailwind CSS doesn't support complex keyframe animations directly */
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.6, -0.28, 0.735, 0.045);
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  /* Styles for input focus/auto-tabbing - requires JS for full functionality, but basic styling can be here */
  .space-x-2 > input:focus, .space-x-4 > input:focus {
    outline: none !important; /* Remove default outline */
  }
</style>

プログレスバーコンポーネント

政府/公共サービス向けの複雑で応答性の高いプログレスバーコンポーネントで、モノクロパレットと明るいアクセント、ダークモードのサポート、詳細な進行状況情報を備えたすっきりとしたミニマリストデザインが特徴です。

開けるプレビュー

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

  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 lg:p-10">
      <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100 leading-tight">Application Progress Overview</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-8 max-w-2xl text-base sm:text-lg">Track the current status of your public service application. Each step indicates a critical milestone in processing.</p>

      <!-- Global Progress Bar -->
      <div class="mb-8">
        <div class="flex justify-between items-center mb-2">
          <span class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-200">Overall Completion</span>
          <span class="text-xl sm:text-2xl font-bold text-teal-600 dark:text-teal-500">75%</span>
        </div>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden">
          <div class="bg-teal-600 dark:bg-teal-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 75%;"></div>
        </div>
      </div>

      <!-- Step-by-step Progress -->
      <div class="space-y-6 sm:space-y-8">

        <!-- Step 1: Completed -->
        <div class="flex items-start gap-4">
          <div class="flex-shrink-0 relative">
            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-teal-600 dark:bg-teal-500 rounded-full flex items-center justify-center text-white text-xl sm:text-2xl font-bold">
              <svg class="w-6 h-6 sm:w-7 sm:h-7" 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="M5 13l4 4L19 7"></path></svg>
            </div>
            <div class="absolute left-1/2 top-full mt-2 transform -translate-x-1/2 w-0.5 h-16 sm:h-20 bg-gray-300 dark:bg-gray-600"></div>
          </div>
          <div class="flex-grow pt-1">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">1. Application Submission</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base">Your application was successfully submitted on 2023-10-26.</p>
            <div class="flex items-center text-teal-600 dark:text-teal-500 mt-2 text-sm sm:text-base">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Completed
            </div>
          </div>
        </div>

        <!-- Step 2: Completed -->
        <div class="flex items-start gap-4">
          <div class="flex-shrink-0 relative">
            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-teal-600 dark:bg-teal-500 rounded-full flex items-center justify-center text-white text-xl sm:text-2xl font-bold">
              <svg class="w-6 h-6 sm:w-7 sm:h-7" 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="M5 13l4 4L19 7"></path></svg>
            </div>
            <div class="absolute left-1/2 top-full mt-2 transform -translate-x-1/2 w-0.5 h-16 sm:h-20 bg-gray-300 dark:bg-gray-600"></div>
          </div>
          <div class="flex-grow pt-1">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">2. Document Verification</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base">All submitted documents have been verified and confirmed.</p>
            <div class="flex items-center text-teal-600 dark:text-teal-500 mt-2 text-sm sm:text-base">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Completed
            </div>
          </div>
        </div>

        <!-- Step 3: In Progress -->
        <div class="flex items-start gap-4">
          <div class="flex-shrink-0 relative">
            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-teal-600 dark:bg-teal-500 rounded-full flex items-center justify-center text-white text-xl sm:text-2xl font-bold">3</div>
            <div class="absolute left-1/2 top-full mt-2 transform -translate-x-1/2 w-0.5 h-16 sm:h-20 bg-gray-300 dark:bg-gray-600"></div>
          </div>
          <div class="flex-grow pt-1">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">3. Review by Case Officer</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base">Your application is currently under review by a dedicated case officer. This may take up to 3-5 business days.</p>
            <div class="flex items-center text-blue-600 dark:text-blue-400 mt-2 text-sm sm:text-base leading-none">
              <div class="w-3 h-3 bg-blue-600 dark:bg-blue-400 rounded-full animate-pulse mr-2"></div>
              In Progress
            </div>
          </div>
        </div>

        <!-- Step 4: Pending -->
        <div class="flex items-start gap-4">
          <div class="flex-shrink-0">
            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gray-300 dark:bg-gray-600 rounded-full flex items-center justify-center text-gray-500 dark:text-gray-400 text-xl sm:text-2xl font-bold">4</div>
          </div>
          <div class="flex-grow pt-1">
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">4. Final Approval</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base">Awaiting final approval once the review process is complete.</p>
            <div class="flex items-center text-gray-500 dark:text-gray-400 mt-2 text-sm sm:text-base">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.3 2.147-1.3 2.912 0l5.572 9.573A1.5 1.5 0 0116 14.5H4c-.848 0-1.395-.837-.943-1.628l5.572-9.573zM10 15a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
              Pending
            </div>
          </div>
        </div>

      </div>

      <div class="mt-10 pt-6 border-t border-gray-200 dark:border-gray-700 text-center">
        <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base">Last updated: <span class="font-medium">2023-11-01, 10:30 AM (GMT+1)</span></p>
        <p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm mt-2">For inquiries, please contact our support team at <a href="mailto:[email protected]" class="text-teal-600 dark:text-teal-500 hover:underline">[email protected]</a>.</p>
      </div>
    </div>
  </div>

</div>

登録フォームコンポーネント

ネオン/グロー効果、クールなニュートラルカラースキーム、ダークモードのサポートを備えたシンプルでレスポンシブな登録フォームコンポーネントで、写真関連のWebサイトに適しています。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden animate-fade-in border border-gray-200 dark:border-gray-700 relative">
    <!-- Neon Box Shadow Effect -->
    <div class="absolute -inset-0.5 bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 rounded-lg blur opacity-75 animate-pulse dark:from-blue-600 dark:via-purple-700 dark:to-pink-700 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
    <div class="relative p-8 space-y-6 bg-white dark:bg-gray-800 rounded-lg">

      <h2 class="text-3xl font-extrabold text-center text-gray-900 dark:text-white mb-6 tracking-tight animate-fade-down">
        Register for <span class="text-blue-500 dark:text-blue-400">Inspiration</span>
      </h2>

      <form class="space-y-5">
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Full Name
          </label>
          <input type="text" id="full-name" name="full-name" placeholder="John Doe" autocomplete="name" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
            aria-label="Full Name">
        </div>

        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Email Address
          </label>
          <input type="email" id="email" name="email" placeholder="[email protected]" autocomplete="email" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
            aria-label="Email Address">
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Password
          </label>
          <input type="password" id="password" name="password" placeholder="••••••••" autocomplete="new-password" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
            aria-label="Password">
        </div>

        <div>
          <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
            Confirm Password
          </label>
          <input type="password" id="confirm-password" name="confirm-password" placeholder="••••••••" autocomplete="new-password" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500"
            aria-label="Confirm Password">
        </div>

        <button type="submit"
          class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white
            bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-600 dark:to-purple-600
            hover:from-blue-600 hover:to-purple-600 dark:hover:from-blue-700 dark:hover:to-purple-700
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400
            transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
            relative overflow-hidden group"
          aria-label="Register Account">
            Register
            <!-- Small glow effect on button hover -->
            <span class="absolute inset-0 w-full h-full transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 ease-out bg-gradient-to-r from-blue-300 to-purple-300 dark:from-blue-500 dark:to-purple-500 opacity-20"></span>
        </button>
      </form>

      <p class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
        Already have an account?
        <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200"
          aria-label="Login Link">
          Sign in
        </a>
      </p>
    </div>
  </div>
</div>

<!-- To demonstrate the glow/pulse effect better, ensure these keyframe animations are present in your CSS setup (e.g., in a global CSS file or via Tailwind's JIT mode if configured) -->
<style>
  @keyframes pulse { 
    0%, 100% { 
      opacity: 0.75;
    }
    50% {
      opacity: 1;
      transform: scale(1.02);
    }
  }
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-down {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
  }
  .animate-fade-down {
    animation: fade-down 0.5s ease-out forwards;
  }
</style>

Organic_Nature_Loader_Real_Estate

不動産プラットフォーム向けのシンプルで有機的で自然にインスパイアされたローディングコンポーネントで、流れるようなラインと鮮やかで彩度の高い色が特徴で、完全な応答性とダークモードがサポートされています。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-emerald-50 via-teal-50 to-cyan-50 dark:from-slate-900 dark:via-blue-950 dark:to-teal-950 p-4">
  <div class="relative w-32 h-32 md:w-48 md:h-48 group">
    <!-- Outer flowing circle -->
    <div class="absolute inset-0 rounded-full border-4 border-t-emerald-400 border-r-teal-500 border-b-cyan-400 border-l-lime-300 dark:border-t-emerald-700 dark:border-r-teal-800 dark:border-b-cyan-700 dark:border-l-lime-600 animate-spin-slow origin-center ease-in-out scale-100 group-hover:scale-110 transition-transform duration-500"></div>

    <!-- Inner flowing circle -->
    <div class="absolute inset-4 rounded-full border-4 border-t-teal-400 border-r-cyan-500 border-b-lime-400 border-l-emerald-300 dark:border-t-teal-700 dark:border-r-cyan-800 dark:border-b-lime-700 dark:border-l-emerald-600 animate-[spin-reverse_4s_linear_infinite] origin-center rotate-45 scale-90 group-hover:scale-100 transition-transform duration-500"></div>

    <!-- Central organic shape placeholder -->
    <div class="absolute inset-8 md:inset-12 bg-gradient-to-br from-emerald-300 via-teal-400 to-cyan-300 dark:from-emerald-600 dark:via-teal-700 dark:to-cyan-600 rounded-full flex items-center justify-center overflow-hidden transform animate-pulse-slight origin-center group-hover:rotate-12 transition-transform duration-500 shadow-md dark:shadow-lg">
      <svg class="w-10 h-10 md:w-16 md:h-16 text-white dark:text-gray-200 opacity-80" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 3.394l6 6H6l6-6zM7 14h10v4H7v-4z"/>
      </svg>
    </div>

    <!-- Organic-like leaf/petal elements (simplified for loader) -->
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-4 h-4 md:w-6 md:h-6 rounded-full bg-emerald-400 dark:bg-emerald-600 animate-[leaf-pulse_2s_ease-in-out_infinite_0s] transform rotate-45 origin-bottom-right group-hover:scale-125 transition-transform duration-500"></div>
    <div class="absolute bottom-0 right-1/2 translate-x-1/2 w-4 h-4 md:w-6 md:h-6 rounded-full bg-teal-400 dark:bg-teal-600 animate-[leaf-pulse_2s_ease-in-out_infinite_0.5s] transform -rotate-45 origin-top-left group-hover:scale-125 transition-transform duration-500"></div>
    <div class="absolute top-1/2 left-0 -translate-y-1/2 w-4 h-4 md:w-6 md:h-6 rounded-full bg-cyan-400 dark:bg-cyan-600 animate-[leaf-pulse_2s_ease-in-out_infinite_1s] transform rotate-135 origin-top-right group-hover:scale-125 transition-transform duration-500"></div>
    <div class="absolute bottom-1/2 right-0 translate-y-1/2 w-4 h-4 md:w-6 md:h-6 rounded-full bg-lime-400 dark:bg-lime-600 animate-[leaf-pulse_2s_ease-in-out_infinite_1.5s] transform -rotate-135 origin-bottom-left group-hover:scale-125 transition-transform duration-500"></div>
  </div>

  <style>
    @keyframes spin-slow {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes spin-reverse {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(-360deg); }
    }
    @keyframes pulse-slight {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.05); opacity: 0.95; }
    }

    @keyframes leaf-pulse {
      0%, 100% { transform: translateY(0) scale(1) rotate(attr(data-rotate-initial)); opacity: 1; }
      50% { transform: translateY(-5px) scale(1.1) rotate(attr(data-rotate-mid)); opacity: 0.8; }
    }
    /* Custom property for rotation */
    .absolute:nth-of-type(3)[data-rotate-initial="45deg"] { transform: rotate(45deg); }
    .absolute:nth-of-type(3)[data-rotate-mid="55deg"] { transform: rotate(55deg); }
  </style>
</div>

Luxury_Premium_CAPTCHA_Weather_Component

天候/気候アプリケーション向けの複雑でラグジュアリーをテーマにしたCAPTCHAコンポーネントで、クールなニュートラルカラー、洗練されたタイポグラフィ、ダークモードをサポートするレスポンシブデザインが特徴です。これには、視覚的なチャレンジ、「現在の天気」の表示、「気候データ」セクションなどの要素が含まれています。

開けるプレビュー

                <div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen p-4 sm:p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-10">
      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 sm:mb-8 pb-4 border-b border-gray-100 dark:border-gray-700">
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-gray-100 leading-tight tracking-tight mb-2 sm:mb-0">
          ClimateGuard Verification
        </h1>
        <div class="flex items-center space-x-3 text-gray-500 dark:text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 10.333v4.334m-6.75 0h13.5c.621 0 1.125-.504 1.125-1.125V10.5m1.5-4.5h-16.5a1.125 1.125 0 00-1.125 1.125v12.75c0 .621.504 1.125 1.125 1.125h16.5c.621 0 1.125-.504 1.125-1.125V7.875c0-.621-.504-1.125-1.125-1.125z" />
          </svg>
          <span class="text-sm sm:text-base font-medium">Secure Access to Climate Data</span>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
        <div class="flex flex-col">
          <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-5">Verify You Are Human</h2>
          <p class="text-gray-600 dark:text-gray-300 text-lg mb-6 leading-relaxed">
            To proceed and access comprehensive climate data, please complete the security challenge below.
            This helps us ensure data integrity and protect against automated access.
          </p>

          <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl p-4 sm:p-6 shadow-inner border border-gray-100 dark:border-gray-600 mb-6">
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Click on all images containing <span class="text-blue-600 dark:text-blue-400">'Stratocumulus Clouds'</span>:</p>
            <div class="grid grid-cols-3 gap-2 sm:gap-3">
              <button aria-label="Image 1" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/1041/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </div>
              </button>
              <button aria-label="Image 2" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/1018/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </div>
              </button>
              <button aria-label="Image 3" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/23/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </div>
              </button>
              <button aria-label="Image 4" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/1053/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </div>
              </button>
              <button aria-label="Image 5" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/10/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </div>
              </button>
              <button aria-label="Image 6" class="relative w-full aspect-square rounded-lg overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 group">
                <img src="https://picsum.photos/id/1004/300/200" alt="Image showing clouds" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                <div class="absolute inset-0 bg-blue-600/30 dark:bg-blue-800/30 opacity-0 group-focus:opacity-100 group-hover:opacity-100 flex items-center justify-center transition-opacity duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </div>
              </button>
            </div>
            <div class="flex justify-between items-center mt-6">
              <button type="button" class="flex items-center text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 16.087v-2.383m1.342 8.868L9.932 20m5.39-16.712L15.932 4.07m-5.463 8.356L2 10.978L6 6L10 10.978L6 14L2 10.978" />
                </svg>
                New Challenge
              </button>
              <button type="button" class="flex items-center text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.898 8.016l-3.69-3.69A2.25 2.25 0 0014.545 3H9.455c-.876 0-1.724.35-2.355.981L3.414 8.016m16.484 0l-3.69 3.69-3.69 3.69-3.69-3.69-3.69-3.69m7.38 0L9.454 3c-.876-.35-1.724-.981-2.355-2.355L3.414.016M12 21a9 9 0 100-18 9 9 0 000 18z" />
                </svg>
                Audio Challenge
              </button>
            </div>
          </div>

          <button type="submit" class="w-full py-4 text-lg font-bold bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 text-white rounded-xl shadow-lg transition-all duration-300 transform active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600">
            Validate Access
            <span class="ml-2 inline-block transition-transform group-hover:translate-x-1">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0zM4 10a1 1 0 011-1h9a1 1 0 110 2H5a1 1 0 01-1-1z" clip-rule="evenodd" />
              </svg>
            </span>
          </button>

        </div>

        <div class="space-y-8">
          <div>
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-5">Current Weather Overview</h2>
            <div class="bg-gradient-to-br from-blue-500 to-blue-700 dark:from-blue-700 dark:to-blue-900 rounded-2xl p-6 sm:p-8 text-white shadow-xl transform transition-all duration-300 hover:scale-[1.02]">
              <div class="flex justify-between items-center mb-4">
                <div>
                  <p class="text-5xl font-extrabold">24°C</p>
                  <p class="text-xl font-medium">London</p>
                </div>
                <img src="https://www.flaticon.com/svg/static/icons/svg/861/861056.svg" alt="Sunny icon" class="w-20 h-20 filter drop-shadow-lg">
              </div>
              <div class="grid grid-cols-2 gap-4 text-sm">
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  <span>Wind: 15 km/h</span>
                </div>
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h1M3 12H2m8.006-7.82l-.956-.956M15.82 4.18l.956-.956m-7.82 15.64l-.956.956m7.82-15.64l.956.956m-7.82 15.64l.956.956m-7.82 15.64l-.956.956M4.18 15.82l-.956.956m-1.956-6.75l.956-.956m15.64 7.82l.956.956M4.18 4.18l-.956-.956" />
                  </svg>
                  <span>Humidity: 65%</span>
                </div>
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.7L13.257 21a2 2 0 01-3.514 0L6.343 16.7A8 8 0 1117.657 16.7z" />
                  </svg>
                  <span>UV Index: 7 (High)</span>
                </div>
                <div class="flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 10.333v4.334m-6.75 0h13.5c.621 0 1.125-.504 1.125-1.125V10.5m1.5-4.5h-16.5a1.125 1.125 0 00-1.125 1.125v12.75c0 .621.504 1.125 1.125 1.125h16.5c.621 0 1.125-.504 1.125-1.125V7.875c0-.621-.504-1.125-1.125-1.125z" />
                  </svg>
                  <span>Precipitation: 0%</span>
                </div>
              </div>
            </div>
          </div>

          <div>
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-5">Global Climate Data Insights</h2>
            <div class="bg-gray-50 dark:bg-gray-700 rounded-2xl p-6 sm:p-8 shadow-inner border border-gray-100 dark:border-gray-600">
              <div class="flex items-start mb-4">
                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Climate scientist profile" class="w-16 h-16 rounded-full mr-4 shadow-lg border-2 border-blue-500 dark:border-blue-400">
                <p class="text-gray-700 dark:text-gray-200 text-lg">
                  "Recent data indicates a significant increase in global average temperatures. Urgent action is needed."
                  <br>
                  <span class="font-medium text-blue-600 dark:text-blue-400 text-sm">- Dr. Elara Vance, Climatologist</span>
                </p>
              </div>
              <ul class="list-none space-y-3 text-gray-600 dark:text-gray-300">
                <li class="flex items-center text-base">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6a3 3 0 01-3-3V6zm4 0a1 1 0 011-1h2a1 1 0 110 2H8a1 1 0 01-1-1zm1 3a1 1 0 100 2h2a1 1 0 100-2H8z" clip-rule="evenodd" />
                  </svg>
                  Average Global Temperature: <span class="font-semibold ml-1 text-gray-800 dark:text-gray-100">+1.2°C since pre-industrial levels</span>
                </li>
                <li class="flex items-center text-base">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
                  </svg>
                  CO2 Concentration: <span class="font-semibold ml-1 text-gray-800 dark:text-gray-100">419 ppm (Parts Per Million)</span>
                </li>
                <li class="flex items-center text-base">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.586l-2.293 2.293A1 1 0 0015 13.586V15h3a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2v-2a2 2 0 012-2h3.586l2.293-2.293A1 1 0 0010.586 1L1 18.293V18h3.586l2.293-2.293A1 1 0 006 14.586V1h3a2 2 0 012 2v1H6zm4 0V5a1 1 0 00-1-1H9a1 1 0 00-1 1v1h2z" clip-rule="evenodd" />
                  </svg>
                  Sea Level Rise: <span class="font-semibold ml-1 text-gray-800 dark:text-gray-100">~3.6 mm/year</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-8 pt-6 border-t border-gray-100 dark:border-gray-700 text-center text-gray-500 dark:text-gray-400 text-sm">
        <p>&copy; 2023 ClimateGuard. All rights reserved. Your data security is our priority.</p>
      </div>
    </div>
  </div>
</div>

インタラクティブなフードデリバリーコンポーネント

ネオングロー効果、鮮やかな色、複数のインタラクティブな要素を特徴とする、複雑でインタラクティブなフードデリバリーとレストランのコンポーネント。応答性とダークモードのサポートのために設計されています。

開けるプレビュー

                <div class="font-sans bg-gray-950 text-gray-50 dark:bg-black p-4 sm:p-6 lg:p-8 relative overflow-hidden">

  <!-- Glowing Background Elements -->
  <div class="absolute top-0 -left-64 w-96 h-96 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob dark:bg-purple-600"></div>
  <div class="absolute top-0 -right-64 w-96 h-96 bg-pink-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000 dark:bg-rose-600"></div>
  <div class="absolute -bottom-16 left-1/4 transform -translate-x-1/2 w-96 h-96 bg-green-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000 dark:bg-lime-600"></div>

  <div class="relative z-10 max-w-7xl mx-auto py-8 lg:py-12">
    <div class="text-center mb-10 lg:mb-16">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-4 animate-text-glow-slow relative">
        <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-pink-400 to-green-400 dark:from-sky-400 dark:via-fuchsia-400 dark:to-lime-400">Feast with the Glow!</span>
      </h2>
      <p class="text-lg sm:text-xl text-gray-300 dark:text-gray-400 mb-8 max-w-3xl mx-auto animate-fade-in animation-delay-500">
        Discover exquisite flavors and glowing deals, delivered fresh to your door.
      </p>

      <!-- Search Bar with Neon Border -->
      <div class="relative max-w-xl mx-auto">
        <input type="text" placeholder="Search for restaurants or dishes..." class="w-full p-4 pl-12 rounded-xl bg-gray-800 dark:bg-gray-900 text-white placeholder-gray-400 focus:outline-none focus:ring-4 ring-offset-2 ring-offset-gray-950 dark:ring-offset-black transition-all duration-300 
          border-2 border-transparent focus:border-blue-500 
          shadow-neon-blue-sm hover:shadow-neon-blue 
          dark:shadow-neon-purple-sm dark:hover:shadow-neon-purple 
          focus:shadow-neon-blue-md dark:focus:shadow-neon-purple-md">
        <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 10m-7 0a7 7 0 1014 0a7 7 0 10-14 0"></path><path d="m21 21-6-6"></path></svg>
      </div>
    </div>

    <!-- Category Grid -->
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6 mb-12">
      <!-- Category 1 -->
      <div class="group relative p-4 rounded-xl flex flex-col items-center justify-center transform hover:scale-105 transition-all duration-300 
        bg-gray-800/60 hover:bg-gray-700/80 dark:bg-gray-900/60 dark:hover:bg-gray-800/80
        border-2 border-transparent 
        hover:border-blue-500 dark:hover:border-purple-500
        shadow-neon-blue-sm hover:shadow-neon-blue-md 
        dark:shadow-neon-purple-sm dark:hover:shadow-neon-purple-md
        cursor-pointer">
        <img src="https://picsum.photos/id/1080/100/100" alt="Pizza" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-3 ring-2 ring-offset-2 ring-offset-gray-950 dark:ring-offset-black ring-blue-500 dark:ring-purple-500 glow-on-hover-img">
        <span class="font-semibold text-lg text-white group-hover:text-blue-300 dark:group-hover:text-purple-300 transition-colors duration-200 glow-on-text">Pizza</span>
      </div>
      <!-- Category 2 -->
      <div class="group relative p-4 rounded-xl flex flex-col items-center justify-center transform hover:scale-105 transition-all duration-300 
        bg-gray-800/60 hover:bg-gray-700/80 dark:bg-gray-900/60 dark:hover:bg-gray-800/80
        border-2 border-transparent 
        hover:border-pink-500 dark:hover:border-rose-500
        shadow-neon-pink-sm hover:shadow-neon-pink-md 
        dark:shadow-neon-rose-sm dark:hover:shadow-neon-rose-md
        cursor-pointer">
        <img src="https://picsum.photos/id/1050/100/100" alt="Burgers" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-3 ring-2 ring-offset-2 ring-offset-gray-950 dark:ring-offset-black ring-pink-500 dark:ring-rose-500 glow-on-hover-img">
        <span class="font-semibold text-lg text-white group-hover:text-pink-300 dark:group-hover:text-rose-300 transition-colors duration-200 glow-on-text">Burgers</span>
      </div>
      <!-- Category 3 -->
      <div class="group relative p-4 rounded-xl flex flex-col items-center justify-center transform hover:scale-105 transition-all duration-300 
        bg-gray-800/60 hover:bg-gray-700/80 dark:bg-gray-900/60 dark:hover:bg-gray-800/80
        border-2 border-transparent 
        hover:border-green-500 dark:hover:border-lime-500
        shadow-neon-green-sm hover:shadow-neon-green-md 
        dark:shadow-neon-lime-sm dark:hover:shadow-neon-lime-md
        cursor-pointer">
        <img src="https://picsum.photos/id/1005/100/100" alt="Sushi" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-3 ring-2 ring-offset-2 ring-offset-gray-950 dark:ring-offset-black ring-green-500 dark:ring-lime-500 glow-on-hover-img">
        <span class="font-semibold text-lg text-white group-hover:text-green-300 dark:group-hover:text-lime-300 transition-colors duration-200 glow-on-text">Sushi</span>
      </div>
      <!-- Category 4 -->
      <div class="group relative p-4 rounded-xl flex flex-col items-center justify-center transform hover:scale-105 transition-all duration-300 
        bg-gray-800/60 hover:bg-gray-700/80 dark:bg-gray-900/60 dark:hover:bg-gray-800/80
        border-2 border-transparent 
        hover:border-yellow-500 dark:hover:border-yellow-500
        shadow-neon-yellow-sm hover:shadow-neon-yellow-md 
        dark:shadow-neon-orange-sm dark:hover:shadow-neon-orange-md
        cursor-pointer">
        <img src="https://picsum.photos/id/200/100/100" alt="Desserts" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-3 ring-2 ring-offset-2 ring-offset-gray-950 dark:ring-offset-black ring-yellow-500 dark:ring-orange-500 glow-on-hover-img">
        <span class="font-semibold text-lg text-white group-hover:text-yellow-300 dark:group-hover:text-orange-300 transition-colors duration-200 glow-on-text">Desserts</span>
      </div>
    </div>

    <!-- Featured Restaurants Section -->
    <h3 class="text-3xl sm:text-4xl font-bold mb-8 text-center text-white relative animate-fade-in animation-delay-700">
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-400 to-green-400 dark:from-fuchsia-400 dark:to-lime-400">Top Rated Establishments</span>
    </h3>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Restaurant Card 1 -->
      <div class="group relative p-6 rounded-xl overflow-hidden 
        bg-gray-800/70 hover:bg-gray-700/90 dark:bg-gray-900/70 dark:hover:bg-gray-800/90
        border-2 border-transparent 
        hover:border-blue-500 dark:hover:border-purple-500
        shadow-neon-blue-sm hover:shadow-neon-blue-md transition-all duration-300 cursor-pointer">
        <img src="https://picsum.photos/id/1060/400/250" alt="Restaurant Image" class="w-full h-48 object-cover rounded-md mb-4 saturate-150 group-hover:saturate-200 transition-all duration-300 ">
        <h4 class="text-xl font-bold mb-2 text-white group-hover:text-blue-300 dark:group-hover:text-purple-300 transition-colors duration-200">The Neon Bistro</h4>
        <p class="text-gray-300 dark:text-gray-400 text-sm mb-3">Gourmet fusion with a modern twist.</p>
        <div class="flex items-center text-yellow-400 mb-4">
          <svg class="w-5 h-5 fill-current" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg>
          <span class="ml-1 font-semibold">4.9</span> <span class="text-gray-400">(1.5k reviews)</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-lg font-semibold text-green-400 glow-on-text">Open Now</span>
          <button class="px-4 py-2 rounded-full text-white font-semibold transition-all duration-300 
            bg-gradient-to-r from-blue-600 to-pink-600 
            hover:from-blue-500 hover:to-pink-500
            shadow-neon-blue-md hover:shadow-neon-blue-lg
            dark:from-purple-600 dark:to-rose-600
            dark:hover:from-purple-500 dark:hover:to-rose-500
            dark:shadow-neon-purple-md dark:hover:shadow-neon-purple-lg">
            Order Now
          </button>
        </div>
      </div>

      <!-- Restaurant Card 2 -->
      <div class="group relative p-6 rounded-xl overflow-hidden 
        bg-gray-800/70 hover:bg-gray-700/90 dark:bg-gray-900/70 dark:hover:bg-gray-800/90
        border-2 border-transparent 
        hover:border-pink-500 dark:hover:border-rose-500
        shadow-neon-pink-sm hover:shadow-neon-pink-md transition-all duration-300 cursor-pointer">
        <img src="https://picsum.photos/id/1069/400/250" alt="Restaurant Image" class="w-full h-48 object-cover rounded-md mb-4 saturate-150 group-hover:saturate-200 transition-all duration-300">
        <h4 class="text-xl font-bold mb-2 text-white group-hover:text-pink-300 dark:group-hover:text-rose-300 transition-colors duration-200">Glow Grille & Bar</h4>
        <p class="text-gray-300 dark:text-gray-400 text-sm mb-3">Classic comfort food with a lively atmosphere.</p>
        <div class="flex items-center text-yellow-400 mb-4">
          <svg class="w-5 h-5 fill-current" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg>
          <span class="ml-1 font-semibold">4.7</span> <span class="text-gray-400">(980 reviews)</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-lg font-semibold text-green-400 glow-on-text">Open Now</span>
          <button class="px-4 py-2 rounded-full text-white font-semibold transition-all duration-300 
            bg-gradient-to-r from-pink-600 to-green-600 
            hover:from-pink-500 hover:to-green-500
            shadow-neon-pink-md hover:shadow-neon-pink-lg
            dark:from-rose-600 dark:to-lime-600
            dark:hover:from-rose-500 dark:hover:to-lime-500
            dark:shadow-neon-rose-md dark:hover:shadow-neon-rose-lg">
            Order Now
          </button>
        </div>
      </div>

      <!-- Restaurant Card 3 -->
      <div class="group relative p-6 rounded-xl overflow-hidden 
        bg-gray-800/70 hover:bg-gray-700/90 dark:bg-gray-900/70 dark:hover:bg-gray-800/90
        border-2 border-transparent 
        hover:border-green-500 dark:hover:border-lime-500
        shadow-neon-green-sm hover:shadow-neon-green-md transition-all duration-300 cursor-pointer">
        <img src="https://picsum.photos/id/1084/400/250" alt="Restaurant Image" class="w-full h-48 object-cover rounded-md mb-4 saturate-150 group-hover:saturate-200 transition-all duration-300">
        <h4 class="text-xl font-bold mb-2 text-white group-hover:text-green-300 dark:group-hover:text-lime-300 transition-colors duration-200">Electric Eats Diner</h4>
        <p class="text-gray-300 dark:text-gray-400 text-sm mb-3">Modern diner fare, always electrifying.</p>
        <div class="flex items-center text-yellow-400 mb-4">
          <svg class="w-5 h-5 fill-current" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path></svg>
          <span class="ml-1 font-semibold">4.8</span> <span class="text-gray-400">(1.2k reviews)</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-lg font-semibold text-red-400 glow-on-text">Closed</span>
          <button class="px-4 py-2 rounded-full text-white font-semibold transition-all duration-300 opacity-70 cursor-not-allowed 
            bg-gray-600 
            shadow-neon-gray-sm 
            dark:bg-gray-700 
            dark:shadow-neon-gray-sm">
            Closed
          </button>
        </div>
      </div>
    </div>

    <!-- Testimonials Section -->
    <h3 class="text-3xl sm:text-4xl font-bold mt-16 mb-8 text-center text-white relative animate-fade-in animation-delay-900">
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-blue-400 dark:from-orange-400 dark:to-purple-400">What Our Patrons Say (Glowingly)</span>
    </h3>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <!-- Testimonial 1 -->
      <div class="relative p-6 rounded-xl 
        bg-gray-800/70 dark:bg-gray-900/70
        border-2 border-transparent 
        shadow-neon-blue-sm dark:shadow-neon-purple-sm transition-all duration-300">
        <p class="text-gray-300 dark:text-gray-400 text-lg mb-6 leading-relaxed">
          "Absolutely mesmerizing! The app's interface is stunning with its vibrant neon glow, making ordering food a truly delightful experience. And the delivery speed? Electrifyingly fast!"
        </p>
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer Avatar" class="w-14 h-14 rounded-full mr-4 ring-2 ring-blue-500 dark:ring-purple-500 glow-on-hover-img">
          <div>
            <p class="font-bold text-white text-lg">Anya Sharma</p>
            <p class="text-gray-400 text-sm">Food Enthusiast</p>
          </div>
        </div>
      </div>

      <!-- Testimonial 2 -->
      <div class="relative p-6 rounded-xl 
        bg-gray-800/70 dark:bg-gray-900/70
        border-2 border-transparent 
        shadow-neon-pink-sm dark:shadow-neon-rose-sm transition-all duration-300">
        <p class="text-gray-300 dark:text-gray-400 text-lg mb-6 leading-relaxed">
          "Never thought ordering takeout could be this cool! The UI feels futuristic and the glow effects are a fantastic touch. Found my new favorite burger joint through this platform. Highly recommend!"
        </p>
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar" class="w-14 h-14 rounded-full mr-4 ring-2 ring-pink-500 dark:ring-rose-500 glow-on-hover-img">
          <div>
            <p class="font-bold text-white text-lg">Michael Chen</p>
            <p class="text-gray-400 text-sm">Tech Foodie</p>
          </div>
        </div>
      </div>
    </div>

  </div>

  <style>
    @keyframes blob {
      0% { transform: translate(0px, 0px) scale(1); }
      33% { transform: translate(30px, -50px) scale(1.1); }
      66% { transform: translate(-20px, 20px) scale(0.9); }
      100% { transform: translate(0px, 0px) scale(1); }
    }

    @keyframes text-glow-slow {
      0%, 100% { text-shadow: 0 0 5px rgba(255,255,255,0.2), 0 0 10px rgba(71, 185, 255, 0.4), 0 0 15px rgba(255, 0, 255, 0.4); }
      50% { text-shadow: 0 0 10px rgba(255,255,255,0.4), 0 0 20px rgba(71, 185, 255, 0.6), 0 0 30px rgba(255, 0, 255, 0.6); }
    }
    .dark .animate-text-glow-slow {
      animation-name: dark-text-glow-slow;
    }
    @keyframes dark-text-glow-slow {
      0%, 100% { text-shadow: 0 0 5px rgba(255,255,255,0.2), 0 0 10px rgba(128, 0, 128, 0.4), 0 0 15px rgba(0, 255, 0, 0.4); }
      50% { text-shadow: 0 0 10px rgba(255,255,255,0.4), 0 0 20px rgba(128, 0, 128, 0.6), 0 0 30px rgba(0, 255, 0, 0.6); }
    }

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

    .animate-blob { animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55); }
    .animation-delay-2000 { animation-delay: 2s; }
    .animation-delay-4000 { animation-delay: 4s; }
    .animate-fade-in { animation: fade-in 1s ease-out forwards; }
    .animation-delay-500 { animation-delay: 0.5s; }
    .animation-delay-700 { animation-delay: 0.7s; }
    .animation-delay-900 { animation-delay: 0.9s; }

    /* Tailwind Custom Shadows (approximate neon glow) */
    .shadow-neon-blue-sm {
      box-shadow: 0 0 5px rgba(0, 179, 255, 0.5);
    }
    .hover\:shadow-neon-blue,
    .focus\:shadow-neon-blue-md {
      box-shadow: 0 0 10px rgba(0, 179, 255, 0.7), 0 0 20px rgba(0, 179, 255, 0.5);
    }

    .shadow-neon-blue-md {
      box-shadow: 0 0 10px rgba(0, 179, 255, 0.7), 0 0 20px rgba(0, 179, 255, 0.5);
    }
    .hover\:shadow-neon-blue-lg {
      box-shadow: 0 0 15px rgba(0, 179, 255, 0.8), 0 0 30px rgba(0, 179, 255, 0.6);
    }

    .shadow-neon-pink-sm {
      box-shadow: 0 0 5px rgba(255, 0, 179, 0.5);
    }
    .hover\:shadow-neon-pink-md {
      box-shadow: 0 0 10px rgba(255, 0, 179, 0.7), 0 0 20px rgba(255, 0, 179, 0.5);
    }
    .hover\:shadow-neon-pink-lg {
      box-shadow: 0 0 15px rgba(255, 0, 179, 0.8), 0 0 30px rgba(255, 0, 179, 0.6);
    }

    .shadow-neon-green-sm {
      box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
    }
    .hover\:shadow-neon-green-md {
      box-shadow: 0 0 10px rgba(0, 255, 0, 0.7), 0 0 20px rgba(0, 255, 0, 0.5);
    }
    .hover\:shadow-neon-green-lg {
      box-shadow: 0 0 15px rgba(0, 255, 0, 0.8), 0 0 30px rgba(0, 255, 0, 0.6);
    }

    .shadow-neon-yellow-sm {
      box-shadow: 0 0 5px rgba(255, 255, 0, 0.5);
    }
    .hover\:shadow-neon-yellow-md {
      box-shadow: 0 0 10px rgba(255, 255, 0, 0.7), 0 0 20px rgba(255, 255, 0, 0.5);
    }

    .shadow-neon-gray-sm {
      box-shadow: 0 0 5px rgba(128, 128, 128, 0.3);
    }

    /* Dark Mode specific shadows */
    .dark .shadow-neon-purple-sm {
      box-shadow: 0 0 5px rgba(128, 0, 128, 0.5);
    }
    .dark .hover\:shadow-neon-purple,
    .dark .focus\:shadow-neon-purple-md {
      box-shadow: 0 0 10px rgba(128, 0, 128, 0.7), 0 0 20px rgba(128, 0, 128, 0.5);
    }
    .dark .shadow-neon-purple-md {
      box-shadow: 0 0 10px rgba(128, 0, 128, 0.7), 0 0 20px rgba(128, 0, 128, 0.5);
    }
    .dark .hover\:shadow-neon-purple-lg {
      box-shadow: 0 0 15px rgba(128, 0, 128, 0.8), 0 0 30px rgba(128, 0, 128, 0.6);
    }

    .dark .shadow-neon-rose-sm {
      box-shadow: 0 0 5px rgba(255, 0, 100, 0.5);
    }
    .dark .hover\:shadow-neon-rose-md {
      box-shadow: 0 0 10px rgba(255, 0, 100, 0.7), 0 0 20px rgba(255, 0, 100, 0.5);
    }
    .dark .hover\:shadow-neon-rose-lg {
      box-shadow: 0 0 15px rgba(255, 0, 100, 0.8), 0 0 30px rgba(255, 0, 100, 0.6);
    }

    .dark .shadow-neon-lime-sm {
      box-shadow: 0 0 5px rgba(128, 255, 0, 0.5);
    }
    .dark .hover\:shadow-neon-lime-md {
      box-shadow: 0 0 10px rgba(128, 255, 0, 0.7), 0 0 20px rgba(128, 255, 0, 0.5);
    }
    .dark .hover\:shadow-neon-lime-lg {
      box-shadow: 0 0 15px rgba(128, 255, 0, 0.8), 0 0 30px rgba(128, 255, 0, 0.6);
    }

    .dark .shadow-neon-orange-sm {
      box-shadow: 0 0 5px rgba(255, 128, 0, 0.5);
    }
    .dark .hover\:shadow-neon-orange-md {
      box-shadow: 0 0 10px rgba(255, 128, 0, 0.7), 0 0 20px rgba(255, 128, 0, 0.5);
    }

    .dark .shadow-neon-gray-sm {
      box-shadow: 0 0 5px rgba(100, 100, 100, 0.3);
    }

    /* Image and text glow on hover */
    .glow-on-hover-img:hover {
      filter: drop-shadow(0 0 8px currentColor);
    }
    .group:hover .glow-on-text {
      filter: drop-shadow(0 0 5px currentColor);
    }


  </style>
</div>

ハンバーガーメニューコンポーネント

キャンディー/甘い色の複雑な紙/印刷物にインスパイアされたハンバーガーメニューコンポーネントで、政府/公共サービスのWebサイト向けに設計されています。ダークモードをサポートするレスポンシブデザインが特徴で、物理的な紙を模倣し、明るく陽気な色の要素を印刷します。

開けるプレビュー

                <div class="font-sans bg-amber-50 dark:bg-zinc-800 text-slate-800 dark:text-zinc-50 min-h-screen relative">

  <!-- Main Content Area (for demonstration) -->
  <div class="p-8 md:p-12 lg:p-16 flex flex-col items-center justify-center min-h-screen">
    <h1 class="text-3xl md:text-5xl lg:text-6xl font-extrabold text-pink-700 dark:text-pink-400 mb-4 text-center leading-tight tracking-tight drop-shadow-md">
      Public Service Portal
    </h1>
    <p class="text-lg md:text-xl text-center max-w-2xl text-lime-700 dark:text-lime-300 mb-8">
      Your trusted source for government information and public services. Explore our resources.
    </p>
    <img src="https://picsum.photos/seed/public/800/450" alt="Placeholder Image" class="rounded-lg shadow-xl mb-8 border-4 border-l-rose-300 border-t-purple-300 border-r-mint-300 border-b-yellow-300 dark:border-l-rose-600 dark:border-t-purple-600 dark:border-r-emerald-600 dark:border-b-yellow-600 max-w-full h-auto">
    <button class="px-8 py-4 bg-gradient-to-br from-pink-500 to-rose-600 text-white font-bold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 text-lg md:text-xl 
                   border-2 border-pink-700 dark:border-purple-300 
                   relative overflow-hidden group">
      <span class="absolute inset-0 bg-gradient-to-br from-pink-600 to-rose-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
      <span class="relative z-10">Learn More</span>
    </button>
  </div>

  <!-- Hamburger Menu Button -->
  <input type="checkbox" id="menu-toggle" class="hidden peer">
  <label for="menu-toggle" class="fixed top-4 right-4 z-50 p-3 bg-gradient-to-br from-purple-400 to-indigo-500 dark:from-purple-700 dark:to-indigo-800 rounded-full shadow-lg cursor-pointer transition-transform duration-300 hover:scale-105 active:scale-95 
                           border-2 border-purple-600 dark:border-indigo-600 
                           flex flex-col items-center justify-center group w-14 h-14">
    <span class="block w-8 h-1 bg-white rounded-full transition-all duration-300 ease-in-out group-hover:bg-yellow-200 peer-checked:rotate-45 peer-checked:translate-y-2"></span>
    <span class="block w-8 h-1 bg-white rounded-full my-1 transition-all duration-300 ease-in-out group-hover:bg-yellow-200 peer-checked:opacity-0"></span>
    <span class="block w-8 h-1 bg-white rounded-full transition-all duration-300 ease-in-out group-hover:bg-yellow-200 peer-checked:-rotate-45 peer-checked:-translate-y-2"></span>
  </label>

  <!-- Offcanvas Menu Overlay -->
  <div class="fixed inset-0 bg-black/40 dark:bg-black/80 backdrop-blur-sm z-40 opacity-0 pointer-events-none peer-checked:opacity-100 peer-checked:pointer-events-auto transition-opacity duration-500"></div>

  <!-- Offcanvas Menu Content -->
  <nav class="fixed top-0 right-0 h-full w-full max-w-xs md:max-w-sm lg:max-w-md bg-gradient-to-br from-pink-100 to-purple-100 dark:from-zinc-700 dark:to-stone-700 shadow-2xl transform translate-x-full peer-checked:translate-x-0 transition-transform duration-500 ease-in-out z-50 
             p-6 md:p-8 overflow-y-auto 
             border-l-4 border-t-4 border-b-4 border-r-4 
             border-l-pink-400 border-t-purple-400 border-b-green-400 border-r-yellow-400 
             dark:border-l-pink-700 dark:border-t-purple-700 dark:border-b-emerald-700 dark:border-r-yellow-700 
             rounded-bl-3xl border-dashed">

    <div class="text-center mb-8 pb-4 border-b border-rose-300 dark:border-rose-600 relative">
      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-lime-300 dark:border-lime-500 shadow-md transform -rotate-3 hover:rotate-0 hover:scale-110 transition-all duration-300">
      <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 tracking-wide">Welcome!</h2>
      <p class="text-sm text-gray-600 dark:text-gray-300">Citizen Services</p>

      <!-- Paper Clip Effect -->
      <div class="absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-12 bg-gray-300 dark:bg-gray-600 rounded-b-lg shadow-inner z-0 
                   before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-4 before:bg-gradient-to-b before:from-gray-400 before:to-gray-300 dark:before:from-gray-700 dark:before:to-gray-600 before:rounded-t-lg 
                   after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-4 after:h-4 after:rounded-full after:bg-gray-500 dark:after:bg-gray-800 after:shadow-md"></div>

      <!-- Staple Effect -->
      <div class="absolute top-1/2 left-4 -translate-y-1/2 w-3 h-3 bg-gray-400 dark:bg-gray-500 border border-gray-500 dark:border-gray-600 rotate-45 shadow-sm"></div>
      <div class="absolute top-1/2 right-4 -translate-y-1/2 w-3 h-3 bg-gray-400 dark:bg-gray-500 border border-gray-500 dark:border-gray-600 rotate-45 shadow-sm"></div>
    </div>

    <ul class="space-y-4 md:space-y-5">
      <li>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-rose-200 dark:hover:bg-zinc-600 transition-all duration-200 group 
                   border-2 border-transparent hover:border-pink-300 dark:hover:border-pink-600 
                   relative overflow-hidden">
          <span class="absolute inset-0 bg-rose-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <svg class="w-6 h-6 mr-3 text-pink-600 dark:text-pink-400 group-hover:text-pink-800 dark:group-hover:text-pink-200 relative z-10" 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-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h2a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1h3a1 1 0 001-1V9a7 7 0 00-14 0v2z"></path>
          </svg>
          <span class="text-lg font-medium text-pink-800 dark:text-pink-200 group-hover:text-pink-900 dark:group-hover:text-pink-100 relative z-10">Home</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-purple-200 dark:hover:bg-zinc-600 transition-all duration-200 group 
                   border-2 border-transparent hover:border-purple-300 dark:hover:border-purple-600 
                   relative overflow-hidden">
          <span class="absolute inset-0 bg-purple-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <svg class="w-6 h-6 mr-3 text-purple-600 dark:text-purple-400 group-hover:text-purple-800 dark:group-hover:text-purple-200 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
          </svg>
          <span class="text-lg font-medium text-purple-800 dark:text-purple-200 group-hover:text-purple-900 dark:group-hover:text-purple-100 relative z-10">Services</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-lime-200 dark:hover:bg-zinc-600 transition-all duration-200 group 
                   border-2 border-transparent hover:border-lime-300 dark:hover:border-emerald-600 
                   relative overflow-hidden">
          <span class="absolute inset-0 bg-lime-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <svg class="w-6 h-6 mr-3 text-lime-600 dark:text-lime-400 group-hover:text-lime-800 dark:group-hover:text-lime-200 relative z-10" 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="M7 8h10M7 12h10M7 16h10M9 17v-1.5a2.5 2.5 0 015 0V17c0 .733-.24 1.42-.697 1.984l-.066.079a4.524 4.524 0 01-6.495 0l-.066-.079A3.013 3.013 0 006 17v-1.5a2.5 2.5 0 015 0V17c0 .733-.24 1.42-.697 1.984l-.066.079a4.524 4.524 0 01-6.495 0l-.066-.079A3.013 3 0 006 17v-1.5a2.5 2.5 0 015 0V17z"></path>
          </svg>
          <span class="text-lg font-medium text-lime-800 dark:text-lime-200 group-hover:text-lime-900 dark:group-hover:text-lime-100 relative z-10">News & Updates</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-yellow-200 dark:hover:bg-zinc-600 transition-all duration-200 group 
                   border-2 border-transparent hover:border-yellow-300 dark:hover:border-yellow-600 
                   relative overflow-hidden">
          <span class="absolute inset-0 bg-yellow-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <svg class="w-6 h-6 mr-3 text-yellow-600 dark:text-yellow-400 group-hover:text-yellow-800 dark:group-hover:text-yellow-200 relative z-10" 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 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586L6 18H4a2 2 0 01-2-2V6a2 2 0 012-2h12a2 2 0 012 2v2z"></path>
          </svg>
          <span class="text-lg font-medium text-yellow-800 dark:text-yellow-200 group-hover:text-yellow-900 dark:group-hover:text-yellow-100 relative z-10">Contact Us</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-indigo-200 dark:hover:bg-zinc-600 transition-all duration-200 group 
                   border-2 border-transparent hover:border-indigo-300 dark:hover:border-indigo-600 
                   relative overflow-hidden">
          <span class="absolute inset-0 bg-indigo-100 dark:bg-zinc-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <svg class="w-6 h-6 mr-3 text-indigo-600 dark:text-indigo-400 group-hover:text-indigo-800 dark:group-hover:text-indigo-200 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="text-lg font-medium text-indigo-800 dark:text-indigo-200 group-hover:text-indigo-900 dark:group-hover:text-indigo-100 relative z-10">About Us</span>
        </a>
      </li>
    </ul>

    <!-- Decorative elements mimicking torn paper edge -->
    <div class="absolute bottom-0 left-0 w-full h-8 bg-gradient-to-t from-pink-200/50 to-transparent dark:from-zinc-800/50 dark:to-transparent pointer-events-none 
                before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-stripes-gradient before:bg-[length:16px_16px] before:-skew-y-1 
                after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-4 after:bg-pink-100 dark:after:bg-zinc-700"></div>

    <!-- Sticky Note Section -->
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 w-48 p-4 bg-yellow-200 dark:bg-yellow-700 text-yellow-900 dark:text-yellow-100 rounded-lg shadow-lg rotate-3 hover:rotate-0 transition-transform duration-300 
                border-2 border-yellow-300 dark:border-yellow-600 
                flex flex-col items-center justify-center text-center mt-8">
      <p class="text-sm font-semibold mb-2">Important Notice!</p>
      <p class="text-xs">Upcoming policy changes effective Jan 1, 2024. Stay informed!</p>
      <div class="absolute -top-3 left-1/2 -translate-x-1/2 w-6 h-6 bg-red-400 dark:bg-red-600 rounded-full shadow-md border-2 border-red-500 dark:border-red-700 transform rotate-12"></div>
    </div>

  </nav>
</div>


<style>
/* Define the custom stripes gradient for torn paper effect */
.bg-stripes-gradient {
  background-image: linear-gradient(135deg, 
    var(--tw-gradient-stops, 
      rgba(255, 255, 255, 0.1) 0%, 
      rgba(255, 255, 255, 0.1) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(255, 255, 255, 0.1) 50%, 
      rgba(255, 255, 255, 0.1) 75%, 
      transparent 75%, 
      transparent 100%
    )
  );
  background-size: 16px 16px;
}

/* Dark mode adjustments for stripes */
.dark .bg-stripes-gradient {
  background-image: linear-gradient(135deg, 
    var(--tw-gradient-stops, 
      rgba(0, 0, 0, 0.1) 0%, 
      rgba(0, 0, 0, 0.1) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(0, 0, 0, 0.1) 50%, 
      rgba(0, 0, 0, 0.1) 75%, 
      transparent 75%, 
      transparent 100%
    )
  );
}
</style>

Industrial_Site_Map_Component

温かみのあるニュートラルを使用した、工業デザインの美学を備えた農業/農業Webサイト用のサイトマップコンポーネント。レスポンシブレイアウト、ダークモードのサポート、インタラクティブリンクセクションを備えています。

開けるプレビュー

                <section class="bg-stone-50 text-stone-800 py-16 dark:bg-stone-900 dark:text-stone-200 transition-colors duration-300">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-12 uppercase tracking-wide border-b-4 border-b-amber-500 pb-4 dark:border-b-amber-600">
      Site Map
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">

      <!-- Column 1: Company Info -->
      <div class="bg-white p-8 rounded-lg shadow-xl border-t-4 border-amber-400 dark:bg-stone-800 dark:border-amber-700 transition-all duration-300 transform hover:scale-105">
        <h3 class="text-2xl font-bold mb-6 text-amber-700 dark:text-amber-500 border-b-2 border-stone-200 pb-3 dark:border-stone-700">Our Farm</h3>
        <ul class="space-y-3 ">
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-seedling mr-2 text-amber-500"></i> About Us</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-award mr-2 text-amber-500"></i> Our Heritage</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-tractor mr-2 text-amber-500"></i> Farming Practices</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-users mr-2 text-amber-500"></i> Meet the Team</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-map-marker-alt mr-2 text-amber-500"></i> Contact Us</a></li>
        </ul>
      </div>

      <!-- Column 2: Products & Services -->
      <div class="bg-white p-8 rounded-lg shadow-xl border-t-4 border-amber-400 dark:bg-stone-800 dark:border-amber-700 transition-all duration-300 transform hover:scale-105">
        <h3 class="text-2xl font-bold mb-6 text-amber-700 dark:text-amber-500 border-b-2 border-stone-200 pb-3 dark:border-stone-700">Crops & Goods</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-wheat-alt mr-2 text-amber-500"></i> Grains & Cereals</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-apple-alt mr-2 text-amber-500"></i> Fruits & Vegetables</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-leaf mr-2 text-amber-500"></i> Organic Produce</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-mortar-pestle mr-2 text-amber-500"></i> Processed Goods</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-truck-moving mr-2 text-amber-500"></i> Delivery Services</a></li>
        </ul>
      </div>

      <!-- Column 3: Resources & Insights -->
      <div class="bg-white p-8 rounded-lg shadow-xl border-t-4 border-amber-400 dark:bg-stone-800 dark:border-amber-700 transition-all duration-300 transform hover:scale-105">
        <h3 class="text-2xl font-bold mb-6 text-amber-700 dark:text-amber-500 border-b-2 border-stone-200 pb-3 dark:border-stone-700">Resources</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-newspaper mr-2 text-amber-500"></i> Blog & News</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-book-open mr-2 text-amber-500"></i> Research & Reports</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-cogs mr-2 text-amber-500"></i> Farm Technology</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-question-circle mr-2 text-amber-500"></i> FAQs</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-map mr-2 text-amber-500"></i> Sitemap</a></li>
        </ul>
      </div>

      <!-- Column 4: Legal & Policies -->
      <div class="bg-white p-8 rounded-lg shadow-xl border-t-4 border-amber-400 dark:bg-stone-800 dark:border-amber-700 transition-all duration-300 transform hover:scale-105">
        <h3 class="text-2xl font-bold mb-6 text-amber-700 dark:text-amber-500 border-b-2 border-stone-200 pb-3 dark:border-stone-700">Legal & Privacy</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-file-contract mr-2 text-amber-500"></i> Terms of Service</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-user-shield mr-2 text-amber-500"></i> Privacy Policy</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-cookie-bite mr-2 text-amber-500"></i> Cookie Policy</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-gavel mr-2 text-amber-500"></i> Legal Disclaimer</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-sitemap mr-2 text-amber-500"></i> XML Sitemap</a></li>
        </ul>
      </div>

    </div>

    <div class="mt-16 text-center text-stone-600 dark:text-stone-400">
      <p>&copy; 2023 AgroFarm Inc. All rights reserved. Cultivating the future, responsibly.</p>
    </div>
  </div>
</section>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

1 ... 32 33 34 35 36 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント