検索コンポーネント

すべてのコンポーネント

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

オーガニックな自然にインスパイアされた検索ボックス

有機的で自然にインスパイアされたデザインと虹色のグラデーションを備えたシンプルでレスポンシブな検索ボックスコンポーネントで、ビジネスや企業のWebサイトに適しています。ダークモードのサポートが含まれています。

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-100 via-sky-100 to-green-100 dark:from-gray-900 dark:via-blue-950 dark:to-teal-950 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-xl mx-auto rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl bg-white dark:bg-gray-800 transition-all duration-300 ease-in-out transform hover:scale-105">
    <div class="relative p-5 sm:p-6 md:p-8 bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 dark:from-red-700 dark:via-yellow-700 dark:to-green-700 animate-gradient-xy rounded-t-3xl">
      <h2 class="text-xl sm:text-2xl md:text-3xl font-bold text-white text-center drop-shadow-md pb-2">
        Find Your Harmony
      </h2>
      <p class="text-sm sm:text-base text-white text-center opacity-90">
        Explore our natural solutions.
      </p>
    </div>
    <div class="p-5 sm:p-6 md:p-8 relative -top-3 bg-white dark:bg-gray-800 rounded-b-3xl">
      <form class="relative flex items-center">
        <label for="search-input" class="sr-only">Search for products or solutions</label>
        <input
          id="search-input"
          type="text"
          placeholder="Search for products, services..."
          class="w-full py-3 pl-4 pr-12 text-base rounded-full border-2 border-gray-300 dark:border-gray-600 focus:border-green-500 dark:focus:border-green-400 focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800 outline-none text-gray-800 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 transition-all duration-200 shadow-inner dark:shadow-none"
          aria-label="Search input field"
        />
        <button
          type="submit"
          class="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-full bg-gradient-to-br from-green-400 to-blue-500 text-white dark:from-green-600 dark:to-blue-700 hover:from-green-500 hover:to-blue-600 dark:hover:from-green-700 dark:hover:to-blue-800 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-600 transition-all duration-200 ease-in-out transform hover:scale-110 shadow-lg"
          aria-label="Search button"
        >
          <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
            />
          </svg>
        </button>
      </form>
      <p class="text-center text-xs text-gray-500 dark:text-gray-400 mt-4">
        <small>Discover nature's finest solutions for your business.</small>
      </p>
    </div>
  </div>
</div>

<style>
/* Define the keyframes for the gradient animation */
@keyframes gradient-xy {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

/* Apply the animation */
.animate-gradient-xy {
  background-size: 400% 400%; /* Make the background larger than the element */
  animation: gradient-xy 15s ease infinite alternate;
}
</style>

Industrial_Charity_Footer

非営利団体/慈善団体のWebサイト向けの複雑でレスポンシブなフッターコンポーネントで、レトロ/ビンテージのカラーパレットを備えたインダストリアルで生の美学が特徴です。ナビゲーション、連絡先情報、ソーシャルリンク、ニュースレターのサインアップが含まれ、ダークモードを完全にサポートしています。

開けるプレビュー

                <footer class="bg-gray-200 dark:bg-gray-900 border-t-4 border-amber-600 dark:border-amber-500 py-12 px-4 sm:px-6 lg:px-8 font-sans text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-16">

    <!-- Brand/Mission Statement -->
    <div class="flex flex-col items-start">
      <a href="#" class="flex items-center mb-4">
        <img src="https://picsum.photos/40/40?grayscale" alt="Charity Logo" class="h-10 w-10 mr-3 rounded-full border-2 border-amber-600 dark:border-amber-500 shadow-md">
        <span class="text-2xl font-bold uppercase text-amber-800 dark:text-amber-500 tracking-wide">HopeForge</span>
      </a>
      <p class="text-sm leading-relaxed text-gray-700 dark:text-gray-300 mb-4">
        Forging a brighter future, one community at a time. We empower, we build, we hope.
      </p>
      <div class="flex space-x-4">
        <a href="#" aria-label="Facebook" class="text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c4.781-.75 8.438-4.887 8.438-9.878Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-label="Twitter" class="text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M20.354 5.383c-.633.313-1.317.525-2.03.626.729-.436 1.282-1.125 1.545-1.944-.683.406-1.432.706-2.22.864C16.924 4.41 15.902 4 14.802 4c-1.921 0-3.483 1.562-3.483 3.484 0 .272.03.535.084.79C7.15 6.742 4.14 5.23 2.067 2.923c-.279.479-.439 1.036-.439 1.637 0 1.205.613 2.28 1.554 2.909-.569-.017-1.104-.173-1.57-.433v.044c0 1.688 1.202 3.092 2.79 3.415-.292.08-.6.124-.91.124-.223 0-.44-.02-.656-.063.442 1.385 1.724 2.395 3.242 2.423-1.192.934-2.69 1.488-4.324 1.488-.28 0-.555-.016-.826-.048C3.125 18.067 5.106 19 7.202 19c6.685 0 10.334-5.536 10.334-10.334 0-.158-.003-.314-.01-.469A7.472 7.472 0 0 0 20.354 5.383Z"/>
          </svg>
        </a>
        <a href="#" aria-label="Instagram" class="text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12 4c2.716 0 3.056.012 4.12.06c1.065.048 1.79.213 2.417.464a4.984 4.984 0 0 1 1.772 1.153c.697.697 1.153 1.772 1.153 2.417.251.627.416 1.352.464 2.417.048 1.064.06 1.404.06 4.12 0 2.716-.012 3.056-.06 4.12-.048 1.065-.213 1.79-.464 2.417a4.984 4.984 0 0 1-1.153 1.772c-.697.697-1.772 1.153-2.417 1.153-.627.251-1.352.416-2.417.464-1.064.048-1.404.06-4.12.06S8.944 22 7.88 21.94c-1.065-.048-1.79-.213-2.417-.464a4.984 4.984 0 0 1-1.772-1.153c-.697-.697-1.153-1.772-1.153-2.417-.251-.627-.416-1.352-.464-2.417-.048-1.064-.06-1.404-.06-4.12s.012-3.056.06-4.12c.048-1.065.213-1.79.464-2.417a4.984 4.984 0 0 1 1.153-1.772C4.47 4.697 5.545 4.241 6.19 3.99c.627-.251 1.352-.416 2.417-.464C9.404 3.932 9.744 3.92 12 3.92ZM12 2A10 10 0 1 0 12 22A10 10 0 0 0 12 2Zm0 5a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm6.5-3.5a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-label="LinkedIn" class="text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M20.5 2h-17A1.5 1.5 0 0 0 2 3.5v17A1.5 1.5 0 0 0 3.5 22h17a1.5 1.5 0 0 0 1.5-1.5v-17A1.5 1.5 0 0 0 20.5 2ZM8 19V9h4v10H8Zm-2-3a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm2.5-7A2.5 2.5 0 0 0 8 6.5C8 5.12 9.12 4 10.5 4h10c.83 0 1.5.67 1.5 1.5V19h-4V11a2.5 2.5 0 0 0-2.5-2.5c-1.38 0-2.5 1.12-2.5 2.5v8H8Z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

    <!-- Quick Links -->
    <div>
      <h3 class="text-lg font-semibold uppercase text-gray-900 dark:text-gray-100 mb-5 relative pb-3 before:absolute before:left-0 before:bottom-0 before:h-1 before:w-10 before:bg-amber-600 dark:before:bg-amber-500">Quick Links</h3>
      <ul class="space-y-3">
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">Our Mission</a></li>
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">What We Do</a></li>
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">Success Stories</a></li>
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">Volunteer</a></li>
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">Partnerships</a></li>
      </ul>
    </div>

    <!-- Contact Information -->
    <div>
      <h3 class="text-lg font-semibold uppercase text-gray-900 dark:text-gray-100 mb-5 relative pb-3 before:absolute before:left-0 before:bottom-0 before:h-1 before:w-10 before:bg-amber-600 dark:before:bg-amber-500">Contact Info</h3>
      <address class="not-italic space-y-3 text-sm text-gray-700 dark:text-gray-300">
        <p class="flex items-start">
          <svg class="h-5 w-5 mr-3 flex-shrink-0 text-amber-700 dark:text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.727A8 8 0 0112 20c-3.473 0-6.417-2.07-7.857-5.003L2 14v-2c0-.552.448-1 1-1h1.586L6.5 9h-2.586A1.5 1.5 0 003 10.5v1.5a1 1 0 01-1 1H.5c-.276 0-.5.224-.5.5v1A.5.5 0 00.5 14h1.996C3.04 17.587 7.03 20 12 20c2.518 0 4.887-.96 6.812-2.71C20.575 15.69 22 13.921 22 12c0-1.854-.627-3.568-1.688-4.912C19.261 5.92 17.5 4 15 4c-.167 0-.329.01-.491.028A8 8 0 0012 4c-4.418 0-8 3.582-8 8s3.582 8 8 8c.706 0 1.4-.07 2.07-.203"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 11a.5.5 0 01-1 0v-.5a.5.5 0 011 0V11zM12 15a.5.5 0 01-1 0v-.5a.5.5 0 011 0V15z"/></svg>
          <span class="flex-1">123 Industrial Way, <br>Retroville, RV 54321</span>
        </p>
        <p class="flex items-center">
          <svg class="h-5 w-5 mr-3 flex-shrink-0 text-amber-700 dark:text-amber-500" 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 5a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM3 11a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2zM3 17a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2z"></path></svg>
          <a href="mailto:[email protected]" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">[email protected]</a>
        </p>
        <p class="flex items-center">
          <svg class="h-5 w-5 mr-3 flex-shrink-0 text-amber-700 dark:text-amber-500" 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 5.753c0 .894.498 1.696 1.282 2.122l8 4.57c.502.287 1.05.428 1.603.428s1.101-.141 1.603-.428l8-4.57C23.502 7.449 24 6.647 24 5.753V5a.5.5 0 00-.5-.5h-23A.5.5 0 000 5v.753zM21 11.5L12 16.5 3 11.5v6.247c0 .894.502 1.696 1.284 2.123l.716.41V21h16v-1.72l.716-.41c.782-.427 1.284-1.229 1.284-2.123V11.5z"></path></svg>

          <a href="tel:+1 (555) 123-4567" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">+1 (555) 123-4567</a>
        </p>
        <p>
          <a href="#" class="inline-flex items-center text-sm font-semibold text-amber-700 hover:text-amber-600 dark:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200 group mt-2">
            Get Directions
            <svg class="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.5 12h-11m0 0l-4 4m4-4l-4-4"></path></svg>
          </a>
        </p>
      </address>
    </div>

    <!-- Newsletter Signup -->
    <div>
      <h3 class="text-lg font-semibold uppercase text-gray-900 dark:text-gray-100 mb-5 relative pb-3 before:absolute before:left-0 before:bottom-0 before:h-1 before:w-10 before:bg-amber-600 dark:before:bg-amber-500">Stay Connected</h3>
      <p class="mb-4 text-gray-700 dark:text-gray-300 text-sm">
        Join our newsletter for impactful updates and ways to contribute.
      </p>
      <form class="flex flex-col sm:flex-row gap-2">
        <input type="email" placeholder="Your Email Address" aria-label="Your Email Address" class="flex-grow min-w-0 px-4 py-2 bg-gray-100 dark:bg-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-600 dark:focus:ring-amber-500 transition-all duration-200">
        <button type="submit" class="px-6 py-2 bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600 text-white font-semibold rounded-md shadow-md transition-colors duration-200 flex-shrink-0">
          Subscribe
        </button>
      </form>
      <p class="mt-4 text-xs text-gray-500 dark:text-gray-400">
        We respect your privacy. No spam, ever.
      </p>
    </div>

  </div>

  <div class="mt-12 pt-8 border-t border-gray-300 dark:border-gray-700 text-center text-sm text-gray-600 dark:text-gray-400">
    <p>&copy; <span id="current-year"></span> HopeForge Charity. All rights reserved. Built with purpose.</p>
    <div class="flex justify-center space-x-4 mt-2">
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">Privacy Policy</a>
      <span>|</span>
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">Terms of Service</a>
      <span>|</span>
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">Sitemap</a>
    </div>
  </div>

  <!-- Simple script for current year (No JS requirement for Tailwind, but good for dynamic year) -->
  <script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
  </script>
</footer>

Playful_Manufacturing_Authentication_Component

製造/産業アプリケーション向けに設計された遊び心のある陽気な認証コンポーネントで、丸みを帯びた要素、類似の配色、ダークモードをサポートする完全な応答性が特徴です。

開けるプレビュー

                <div class="min-h-screen bg-blue-100 flex items-center justify-center p-4 dark:bg-slate-900 overflow-hidden">
  <div class="bg-white rounded-3xl shadow-xl p-8 max-w-sm w-full transform transition-all duration-300 dark:bg-slate-800 sm:max-w-md lg:max-w-xl xl:max-w-2xl sm:p-10 lg:p-12 xl:p-16 relative overflow-hidden">
    
    <!-- Background Blob / Shape -->
    <div class="absolute -top-16 -right-16 w-48 h-48 bg-teal-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 transform animate-pulse dark:bg-teal-600 lg:w-64 lg:h-64"></div>
    <div class="absolute -bottom-16 -left-16 w-32 h-32 bg-sky-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 transform animate-pulse animation-delay-700 dark:bg-sky-600 lg:w-48 lg:h-48"></div>
    <div class="absolute top-1/2 left-1/2 -ml-24 -mt-24 w-40 h-40 bg-indigo-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 transform animate-pulse animation-delay-1400 dark:bg-indigo-500 lg:w-56 lg:h-56"></div>

    <div class="relative z-10">
      <div class="text-center mb-8">
        <svg class="mx-auto h-16 w-16 text-sky-500 mb-4 dark:text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9.25 21l3.5-3.5L16.25 21l-0.5-4h4.5l-2.5-2.5L21 9.25l-4-0.5V4l-4.5 2.5L9.25 4l-0.5 4h-4.5l2.5 2.5L4 16.25l4-0.5z" />
        </svg>
        <h2 class="text-3xl font-extrabold text-blue-900 mb-2 dark:text-white sm:text-4xl">
          Welcome, Maker!
        </h2>
        <p class="text-gray-600 dark:text-gray-300">
          Let's get this factory humming.
        </p>
      </div>

      <div class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email Address</label>
          <div class="mt-1 relative rounded-lg shadow-sm">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path d="M2.003 5.884L10 11.297l7.997-5.413a1 1 0 00-.775-1.78l-7.222 4.888-7.222-4.888a1 1 0 00-.775 1.78z" />
                <path fill-rule="evenodd" d="M18 8.118V16a2 2 0 01-2 2H4a2 2 0 01-2-2V8.118l8 5.413 8-5.413z" clip-rule="evenodd" />
              </svg>
            </div>
            <input type="email" id="email" class="focus:ring-sky-500 focus:border-sky-500 block w-full pl-10 pr-2 py-3 rounded-lg border-gray-300 dark:bg-slate-700 dark:border-slate-600 dark:text-white dark:placeholder-gray-400 transition-colors duration-200" placeholder="[email protected]">
          </div>
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Password</label>
          <div class="mt-1 relative rounded-lg shadow-sm">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H4a2 2 0 00-2 2v4a2 2 0 002 2h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2V6a4 4 0 00-4-4zm3 8V6a3 3 0 10-6 0v2h6z" clip-rule="evenodd" />
              </svg>
            </div>
            <input type="password" id="password" class="focus:ring-sky-500 focus:border-sky-500 block w-full pl-10 pr-2 py-3 rounded-lg border-gray-300 dark:bg-slate-700 dark:border-slate-600 dark:text-white dark:placeholder-gray-400 transition-colors duration-200" placeholder="Enter your password">
          </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-sky-600 focus:ring-sky-500 border-gray-300 rounded-md dark:border-slate-600 dark:bg-slate-700">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200">
              Remember Me
            </label>
          </div>
          <div class="text-sm">
            <a href="#" class="font-medium text-sky-600 hover:text-sky-500 dark:text-sky-400 dark:hover:text-sky-300 transition-colors duration-200">
              Forgot Password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-full shadow-sm text-lg font-bold text-white bg-teal-500 hover:bg-teal-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:bg-teal-600 dark:hover:bg-teal-700 dark:focus:ring-teal-600 transition-all duration-300 transform active:scale-95">
            <span class="mr-2">Login</span>
            <svg class="h-6 w-6 transform rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4h1V5L8 9" />
            </svg>
          </button>
        </div>

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

        <div class="mt-6 grid grid-cols-2 gap-3">
          <div>
            <button class="w-full flex items-center justify-center py-3 px-4 border border-gray-300 rounded-full shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-slate-700 dark:border-slate-600 dark:text-gray-200 dark:hover:bg-slate-600 transition-colors duration-200">
              <svg class="h-5 w-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 0C4.477 0 0 4.477 0 10c0 4.418 2.866 8.169 6.839 9.488.5.088.682-.217.682-.483 0-.237-.007-.866-.012-1.703-2.782.604-3.37-1.34-3.37-1.34-.454-1.157-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.004.07 1.532 1.028 1.532 1.028.89 1.527 2.336 1.085 2.9-.652.09-.65-.008-1.085-.015-1.339-2.22-.253-4.555-1.11-4.555-4.943 0-1.09.39-1.984 1.029-2.686-.103-.254-.447-1.272.097-2.659 0 0 .84-.27 2.75 1.025.798-.222 1.643-.333 2.48-.337.836.004 1.682.115 2.48.337 1.91-1.295 2.75-1.025 2.75-1.025.546 1.387.202 2.404.099 2.659.64.702 1.028 1.596 1.028 2.686 0 3.842-2.339 4.686-4.566 4.935.359.308.678.915.678 1.846 0 1.334-.012 2.413-.012 2.748 0 .269.176.575.687.487C17.135 18.165 20 14.417 20 10 20 4.477 15.523 0 10 0z" />
              </svg>
              GitHub
            </button>
          </div>

          <div>
            <button class="w-full flex items-center justify-center py-3 px-4 border border-gray-300 rounded-full shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-slate-700 dark:border-slate-600 dark:text-gray-200 dark:hover:bg-slate-600 transition-colors duration-200">
              <svg class="h-5 w-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path d="M16.59 9.385l.019.25C16.899 15.42 13.916 20 8.796 20c-4.996 0-8.2-3.4-8.2-8a7.808 7.808 0 011.66-5.074l-1.424-1.396C.426 3.195 0 4.544 0 6c0 6.627 5.373 12 12 12 4.415 0 8.125-2.923 8.125-7.6h-3.535zm-2.094-1.417h-1.325V6.78h-1.02v1.188h-1.326v1.019h1.326v1.188h1.02V9.59h1.325V8.293zm-5.748-1.572c-.896 0-1.728-.2-2.302-.547-.584-.351-.876-.84-.876-1.468 0-.616.292-1.096.876-1.432.574-.336 1.406-.528 2.302-.528 1.054 0 1.95.276 2.688.828.738.552 1.107 1.344 1.107 2.376 0 1.012-.37 1.804-1.107 2.376-.738.572-1.634.828-2.688.828zm-.016-.016c.725 0 1.378-.18 1.902-.54.524-.36.786-.864.786-1.512 0-.636-.262-1.144-.786-1.524-.524-.38-.178-.58-.178-.58-.524-.38-1.176-.564-1.952-.564-.789 0-1.442.184-1.952.552-.51.368-.765.864-.765 1.488 0 .684.255 1.188.765 1.512.51.324 1.163.484 1.952.484z" />
              </svg>
              Google
            </button>
          </div>
        </div>

        <p class="text-center text-sm text-gray-600 dark:text-gray-300">
          Don't have an account yet? 
          <a href="#" class="font-medium text-sky-600 hover:text-sky-500 dark:text-sky-400 dark:hover:text-sky-300 transition-colors duration-200">
            Sign up now!
          </a>
        </p>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom CSS for animation delays if needed, typically handled by Tailwind via postcss */
  .animation-delay-700 {
    animation-delay: 0.7s;
  }
  .animation-delay-1400 {
    animation-delay: 1.4s;
  }
  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
</style>

Neumorphism Vibrant Site Map コンポーネント

ニューモーフィックスタイルと鮮やかな配色でデザインされたシンプルでレスポンシブなサイトマップコンポーネントで、ドキュメントやWikiサイトに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="min-h-screen bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-900 dark:to-black p-4 sm:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-800 dark:to-gray-900 rounded-3xl shadow-xl p-6 sm:p-10 transition-all duration-300 ease-in-out
              dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.6),inset_-2px_-2px_5px_rgba(30,30,30,0.6),2px_2px_8px_rgba(0,0,0,0.4),-2px_-2px_8px_rgba(40,40,40,0.4)]
              shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(180,180,250,0.7),2px_2px_8px_rgba(150,150,250,0.3),-2px_-2px_8px_rgba(255,255,255,0.8)]">

    <h2 class="text-3xl sm:text-4xl font-extrabold text-indigo-700 dark:text-purple-400 mb-8 sm:mb-12 text-center drop-shadow-lg">
      Site Map
    </h2>

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

      <!-- Category 1: Getting Started -->
      <div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
                  shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
                  hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                  dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
        <h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Getting Started</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Installation Guide</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Quick Start Tutorial</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Frequently Asked Questions</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">System Requirements</a></li>
        </ul>
      </div>

      <!-- Category 2: Core Concepts -->
      <div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
                  shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
                  hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                  dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
        <h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Core Concepts</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Data Models</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">API Endpoints</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Authentication</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Error Handling</a></li>
        </ul>
      </div>

      <!-- Category 3: Advanced Topics -->
      <div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
                  shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
                  hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                  dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
        <h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Advanced Topics</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Custom Integrations</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Performance Optimization</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Security Best Practices</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Migration Guides</a></li>
        </ul>
      </div>

      <!-- Category 4: Resources -->
      <div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
                  shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
                  hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                  dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
        <h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Resources</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">API Reference</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Glossary of Terms</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Community Forum</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Support & Contact</a></li>
        </ul>
      </div>

      <!-- Category 5: Release Notes -->
      <div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
                  shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
                  hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                  dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
        <h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Release Notes</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Latest Version</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Previous Versions</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Upcoming Features</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Bug Fixes</a></li>
        </ul>
      </div>

      <!-- Category 6: Legal & Compliance -->
      <div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
                  shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
                  hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                  dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
        <h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Legal & Compliance</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Terms of Service</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Privacy Policy</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Cookie Policy</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">DMCA Policy</a></li>
        </ul>
      </div>

    </div>

  </div>
</div>

Luxury Tag クラウドコンポーネント

プロフェッショナルなコンサルティングサービス向けに設計されたエレガントでレスポンシブなタグクラウドコンポーネントで、サンセット/ウォームカラートーンとダークモードのサポートを備えたラグジュアリー/プレミアムな美学が特徴です。

開けるプレビュー

                <div class="font-sans bg-amber-50 dark:bg-gray-900 py-16 px-4 sm:px-6 lg:px-8">
  <div class="max-w-6xl mx-auto">
    <div class="text-center mb-12">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-amber-900 dark:text-amber-200 mb-4 tracking-tight leading-tight">
        Our Expertise: A World of Insights
      </h2>
      <p class="text-xl text-amber-700 dark:text-amber-300 max-w-2xl mx-auto">
        Discover the breadth of our consulting services and the diverse areas where we bring unparalleled value and strategic guidance.
      </p>
    </div>

    <div class="flex flex-wrap justify-center gap-4 sm:gap-6 lg:gap-8 p-6 sm:p-8 lg:p-10 bg-gradient-to-br from-amber-100 to-red-100 dark:from-red-900 dark:to-orange-950 rounded-3xl shadow-xl border border-amber-200 dark:border-red-800">

      <span class="tag-item">
        Strategic Planning
      </span>
      <span class="tag-item">
        Digital Transformation
      </span>
      <span class="tag-item">
        Organizational Change
      </span>
      <span class="tag-item">
        Market Entry
      </span>
      <span class="tag-item">
        Financial Advisory
      </span>
      <span class="tag-item">
        Operational Efficiency
      </span>
      <span class="tag-item">
        Sustainability Consulting
      </span>
      <span class="tag-item">
        Leadership Development
      </span>
      <span class="tag-item">
        Risk Management
      </span>
      <span class="tag-item">
        Technology Integration
      </span>
      <span class="tag-item">
        Customer Experience
      </span>
      <span class="tag-item">
        Crisis Management
      </span>
      <span class="tag-item">
        Innovation Strategy
      </span>
      <span class="tag-item">
        Supply Chain Optimization
      </span>
      <span class="tag-item">
        Data Analytics
      </span>
      <span class="tag-item">
        Talent Management
      </span>
      <span class="tag-item">
        Mergers & Acquisitions
      </span>
      <span class="tag-item">
        Brand Development
      </span>
      <span class="tag-item">
        Cybersecurity
      </span>
      <span class="tag-item">
        Regulatory Compliance
      </span>
      <span class="tag-item">
        Performance Improvement
      </span>
      <span class="tag-item">
        Global Business
      </span>
      <span class="tag-item">
        Executive Coaching
      </span>
    </div>

    <div class="text-center mt-12">
      <a href="#" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-full shadow-lg text-white bg-gradient-to-r from-red-600 to-orange-500 hover:from-red-700 hover:to-orange-600 dark:from-red-700 dark:to-orange-600 dark:hover:from-red-800 dark:hover:to-orange-700 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900">
        Explore Our Full Services
        <svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="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 0z" clip-rule="evenodd" />
          <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
  </div>
</div>

<style>
  /* Base styles for the tag item */
  .tag-item {
    @apply inline-flex items-center justify-center
    px-5 py-2.5 sm:px-6 sm:py-3 lg:px-7 lg:py-3.5
    text-base sm:text-lg lg:text-xl font-semibold
    rounded-full
    transition-all duration-300 ease-in-out
    transform hover:-translate-y-0.5 hover:scale-105
    shadow-md
  }
  
  /* Light mode specific styles */
  .tag-item {
    @apply bg-amber-500 text-white
    border border-amber-600
    hover:bg-amber-600 hover:text-white
    hover:shadow-lg
  }

  /* Dark mode specific styles */
  .dark .tag-item {
    @apply bg-red-700 text-amber-100
    border border-red-800
    hover:bg-red-800 hover:text-white
    hover:shadow-lg
  }

  /* Responsive font sizes and padding for tags */
  @media (min-width: 640px) {
    .tag-item:nth-child(2n) { /* Example: Slightly larger for some tags */
      @apply text-lg sm:text-xl lg:text-2xl px-6 py-3 sm:px-7 sm:py-3.5 lg:px-8 lg:py-4;
      @apply bg-orange-500 border-orange-600 hover:bg-orange-600;
      @apply dark:bg-orange-700 dark:border-orange-800 dark:hover:bg-orange-800;
    }
  }

  @media (min-width: 1024px) {
    .tag-item:nth-child(3n) { /* Example: Even larger and different hue for others */
      @apply text-xl sm:text-2xl lg:text-3xl px-7 py-3.5 sm:px-8 sm:py-4 lg:px-9 lg:py-4.5;
      @apply bg-red-500 border-red-600 hover:bg-red-600;
      @apply dark:bg-red-700 dark:border-red-800 dark:hover:bg-red-800;
    }
  }

  /* Add more specific sizing for tags for visual variety if needed */
  .tag-item:nth-child(4n+1) { @apply text-base; }
  .tag-item:nth-child(4n+2) { @apply text-lg; }
  .tag-item:nth-child(4n+3) { @apply text-xl; }
  .tag-item:nth-child(4n) { @apply text-2xl; }

  /* Adjust font sizes responsively */
  @media (max-width: 639px) {
    .tag-item:nth-child(4n+1) { @apply text-sm; }
    .tag-item:nth-child(4n+2) { @apply text-base; }
    .tag-item:nth-child(4n+3) { @apply text-base; }
    .tag-item:nth-child(4n) { @apply text-lg; }
  }
</style>

Glassmorphism ユーザープロファイルコンポーネント (シンプル)

glassmorphism デザインスタイル、パステルカラースキーム、およびダークモードのサポートを備えた、シンプルで応答性の高いユーザープロファイルコンポーネント。エンターテインメント/メディアプラットフォームに最適です。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="w-full max-w-sm p-6 rounded-3xl shadow-xl backdrop-blur-md bg-white/30 dark:bg-gray-800/30 border border-white/50 dark:border-gray-700/50 relative overflow-hidden">
    
    <!-- Background Blur Effect (for glassmorphism) -->
    <div class="absolute inset-0 z-0 opacity-50 dark:opacity-20">
      <div class="absolute top-0 left-0 w-32 h-32 bg-purple-300 dark:bg-purple-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:animate-blob-dark"></div>
      <div class="absolute top-0 right-0 w-32 h-32 bg-pink-300 dark:bg-pink-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:animate-blob-dark dark:animation-delay-2000"></div>
      <div class="absolute bottom-0 left-1/2 w-32 h-32 bg-blue-300 dark:bg-blue-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 dark:animate-blob-dark dark:animation-delay-4000"></div>
    </div>

    <div class="relative z-10 flex flex-col items-center text-center">
      <img class="w-24 h-24 rounded-full border-4 border-white/70 dark:border-gray-600/70 shadow-lg object-cover mb-4"
        src="https://randomuser.me/api/portraits/women/68.jpg"
        alt="User Avatar">

      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-1 tracking-wide">
        Alice Johnson
      </h2>
      <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 font-medium">
        Premium User
      </p>

      <div class="flex space-x-6 mb-6">
        <div class="flex flex-col items-center">
          <span class="text-lg font-semibold text-gray-800 dark:text-white">1.2K</span>
          <span class="text-xs text-gray-500 dark:text-gray-400">Followers</span>
        </div>
        <div class="flex flex-col items-center">
          <span class="text-lg font-semibold text-gray-800 dark:text-white">500</span>
          <span class="text-xs text-gray-500 dark:text-gray-400">Following</span>
        </div>
        <div class="flex flex-col items-center">
          <span class="text-lg font-semibold text-gray-800 dark:text-white">25</span>
          <span class="text-xs text-gray-500 dark:text-gray-400">Playlists</span>
        </div>
      </div>

      <button class="w-full py-3 px-6 rounded-xl bg-gradient-to-r from-purple-400 to-pink-400 dark:from-purple-600 dark:to-pink-600 
                     text-white font-semibold text-lg shadow-md 
                     hover:from-purple-500 hover:to-pink-500 dark:hover:from-purple-700 dark:hover:to-pink-700 
                     focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-300 dark:focus:ring-offset-gray-800 dark:focus:ring-purple-700/50 
                     transition-all duration-300 transform hover:-translate-y-0.5">
        View Profile
      </button>
    </div>
  </div>
</div>

<!-- To make the background blobs animate, you'd typically add a CSS @keyframes in a <style> tag or global CSS. For Tailwind, you can extend the config. -->
<!-- Example for tailwind.config.js (not part of the HTML output, but for context): -->
<!--
  theme: {
    extend: {
      keyframes: {
        blob: {
          '0%, 100%': {
            transform: 'translate(0px, 0px) scale(1)'
          },
          '33%': {
            transform: 'translate(30px, -50px) scale(1.1)'
          },
          '66%': {
            transform: 'translate(-20px, 20px) scale(0.9)'
          }
        }
      },
      animation: {
        blob: 'blob 7s infinite ease-in-out',
        'blob-dark': 'blob 10s infinite ease-in-out'
      }
    }
  }
-->

Neon_Glow_Timeline_Agriculture

ネオン/グロー効果と宝石の色調を備えた複雑でレスポンシブなタイムラインコンポーネントで、農業/農業のWebサイト向けに調整されています。豊富な視覚要素とダークモードのサポートを備えています。

開けるプレビュー

                <div class="font-sans antialiased text-gray-900 bg-gray-50 dark:bg-gray-950 dark:text-gray-50 py-16 px-4 sm:px-6 lg:px-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-16 relative
      text-emerald-500 dark:text-emerald-400
      after:content-[''] after:absolute after:bottom-[-8px] after:left-1/2 after:-translate-x-1/2 after:w-24 after:h-1.5 
      after:rounded-full after:bg-emerald-500 after:shadow-glow-emerald
      transition-colors duration-300">
      Harvesting Milestones
    </h2>

    <div class="relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:ml-[unset] md:before:translate-x-0 
      before:h-full before:w-px before:bg-emerald-300 before:dark:bg-emerald-700 before:shadow-timeline-emerald
      md:before:mx-auto md:before:left-auto md:before:right-auto md:before:w-0.5 
      dark:text-gray-100">

      <!-- Timeline Item 1 -->
      <div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse mb-12">
        <div class="flex flex-col md:flex-row items-start md:items-center w-full md:w-1/2 md:even:text-right md:pr-8 md:even:pl-8">
          <div class="order-2 md:order-1 min-w-[7rem] text-center text-xs sm:text-sm md:text-base mb-2 md:mb-0">
            <p class="font-semibold text-sapphire-600 dark:text-sapphire-300">Q1 2023</p>
            <p class="text-gray-500 dark:text-gray-400">Jan - Mar</p>
          </div>
          <div class="order-1 md:order-2 w-full md:w-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg 
            shadow-emerald-200/50 dark:shadow-emerald-900/50 
            hover:shadow-emerald-400/70 hover:dark:shadow-emerald-700/70 
            transition-all duration-300 origin-bottom md:even:origin-bottom-right md:odd:origin-bottom-left
            border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-600
            relative 
            before:absolute before:w-4 before:h-4 before:bg-emerald-500 before:shadow-glow-emerald before:rounded-full before:-left-9 before:top-1/2 before:-translate-y-1/2 md:before:hidden 
            after:absolute after:hidden md:after:block after:w-0 after:h-0 
            after:border-t-[10px] after:border-t-transparent after:border-b-[10px] after:border-b-transparent 
            md:after:-right-[22px] md:even:after:-left-[22px] after:top-1/2 after:-translate-y-1/2
            after:border-l-[12px] after:border-l-gray-100 dark:after:border-l-gray-800
            md:even:after:border-l-0 md:even:after:border-r-[12px] md:even:after:border-r-gray-100 dark:md:even:after:border-r-gray-800
            group-hover:scale-[1.01] group-hover:z-10">
            <h3 class="text-xl font-bold text-emerald-600 dark:text-emerald-400 mb-2
              relative inline-block after:block after:absolute after:left-0 after:bottom-[-2px] after:w-full after:h-0.5 after:bg-emerald-400 after:scale-x-0 group-hover:after:scale-x-100 after:transition-transform after:duration-300">
              Soil Preparation & Planting</h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed max-w-lg">
              Successfully completed soil analysis, enrichment, and initial planting of drought-resistant corn varieties across 500 acres. Leveraged smart irrigation systems to optimize water usage.
            </p>
            <div class="mt-4 flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.664 12H2A1 1 0 001 13v3a1 1 0 001 1h7.664a1 1 0 00-.664.236l-3.332 3.332a.5.5 0 00.354.854h6.664a.5.5 0 00.354-.854L10 12.236A1 1 0 009.664 12zM12 8V2A1 1 0 0011 1H4a1 1 0 00-1 1v6a1 1 0 001 1h7a1 1 0 001-1z" clip-rule="evenodd"></path></svg> 500 acres</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 002 14v3a1 1 0 001 1h14a1 1 0 001-1v-3a1 1 0 00-.293-.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 1 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg> Smart Irrigation</span>
            </div>
            <img class="w-full h-32 object-cover rounded mt-4 border border-emerald-300 dark:border-emerald-700 shadow-md" src="https://picsum.photos/400/250?random=1" alt="Soil Preparation">
          </div>
        </div>
        <div class="absolute left-1/2 -translate-x-1/2 w-4 h-4 bg-sapphire-500 shadow-glow-sapphire rounded-full z-10 hidden md:block"></div>
      </div>

      <!-- Timeline Item 2 -->
      <div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse mb-12">
        <div class="flex flex-col md:flex-row items-start md:items-center w-full md:w-1/2 md:even:text-right md:pr-8 md:even:pl-8">
          <div class="order-2 md:order-1 min-w-[7rem] text-center text-xs sm:text-sm md:text-base mb-2 md:mb-0">
            <p class="font-semibold text-ruby-600 dark:text-ruby-300">Q2 2023</p>
            <p class="text-gray-500 dark:text-gray-400">Apr - Jun</p>
          </div>
          <div class="order-1 md:order-2 w-full md:w-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg 
            shadow-ruby-200/50 dark:shadow-ruby-900/50 
            hover:shadow-ruby-400/70 hover:dark:shadow-ruby-700/70 
            transition-all duration-300 origin-bottom md:even:origin-bottom-right md:odd:origin-bottom-left
            border-2 border-transparent hover:border-ruby-500 dark:hover:border-ruby-600
            relative 
            before:absolute before:w-4 before:h-4 before:bg-ruby-500 before:shadow-glow-ruby before:rounded-full before:-left-9 before:top-1/2 before:-translate-y-1/2 md:before:hidden 
            after:absolute after:hidden md:after:block after:w-0 after:h-0 
            after:border-t-[10px] after:border-t-transparent after:border-b-[10px] after:border-b-transparent 
            md:after:-right-[22px] md:even:after:-left-[22px] after:top-1/2 after:-translate-y-1/2
            after:border-l-[12px] after:border-l-gray-100 dark:after:border-l-gray-800
            md:even:after:border-l-0 md:even:after:border-r-[12px] md:even:after:border-r-gray-100 dark:md:even:after:border-r-gray-800
            group-hover:scale-[1.01] group-hover:z-10">
            <h3 class="text-xl font-bold text-ruby-600 dark:text-ruby-400 mb-2
              relative inline-block after:block after:absolute after:left-0 after:bottom-[-2px] after:w-full after:h-0.5 after:bg-ruby-400 after:scale-x-0 group-hover:after:scale-x-100 after:transition-transform after:duration-300">
              Growth Monitoring & Pest Control</h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed max-w-lg">
              Implemented drone surveillance for crop health monitoring. Successfully mitigated a localized pest outbreak through organic treatments, ensuring minimal crop damage.
            </p>
            <div class="mt-4 flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-ruby-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg> Drone Surveillance</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-ruby-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M.93 2.25c-.244-.249-.074-.5.251-.5h18.298c.325 0 .495.251.251.5L12 9.27L9.932 7.21C9.658 6.937 9.191 6.937 8.917 7.21L.93 2.25zM2.872 3.128l7.07 7.07c.273.273.74.273 1.013 0l7.07-7.07L18.4 4c.244.249.074.5-.251.5h-18.298c-.325 0-.495-.251-.251-.5L2.872 3.128z" clip-rule="evenodd" /></svg> Organic Control</span>
            </div>
            <img class="w-full h-32 object-cover rounded mt-4 border border-ruby-300 dark:border-ruby-700 shadow-md" src="https://picsum.photos/400/250?random=2" alt="Crop Growth Monitoring">
          </div>
        </div>
        <div class="absolute left-1/2 -translate-x-1/2 w-4 h-4 bg-sapphire-500 shadow-glow-sapphire rounded-full z-10 hidden md:block"></div>
      </div>

      <!-- Timeline Item 3 -->
      <div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse mb-12">
        <div class="flex flex-col md:flex-row items-start md:items-center w-full md:w-1/2 md:even:text-right md:pr-8 md:even:pl-8">
          <div class="order-2 md:order-1 min-w-[7rem] text-center text-xs sm:text-sm md:text-base mb-2 md:mb-0">
            <p class="font-semibold text-emerald-600 dark:text-emerald-300">Q3 2023</p>
            <p class="text-gray-500 dark:text-gray-400">Jul - Sep</p>
          </div>
          <div class="order-1 md:order-2 w-full md:w-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg 
            shadow-emerald-200/50 dark:shadow-emerald-900/50 
            hover:shadow-emerald-400/70 hover:dark:shadow-emerald-700/70 
            transition-all duration-300 origin-bottom md:even:origin-bottom-right md:odd:origin-bottom-left
            border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-600
            relative 
            before:absolute before:w-4 before:h-4 before:bg-emerald-500 before:shadow-glow-emerald before:rounded-full before:-left-9 before:top-1/2 before:-translate-y-1/2 md:before:hidden 
            after:absolute after:hidden md:after:block after:w-0 after:h-0 
            after:border-t-[10px] after:border-t-transparent after:border-b-[10px] after:border-b-transparent 
            md:after:-right-[22px] md:even:after:-left-[22px] after:top-1/2 after:-translate-y-1/2
            after:border-l-[12px] after:border-l-gray-100 dark:after:border-l-gray-800
            md:even:after:border-l-0 md:even:after:border-r-[12px] md:even:after:border-r-gray-100 dark:md:even:after:border-r-gray-800
            group-hover:scale-[1.01] group-hover:z-10">
            <h3 class="text-xl font-bold text-emerald-600 dark:text-emerald-400 mb-2
              relative inline-block after:block after:absolute after:left-0 after:bottom-[-2px] after:w-full after:h-0.5 after:bg-emerald-400 after:scale-x-0 group-hover:after:scale-x-100 after:transition-transform after:duration-300">
              Harvest & Yield Optimization</h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed max-w-lg">
              Achieved record yields for corn crops, exceeding projections by 15%. Utilized predictive analytics to optimize harvest timing and reduce post-harvest losses.
            </p>
            <div class="mt-4 flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path d="M8.433 7.82c.071-.05.13-.11.18-.17l.797-.97.234-.285a.75.75 0 011.085-.145l2.456 2.06c.21.176.326.435.326.702v7.24a.75.75 0 01-.75.75h-3.352c-.52 0-2.3-1.07-2.3-1.07l-.76-.796a.75.75 0 01-.137-.996L8.433 7.82z" clip-rule="evenodd"></path></svg> 15% Over Projection</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 8a3 3 0 100-6 3 3 0 000 6zM3.465 14.162A9.776 9.776 0 0112 11c1.545 0 3.067.14 4.535.462 2.378.508 3.322 1.83 3.425 2.126.1.296.068.513-.08.684a.75.75 0 01-.58.268H.705a.75.75 0 01-.58-.268c-.148-.171-.18-.388-.08-.684.103-.296 1.047-1.618 3.425-2.126z"></path></svg> AI Analytics</span>
            </div>
            <img class="w-full h-32 object-cover rounded mt-4 border border-emerald-300 dark:border-emerald-700 shadow-md" src="https://picsum.photos/400/250?random=3" alt="Modern Farming Tools">
          </div>
        </div>
        <div class="absolute left-1/2 -translate-x-1/2 w-4 h-4 bg-sapphire-500 shadow-glow-sapphire rounded-full z-10 hidden md:block"></div>
      </div>

      <!-- Timeline Item 4 -->
      <div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse">
        <div class="flex flex-col md:flex-row items-start md:items-center w-full md:w-1/2 md:even:text-right md:pr-8 md:even:pl-8">
          <div class="order-2 md:order-1 min-w-[7rem] text-center text-xs sm:text-sm md:text-base mb-2 md:mb-0">
            <p class="font-semibold text-sapphire-600 dark:text-sapphire-300">Q4 2023</p>
            <p class="text-gray-500 dark:text-gray-400">Oct - Dec</p>
          </div>
          <div class="order-1 md:order-2 w-full md:w-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg 
            shadow-sapphire-200/50 dark:shadow-sapphire-900/50 
            hover:shadow-sapphire-400/70 hover:dark:shadow-sapphire-700/70 
            transition-all duration-300 origin-bottom md:even:origin-bottom-right md:odd:origin-bottom-left
            border-2 border-transparent hover:border-sapphire-500 dark:hover:border-sapphire-600
            relative 
            before:absolute before:w-4 before:h-4 before:bg-sapphire-500 before:shadow-glow-sapphire before:rounded-full before:-left-9 before:top-1/2 before:-translate-y-1/2 md:before:hidden 
            after:absolute after:hidden md:after:block after:w-0 after:h-0 
            after:border-t-[10px] after:border-t-transparent after:border-b-[10px] after:border-b-transparent 
            md:after:-right-[22px] md:even:after:-left-[22px] after:top-1/2 after:-translate-y-1/2
            after:border-l-[12px] after:border-l-gray-100 dark:after:border-l-gray-800
            md:even:after:border-l-0 md:even:after:border-r-[12px] md:even:after:border-r-gray-100 dark:md:even:after:border-r-gray-800
            group-hover:scale-[1.01] group-hover:z-10">
            <h3 class="text-xl font-bold text-sapphire-600 dark:text-sapphire-400 mb-2
              relative inline-block after:block after:absolute after:left-0 after:bottom-[-2px] after:w-full after:h-0.5 after:bg-sapphire-400 after:scale-x-0 group-hover:after:scale-x-100 after:transition-transform after:duration-300">
              Post-Harvest & Soil Regeneration</h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed max-w-lg">
              Successful implementation of cover cropping and natural composting to regenerate soil health for next season. Engaged with local university for research on sustainable practices.
            </p>
            <div class="mt-4 flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-sapphire-500" fill="currentColor" viewBox="0 0 20 20"><path d="M12 2H8a.5.5 0 00-.5.5v2.879l-1.379-1.379a.5.5 0 00-.707.707l2 2a.5.5 0 00.707 0l2-2a.5.5 0 00-.707-.707L8.5 5.379V2.5A.5.5 0 008 2h4zM16 8h-3V7a1 1 0 00-1-1h-4a1 1 0 00-1 1v1H4a2 2 0 00-2 2v6a2 2 0 002 2h12a2 2 0 002-2v-6a2 2 0 00-2-2zm-3 8H6v-3a1 1 0 011-1h6a1 1 0 011 1v3z" clip-rule="evenodd"></path></svg> Soil Regeneration</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-sapphire-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 8a3 3 0 100-6 3 3 0 000 6zM3.465 14.162A9.776 9.776 0 0112 11c1.545 0 3.067.14 4.535.462 2.378.508 3.322 1.83 3.425 2.126.1.296.068.513-.08.684a.75.75 0 01-.58.268H.705a.75.75 0 01-.58-.268c-.148-.171-.18-.388-.08-.684.103-.296 1.047-1.618 3.425-2.126z"></path></svg> Research Partner</span>
            </div>
            <img class="w-full h-32 object-cover rounded mt-4 border border-sapphire-300 dark:border-sapphire-700 shadow-md" src="https://picsum.photos/400/250?random=4" alt="Soil Regeneration">
          </div>
        </div>
        <div class="absolute left-1/2 -translate-x-1/2 w-4 h-4 bg-sapphire-500 shadow-glow-sapphire rounded-full z-10 hidden md:block"></div>
      </div>

    </div>
  </div>
</div>

<style>
  /* Custom glow effect utility classes */
  .shadow-glow-emerald {
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6), 0 0 16px rgba(16, 185, 129, 0.4),
                0 0 24px rgba(16, 185, 129, 0.2);
  }
  .dark .shadow-glow-emerald {
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.6), 0 0 16px rgba(52, 211, 153, 0.4),
                0 0 24px rgba(52, 211, 153, 0.2);
  }
  .shadow-glow-sapphire {
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.6), 0 0 16px rgba(37, 99, 235, 0.4),
                0 0 24px rgba(37, 99, 235, 0.2);
  }
  .dark .shadow-glow-sapphire {
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.6), 0 0 16px rgba(96, 165, 250, 0.4),
                0 0 24px rgba(96, 165, 250, 0.2);
  }
  .shadow-glow-ruby {
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6), 0 0 16px rgba(239, 68, 68, 0.4),
                0 0 24px rgba(239, 68, 68, 0.2);
  }
  .dark .shadow-glow-ruby {
    box-shadow: 0 0 8px rgba(252, 165, 165, 0.6), 0 0 16px rgba(252, 165, 165, 0.4),
                0 0 24px rgba(252, 165, 165, 0.2);
  }

  .shadow-timeline-emerald {
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.5), 0 0 8px rgba(16, 185, 129, 0.3);
  }
  .dark .shadow-timeline-emerald {
    box-shadow: 0 0 4px rgba(52, 211, 153, 0.5), 0 0 8px rgba(52, 211, 153, 0.3);
  }

  /* Custom utility classes for Jewel Tones */
  .text-emerald-500 { color: #10B981; } /* Base Emerald */
  .dark .text-emerald-400 { color: #34D399; } /* Dark Mode Emerald */
  .text-emerald-600 { color: #059669; } /* Darker Emerald */
  .dark .text-emerald-300 { color: #6EE7B7; } /* Lighter Emerald for dark text */
  .border-emerald-300 { border-color: #6EE7B7; } /* Light Emerald for borders */
  .dark .border-emerald-700 { border-color: #047857; } /* Dark Emerald for borders */

  .text-sapphire-500 { color: #3B82F6; } /* Base Sapphire (Blue) */
  .dark .text-sapphire-400 { color: #60A5FA; } /* Dark Mode Sapphire */
  .text-sapphire-600 { color: #2563EB; } /* Darker Sapphire */
  .dark .text-sapphire-300 { color: #93C5FD; } /* Lighter Sapphire for dark text */
  .border-sapphire-300 { border-color: #93C5FD; } /* Light Sapphire for borders */
  .dark .border-sapphire-700 { border-color: #1D4ED8; } /* Dark Sapphire for borders */

  .text-ruby-500 { color: #EF4444; } /* Base Ruby (Red) */
  .dark .text-ruby-400 { color: #F87171; } /* Dark Mode Ruby */
  .text-ruby-600 { color: #DC2626; } /* Darker Ruby */
  .dark .text-ruby-300 { color: #FCA5A5; } /* Lighter Ruby for dark text */
  .border-ruby-300 { border-color: #FCA5A5; } /* Light Ruby for borders */
  .dark .border-ruby-700 { border-color: #B91C1C; } /* Dark Ruby for borders */

  /* Custom media query for md breakpoint to control timeline element positioning */
  @media (min-width: 768px) {
    .md\:before\:ml-\[unset\] {
      margin-left: unset;
    }
    .md\:before\:translate-x-0 {
      transform: translateX(0);
    }
    .md\:before\:mx-auto {
      margin-left: auto;
      margin-right: auto;
    }
    .md\:before\:left-auto {
      left: auto;
    }
    .md\:before\:right-auto {
      right: auto;
    }
    .md\:before\:w-0\.5 {
      width: 2px;
    }
    .md\:even\:flex-row-reverse {
      flex-direction: row-reverse;
    }
    .md\:pr-8 {
      padding-right: 2rem;
    }
    .md\:even\:pl-8 {
      padding-left: 2rem;
    }
    .md\:before\:hidden {
      display: none;
    }
    .md\:after\:block {
      display: block;
    }
    .md\:after\:-right-\[22px\] {
      right: -22px;
    }
    .md\:even\:after\:-left-\[22px\] {
      left: -22px;
      right: unset;
    }
    .md\:after\:border-l-\[12px\] {
      border-left-width: 12px;
    }
    .md\:even\:after\:border-l-0 {
      border-left-width: 0px;
    }
    .md\:even\:after\:border-r-\[12px\] {
      border-right-width: 12px;
    }
  }
</style>

製品ギャラリーコンポーネント

微妙なマイクロインタラクション、パステルカラーの配色、完全なダークモードのサポートで設計された、複雑で応答性の高い製品ギャラリーコンポーネントで、フォーラムやコミュニティプラットフォームに適しています。インタラクティブな画像選択と詳細な製品情報を備えています。

開けるプレビュー

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-850 shadow-xl rounded-2xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="lg:grid lg:grid-cols-2 lg:gap-8 p-4 sm:p-6 lg:p-8">

      <!-- Image Gallery Section -->
      <div class="flex flex-col-reverse lg:flex-row gap-4">
        <!-- Thumbnail Navigation -->
        <div class="flex lg:flex-col gap-3 overflow-x-auto lg:overflow-y-auto pb-2 lg:pb-0 scrollbar-hide">
          <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-indigo-200 dark:border-indigo-600 ring-2 ring-indigo-300 dark:ring-indigo-500 cursor-pointer transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md">
            <img src="https://picsum.photos/id/1018/200/200" alt="Product thumbnail 1" class="w-full h-full object-cover">
          </div>
          <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-transparent hover:border-indigo-200 dark:hover:border-indigo-600 transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md cursor-pointer">
            <img src="https://picsum.photos/id/1025/200/200" alt="Product thumbnail 2" class="w-full h-full object-cover">
          </div>
          <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-transparent hover:border-indigo-200 dark:hover:border-indigo-600 transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md cursor-pointer">
            <img src="https://picsum.photos/id/1080/200/200" alt="Product thumbnail 3" class="w-full h-full object-cover">
          </div>
          <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-transparent hover:border-indigo-200 dark:hover:border-indigo-600 transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md cursor-pointer">
            <img src="https://picsum.photos/id/1043/200/200" alt="Product thumbnail 4" class="w-full h-full object-cover">
          </div>
        </div>

        <!-- Main Image -->
        <div class="flex-1 rounded-xl overflow-hidden shadow-lg border border-indigo-100 dark:border-gray-700 aspect-video lg:aspect-square flex items-center justify-center">
          <img src="https://picsum.photos/id/1018/600/600" alt="Main product image" class="w-full h-full object-cover object-center transform transition-transform duration-300 hover:scale-105">
        </div>
      </div>

      <!-- Product Details Section -->
      <div class="mt-8 lg:mt-0">
        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-white mb-3 tracking-tight leading-tight">
          Pastel Dream Headphones
        </h1>
        <p class="text-2xl font-semibold text-indigo-600 dark:text-indigo-400 mb-6">
          $199.99
        </p>

        <div class="mb-8">
          <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">Description</h2>
          <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
            Experience pure audio bliss with the Pastel Dream Headphones. Designed for comfort and style, these over-ear headphones deliver rich, balanced sound with deep bass and clear trebles. Perfect for music lovers and podcast enthusiasts.
          </p>
        </div>

        <!-- Product Attributes/Features -->
        <div class="mb-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="flex items-center text-gray-700 dark:text-gray-300 group">
            <svg class="w-6 h-6 text-indigo-400 group-hover:text-indigo-500 mr-2 transform transition-transform duration-200 group-hover:rotate-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m12.728 12.728l-.707-.707M6 18H4a2 2 0 01-2-2V7a2 2 0 012-2h16a2 2 0 012 2v9a2 2 0 01-2 2h-2M18 9a2 2 0 01-2 2H8a2 2 0 01-2-2V5h12v4z"></path>
            </svg>
            <span class="font-medium text-lg">Wireless Connectivity</span>
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 group">
            <svg class="w-6 h-6 text-indigo-400 group-hover:text-indigo-500 mr-2 transform transition-transform duration-200 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span class="font-medium text-lg">20-Hour Battery Life</span>
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 group">
            <svg class="w-6 h-6 text-indigo-400 group-hover:text-indigo-500 mr-2 transform transition-transform duration-200 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
            </svg>
            <span class="font-medium text-lg">Noise Cancellation</span>
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 group">
            <svg class="w-6 h-6 text-indigo-400 group-hover:text-indigo-500 mr-2 transform transition-transform duration-200 group-hover:rotate-12" 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="M14.752 11.168l-3.197 2.132A6.5 6.5 0 0012 21a6.5 6.5 0 00-4.06-11.832c.983-4.004 4.544-7 8.56-7s7.577 2.996 8.56 7A6.5 6.5 0 0012 3a6.5 6.5 0 00-4.06 11.832z"></path>
            </svg>
            <span class="font-medium text-lg">Comfort-Fit Design</span>
          </div>
        </div>

        <!-- Add to Cart (Placeholder for Forum/Community interaction) -->
        <div class="flex flex-col sm:flex-row gap-4 mb-8">
          <button class="flex-1 py-3 px-6 rounded-xl bg-indigo-500 text-white font-semibold text-lg shadow-md hover:bg-indigo-600 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-700 transition-all duration-200 transform active:scale-95 hover:scale-105">
            <span class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 -ml-1 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg> Join Discussion</span>
          </button>
          <button class="flex-1 py-3 px-6 rounded-xl bg-pink-200 text-pink-700 dark:bg-pink-700 dark:text-pink-100 font-semibold text-lg shadow-md hover:bg-pink-300 dark:hover:bg-pink-600 focus:outline-none focus:ring-4 focus:ring-pink-100 dark:focus:ring-pink-800 transition-all duration-200 transform active:scale-95 hover:scale-105">
             <span class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> Add to Wishlist</span>
          </button>
        </div>

        <!-- Customer Reviews/Community Testimonial (Forum Focus) -->
        <div>
          <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-3">What Our Community Says:</h2>
          <div class="flex items-start bg-purple-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm group hover:shadow-md transition-all duration-200">
            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-12 h-12 rounded-full ring-2 ring-purple-300 dark:ring-purple-600 mr-4 flex-shrink-0 transform transition-transform duration-300 group-hover:scale-110">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">~ MusicLover22</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">"Absolutely stunning! The sound quality is phenomenal, and they're so comfortable for long listening sessions. Plus, the pastel colors are just adorable!"</p>
              <div class="flex text-yellow-500 text-sm mt-1">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

メガメニューコンポーネント - メンフィスアーストーンフード/レストラン

アースカラーのメンフィスデザインに触発された、食品/レストランのWebサイト向けのレスポンシブなメガメニューコンポーネント。大胆な色使い、幾何学的な形、遊び心のある柄が特徴です。ダークモードのサポートが含まれています。

開けるプレビュー

                <nav class="bg-amber-100 dark:bg-stone-900 border-b-4 border-amber-300 dark:border-stone-700 font-sans">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <a href="#" class="text-stone-800 dark:text-stone-100 text-3xl font-extrabold tracking-tight relative">
      <span class="block absolute -top-1 -left-1 w-6 h-6 bg-lime-400 dark:bg-lime-600 transform rotate-45"></span>
      <span class="block relative z-10">FoodieHub</span>
    </a>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-stone-700 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 font-semibold text-lg transition-colors duration-300">Home</a>
      <div class="relative group">
        <button class="text-stone-700 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 font-semibold text-lg transition-colors duration-300 focus:outline-none">Menu <svg class="w-4 h-4 ml-1 inline-block transform group-hover:rotate-180 transition-transform duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button>
        <div class="absolute left-1/2 -translate-x-1/2 mt-4 w-[600px] p-6 bg-lime-50 dark:bg-stone-800 rounded-xl shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 ease-in-out transform scale-95 group-hover:scale-100 border-4 border-lime-300 dark:border-stone-700 grid grid-cols-2 gap-6" style="clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(50% + 5px) calc(100% - 10px), 50% 100%, calc(50% - 5px) calc(100% - 10px), 0 calc(100% - 10px));">
          <div>
            <h3 class="font-bold text-xl text-stone-800 dark:text-stone-100 mb-4 flex items-center">
              <span class="bg-orange-400 dark:bg-orange-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2 text-sm">🍴</span> Popular Categories
            </h3>
            <ul class="space-y-3">
              <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 font-medium relative hover:pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-orange-400 dark:before:bg-orange-600 before:scale-0 hover:before:scale-100 before:transition-all before:duration-200">Pizzas & Pasta</a></li>
              <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 font-medium relative hover:pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-orange-400 dark:before:bg-orange-600 before:scale-0 hover:before:scale-100 before:transition-all before:duration-200">Burgers & Sandwiches</a></li>
              <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 font-medium relative hover:pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-orange-400 dark:before:bg-orange-600 before:scale-0 hover:before:scale-100 before:transition-all before:duration-200">Asian Delights</a></li>
              <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 font-medium relative hover:pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-orange-400 dark:before:bg-orange-600 before:scale-0 hover:before:scale-100 before:transition-all before:duration-200">Healthy Options</a></li>
              <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 font-medium relative hover:pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-orange-400 dark:before:bg-orange-600 before:scale-0 hover:before:scale-100 before:transition-all before:duration-200">Desserts & Drinks</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold text-xl text-stone-800 dark:text-stone-100 mb-4 flex items-center">
              <span class="bg-purple-400 dark:bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2 text-sm">✨</span> Today's Specials
            </h3>
            <a href="#" class="block bg-lime-100 dark:bg-stone-700 p-3 rounded-lg flex items-center space-x-3 group hover:bg-lime-200 dark:hover:bg-stone-600 transition-colors duration-200">
              <img src="https://picsum.photos/60/60?random=1" alt="Special Dish" class="rounded-md object-cover border-2 border-lime-300 dark:border-stone-500">
              <div>
                <p class="font-semibold text-stone-800 dark:text-stone-100 group-hover:text-orange-600 dark:group-hover:text-orange-400">Spicy Beef Tacos</p>
                <p class="text-sm text-stone-600 dark:text-stone-400">Authentic Mexican flavor, limited time!</p>
              </div>
            </a>
            <a href="#" class="block bg-lime-100 dark:bg-stone-700 p-3 rounded-lg flex items-center space-x-3 group mt-3 hover:bg-lime-200 dark:hover:bg-stone-600 transition-colors duration-200">
              <img src="https://picsum.photos/60/60?random=2" alt="Special Dish" class="rounded-md object-cover border-2 border-lime-300 dark:border-stone-500">
              <div>
                <p class="font-semibold text-stone-800 dark:text-stone-100 group-hover:text-orange-600 dark:group-hover:text-orange-400">Creamy Garlic Pasta</p>
                <p class="text-sm text-stone-600 dark:text-stone-400">Vegetarian option, rich and delightful.</p>
              </div>
            </a>
            <div class="mt-4 flex justify-center">
                <button class="px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white font-bold rounded-lg shadow-md transition-all duration-300 text-sm transform hover:scale-105 active:scale-95 relative overflow-hidden group">
                    <span class="absolute top-0 left-0 w-full h-full bg-orange-600 dark:bg-orange-700 transform scale-x-0 origin-right transition-transform duration-300 group-hover:scale-x-100 group-hover:origin-left"></span>
                    <span class="relative z-10">View All Specials</span>
                </button>
            </div>
          </div>
        </div>
      </div>
      <a href="#" class="text-stone-700 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 font-semibold text-lg transition-colors duration-300">About Us</a>
      <a href="#" class="text-stone-700 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 font-semibold text-lg transition-colors duration-300">Contact</a>
    </div>
    <div class="flex items-center space-x-4">
        <button class="p-2 rounded-full hidden md:inline-block bg-lime-200 dark:bg-stone-700 hover:bg-lime-300 dark:hover:bg-stone-600 transition-colors duration-200 shadow-sm">
            <svg class="w-6 h-6 text-stone-700 dark:text-stone-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
        </button>
        <button id="mobile-menu-button" class="md:hidden hamburger p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-400 dark:focus:ring-purple-400">
          <span class="hamburger-line block w-6 h-1 bg-stone-700 dark:bg-stone-200 transform transition duration-300 ease-in-out"></span>
          <span class="hamburger-line block w-6 h-1 mt-1 bg-stone-700 dark:bg-stone-200 transform transition duration-300 ease-in-out"></span>
          <span class="hamburger-line block w-6 h-1 mt-1 bg-stone-700 dark:bg-stone-200 transform transition duration-300 ease-in-out"></span>
        </button>
    </div>
  </div>

  <div id="mobile-menu" class="mobile-menu md:hidden fixed inset-0 bg-amber-100 dark:bg-stone-900 transform translate-x-full transition-transform duration-300 ease-in-out z-50 overflow-y-auto pt-20">
    <div class="p-4 flex flex-col space-y-4">
      <a href="#" class="block py-3 text-stone-800 dark:text-stone-100 text-xl font-semibold border-b border-lime-300 dark:border-stone-700 transition-colors duration-200 hover:text-orange-600 dark:hover:text-orange-400">Home</a>
      <div class="relative">
        <button class="w-full text-left py-3 text-stone-800 dark:text-stone-100 text-xl font-semibold border-b border-lime-300 dark:border-stone-700 flex justify-between items-center transition-colors duration-200 hover:text-orange-600 dark:hover:text-orange-400" onclick="this.nextElementSibling.classList.toggle('hidden'); this.querySelector('svg').classList.toggle('rotate-180')">
          Menu
          <svg class="w-5 h-5 transition-transform duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
        <div class="hidden mt-4 p-4 bg-lime-50 dark:bg-stone-800 rounded-lg shadow-inner border-2 border-lime-300 dark:border-stone-700">
          <h4 class="font-bold text-lg text-stone-800 dark:text-stone-100 border-b pb-2 mb-3 border-orange-300 dark:border-orange-500">Popular Categories</h4>
          <ul class="space-y-2">
            <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">Pizzas & Pasta</a></li>
            <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">Burgers & Sandwiches</a></li>
            <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">Asian Delights</a></li>
            <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">Healthy Options</a></li>
            <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">Desserts & Drinks</a></li>
          </ul>
          <h4 class="font-bold text-lg text-stone-800 dark:text-stone-100 border-b pb-2 mt-6 mb-3 border-purple-300 dark:border-purple-500">Today's Specials</h4>
          <a href="#" class="block bg-lime-100 dark:bg-stone-700 p-2 rounded-md flex items-center space-x-2 mt-2 hover:bg-lime-200 dark:hover:bg-stone-600 transition-colors duration-200">
            <img src="https://picsum.photos/50/50?random=3" alt="Special Dish" class="rounded-sm object-cover">
            <div>
              <p class="font-semibold text-stone-800 dark:text-stone-100 text-sm">Cheesy Garlic Bread</p>
              <p class="text-xs text-stone-600 dark:text-stone-400">Perfect appetizer!</p>
            </div>
          </a>
        </div>
      </div>
      <a href="#" class="block py-3 text-stone-800 dark:text-stone-100 text-xl font-semibold border-b border-lime-300 dark:border-stone-700 transition-colors duration-200 hover:text-orange-600 dark:hover:text-orange-400">About Us</a>
      <a href="#" class="block py-3 text-stone-800 dark:text-stone-100 text-xl font-semibold border-b border-lime-300 dark:border-stone-700 transition-colors duration-200 hover:text-orange-600 dark:hover:text-orange-400">Contact</a>
      <button class="px-4 py-3 bg-orange-500 hover:bg-orange-600 text-white font-bold rounded-lg shadow-md transition-all duration-300 text-lg transform hover:scale-105 active:scale-95 mt-4">
        <svg class="w-6 h-6 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
        Your Cart
      </button>
    </div>
    <button id="close-mobile-menu" class="absolute top-4 right-4 p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-400 dark:focus:ring-purple-400">
        <svg class="w-8 h-8 text-stone-700 dark:text-stone-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
    </button>
  </div>
</nav>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    const closeMobileMenuButton = document.getElementById('close-mobile-menu');

    function toggleMobileMenu() {
      mobileMenu.classList.toggle('translate-x-full');
      mobileMenuButton.classList.toggle('open'); // For hamburger icon animation
    }

    mobileMenuButton.addEventListener('click', toggleMobileMenu);
    closeMobileMenuButton.addEventListener('click', toggleMobileMenu);

    // Close menu when clicking outside (optional)
    // document.addEventListener('click', function(event) {
    //   if (!mobileMenu.contains(event.target) && !mobileMenuButton.contains(event.target) && !mobileMenu.classList.contains('translate-x-full')) {
    //     toggleMobileMenu();
    //   }
    // });

    // Hamburger animation (CSS only for transform, JS to toggle class)
    const style = document.createElement('style');
    style.innerHTML = `
      .hamburger-line:nth-child(1) { transform-origin: top left; }
      .hamburger-line:nth-child(3) { transform-origin: bottom left; }

      .hamburger.open .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 0px); }
      .hamburger.open .hamburger-line:nth-child(2) { opacity: 0; }
      .hamburger.open .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(5px, 1px); }
    `;
    document.head.appendChild(style);
  });
</script>

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

予約/予約システム用に設計された、3Dにインスパイアされた複雑なユーザープロファイルコンポーネントで、クールなニュートラル、応答性、ダークモードのサポートが特徴です。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 p-4 sm:p-6 lg:p-8 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
    <!-- Profile Card 1 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group dark:shadow-gray-700/50">
      <div class="p-6 sm:p-8 relative z-10">
        <div class="flex flex-col items-center text-center">
          <div class="relative w-24 h-24 mb-4 rounded-full overflow-hidden border-4 border-blue-300 dark:border-blue-600 shadow-lg">
            <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile image">
            <div class="absolute inset-0 bg-gradient-to-tr from-blue-400/20 to-blue-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-1">Jane Doe</h3>
          <p class="text-blue-600 dark:text-blue-400 font-semibold mb-4">Senior Stylist</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">Highly experienced stylist specializing in modern cuts and vibrant color treatments.</p>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12 3.686l-5.657 5.657m11.314 0L12 10.343l-5.657-5.657m0 0L5.636 5.636m12.728 0c-.78-.78-2.047-.78-2.828 0L12 7.172l-2.121-2.121c-.78-.78-2.047-.78-2.828 0L5.636 5.636m0 0L7.05 7.05m9.9 0L10.343 12 7.05 7.05M7.05 7.05l-1.414 1.414m12.728 0l1.414-1.414M12 12a4 4 0 110-8 4 4 0 010 8z"></path></svg>
            <span>5 Years Exp.</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            <span>Certified</span>
          </div>
        </div>

        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg text-center transition-all duration-300 transform group-hover:scale-105 active:scale-95 shadow-md hover:shadow-lg dark:bg-blue-500 dark:hover:bg-blue-600">
          Book Appointment
        </a>
      </div>
      <!-- 3D effect layers -->
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100 via-white to-blue-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-20px);"></div>
      <div class="absolute inset-0 bg-blue-50 dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-40px);"></div>
    </div>

    <!-- Profile Card 2 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group dark:shadow-gray-700/50">
      <div class="p-6 sm:p-8 relative z-10">
        <div class="flex flex-col items-center text-center">
          <div class="relative w-24 h-24 mb-4 rounded-full overflow-hidden border-4 border-blue-300 dark:border-blue-600 shadow-lg">
            <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile image">
            <div class="absolute inset-0 bg-gradient-to-tr from-blue-400/20 to-blue-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-1">John Smith</h3>
          <p class="text-blue-600 dark:text-blue-400 font-semibold mb-4">Master Barber</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">Dedicated master barber with a keen eye for classic and contemporary men's grooming.</p>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12 3.686l-5.657 5.657m11.314 0L12 10.343l-5.657-5.657m0 0L5.636 5.636m12.728 0c-.78-.78-2.047-.78-2.828 0L12 7.172l-2.121-2.121c-.78-.78-2.047-.78-2.828 0L5.636 5.636m0 0L7.05 7.05m9.9 0L10.343 12 7.05 7.05M7.05 7.05l-1.414 1.414m12.728 0l1.414-1.414M12 12a4 4 0 110-8 4 4 0 010 8z"></path></svg>
            <span>8 Years Exp.</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            <span>Awarded</span>
          </div>
        </div>

        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg text-center transition-all duration-300 transform group-hover:scale-105 active:scale-95 shadow-md hover:shadow-lg dark:bg-blue-500 dark:hover:bg-blue-600">
          Book Appointment
        </a>
      </div>
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100 via-white to-blue-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-20px);"></div>
      <div class="absolute inset-0 bg-blue-50 dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-40px);"></div>
    </div>

    <!-- Profile Card 3 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group dark:shadow-gray-700/50">
      <div class="p-6 sm:p-8 relative z-10">
        <div class="flex flex-col items-center text-center">
          <div class="relative w-24 h-24 mb-4 rounded-full overflow-hidden border-4 border-blue-300 dark:border-blue-600 shadow-lg">
            <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile image">
            <div class="absolute inset-0 bg-gradient-to-tr from-blue-400/20 to-blue-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-1">Emily White</h3>
          <p class="text-blue-600 dark:text-blue-400 font-semibold mb-4">Esthetician</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">Expert esthetician, passionate about skincare and providing rejuvenating facial treatments.</p>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12 3.686l-5.657 5.657m11.314 0L12 10.343l-5.657-5.657m0 0L5.636 5.636m12.728 0c-.78-.78-2.047-.78-2.828 0L12 7.172l-2.121-2.121c-.78-.78-2.047-.78-2.828 0L5.636 5.636m0 0L7.05 7.05m9.9 0L10.343 12 7.05 7.05M7.05 7.05l-1.414 1.414m12.728 0l1.414-1.414M12 12a4 4 0 110-8 4 4 0 010 8z"></path></svg>
            <span>3 Years Exp.</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            <span>Licensed</span>
          </div>
        </div>

        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg text-center transition-all duration-300 transform group-hover:scale-105 active:scale-95 shadow-md hover:shadow-lg dark:bg-blue-500 dark:hover:bg-blue-600">
          Book Appointment
        </a>
      </div>
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100 via-white to-blue-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-20px);"></div>
      <div class="absolute inset-0 bg-blue-50 dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-40px);"></div>
    </div>

  </div>
</div>

1 ... 28 29 30 31 32 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント