検索コンポーネント

すべてのコンポーネント

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

ソーシャル共有ボタンコンポーネント

ニュースやジャーナリズムのWebサイト向けに設計されたエレガントでレスポンシブなソーシャル共有ボタンコンポーネントで、豪華なフォレスト/グリーンのカラーパレットとダークモードのサポートが特徴です。これには、さまざまなプラットフォームで記事を共有するための複数のインタラクティブ要素が含まれています。

開けるプレビュー

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-green-50 to-green-100 dark:from-gray-900 dark:to-gray-950 font-sans antialiased text-gray-800 dark:text-gray-100 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-xl bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-green-200 dark:border-green-800">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-green-100 dark:border-green-700">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-green-800 dark:text-green-200 mb-2 leading-tight tracking-tight">
        Like What You Read?
      </h2>
      <p class="text-md sm:text-lg text-green-700 dark:text-green-300 font-medium">
        Share this insightful article with your network!
      </p>
    </div>

    <div class="p-6 sm:p-8 lg:p-10 grid grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
      <!-- Share Button: Facebook -->
      <button class="flex items-center justify-center p-3 sm:p-4 rounded-lg bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-900 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg group">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white mr-2.5" 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.886 8.438-9.879Z" clip-rule="evenodd" />
        </svg>
        <span class="text-white font-semibold text-sm sm:text-base">Facebook</span>
      </button>

      <!-- Share Button: Twitter/X -->
      <button class="flex items-center justify-center p-3 sm:p-4 rounded-lg bg-gray-900 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 dark:bg-gray-100 dark:hover:bg-gray-200 dark:focus:ring-gray-600 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg group">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white dark:text-gray-900 mr-2.5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M18.901 1.153 13.916 8.92c-.171.267-.442.428-.737.478L4.697 10.63H4.69c-.495.006-.991-.046-1.479-.153.208-.01.416.035.617.13 1.144.49 1.947 1.636 1.947 2.923v.15c0 .354-.084.706-.245 1.026-.067.135-.118.257-.156.368.175.056.35.09.525.093 1.06 0 1.916-.856 1.916-1.917 0-.306-.073-.604-.213-.865L12 10.457l3.651 4.545a1.914 1.914 0 0 1-.225 3.013c.277.262.614.475.975.642 1.341.61 2.996.903 4.673.811.107.822.429 1.57.854 2.235.438.694.945 1.31 1.503 1.849 0 0 .001.001.002.001L22 22 2 2v20c0 0 20-20 20-20z" fill-rule="evenodd" clip-rule="evenodd"/>
        </svg>
        <span class="text-white dark:text-gray-900 font-semibold text-sm sm:text-base">Twitter</span>
      </button>

      <!-- Share Button: LinkedIn -->
      <button class="flex items-center justify-center p-3 sm:p-4 rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-400 dark:bg-blue-800 dark:hover:bg-blue-900 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg group">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white mr-2.5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path 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 19H5v-9h3v9zM6.5 8.25A1.75 1.75 0 1 1 8.25 6.5 1.75 1.75 0 0 1 6.5 8.25zM19 19h-3v-4.74c0-1.78-1.52-2.46-2.58-1.42s-1.42 1.38-1.42 1.38V19h-3v-9h3v1.76c.45-.63 1.15-1.12 2.39-1.12 2.65 0 4.11 1.76 4.11 4.74V19z"/>
        </svg>
        <span class="text-white font-semibold text-sm sm:text-base">LinkedIn</span>
      </button>

      <!-- Share Button: Email -->
      <button class="flex items-center justify-center p-3 sm:p-4 rounded-lg bg-red-600 hover:bg-red-700 focus:ring-4 focus:ring-red-300 dark:bg-red-700 dark:hover:bg-red-800 dark:focus:ring-red-900 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg group">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white mr-2.5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M2.25 6.75A2.25 2.25 0 0 1 4.5 4.5h15C20.74 4.5 22 5.76 22 7.25v9.5c0 1.49-1.26 2.75-2.5 2.75H4.5A2.25 2.25 0 0 1 2.25 17.5v-9.5zm2.25 0V7a.75.75 0 0 0-.75-.75H4.5v0zm2.25 0l4.75 3.57a1.5 1.5 0 0 0 1.76 0L17.25 6.75h-10.5zM2.25 8.75v8.75A1.25 1.25 0 0 0 3.5 18.75h17A1.25 1.25 0 0 0 21.25 17.5v-8.75L12 15z"/>
        </svg>
        <span class="text-white font-semibold text-sm sm:text-base">Email</span>
      </button>

      <!-- Share Button: WhatsApp -->
      <button class="flex items-center justify-center p-3 sm:p-4 rounded-lg bg-green-500 hover:bg-green-600 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-900 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg group">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white mr-2.5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.04 2C7.38 2 3.61 5.77 3.61 10.43c0 1.55.4 3.06 1.16 4.4l-1.2 4.35 4.49-1.18c1.3.71 2.76 1.09 4.28 1.09C16.7 20.44 20.47 16.67 20.47 12.01S16.7 3.62 12.04 3.62zM17 14.8c-.14.24-.2.27-.47.37-.29.11-.67.16-1.07.16-.48 0-.91-.12-1.37-.29-.39-.15-1.17-.37-2.03-.76-.87-.39-1.74-.95-2.48-1.58-.77-.66-1.42-1.44-1.92-2.31-.5-.87-.78-1.72-.78-2.52 0-.9.27-1.45.39-1.66.12-.2.27-.27.42-.31.15-.04.38-.04.56-.02.18 0 .38.01.55.04.17.03.3-.06.45.3.15.35.53 1.28.53 1.28.02.04.03.07.03.11-.02.1-.06.2-.12.3-.39.46-.77.92-1.11 1.34-.36.43-.58.62-.64.69-.06.07-.13.14-.07.24.06.12.2.29.35.43.16.15.3.26.44.39.81.71 1.48 1.28 2.05 1.63.57.36 1.05.57 1.55.77 0 .01.01.01.01.01.04.02.07.03.11.05.12.03.22.05.33.05.07 0 .15-.01.2-.02.43-.17 1.27-.48 1.5-.66v-.01c.23-.19.33-.29.47-.36.14-.07.26-.06.39-.03.1.02.25.09.43.26.17.18.28.3.38.4.1.1.2.22.3.33.1.1.16.2.23.27.06.07.06.14.07.26v.01z"/>
        </svg>
        <span class="text-white font-semibold text-sm sm:text-base">WhatsApp</span>
      </button>

      <!-- Share Button: Copy Link -->
      <button class="flex items-center justify-center p-3 sm:p-4 rounded-lg bg-green-700 hover:bg-green-800 disabled:bg-green-400 focus:ring-4 focus:ring-green-400 dark:bg-green-800 dark:hover:bg-green-900 dark:focus:ring-green-950 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg group" onclick="navigator.clipboard.writeText('https://www.example.com/article-link').then(function(){ alert('Link copied to clipboard!'); }, function(){ alert('Failed to copy link!'); });">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white mr-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13.5h6m-3-3v6m-9 5.25a2.25 2.25 0 01-2.25-2.25V9C2.25 7.7 3.39 6.75 4.87 6.75h.92L6 4.78a2.25 2.25 0 011.85-.78h8.3a2.25 2.25 0 011.85.78l.21 1.97h.92c1.48 0 2.62 1.05 2.62 2.3V17.5a2.25 2.25 0 01-2.25 2.25h-15zM4 17.5L5.75 9H18.25L20 17.5"/>
        </svg>
        <span class="text-white font-semibold text-sm sm:text-base">Copy Link</span>
      </button>
    </div>

    <div class="p-6 sm:p-8 lg:p-10 border-t border-green-100 dark:border-green-700 text-center">
      <p class="text-sm sm:text-base text-gray-500 dark:text-gray-400">
        Thank you for reading and supporting quality journalism.
      </p>
    </div>
  </div>
</div>

<!-- Add a script tag to toggle dark mode for demonstration purposes -->
<script>
  // This script is purely for demonstration and should ideally be part of a larger JS setup.
  // It toggles dark mode when the 'D' key is pressed.
  document.addEventListener('keydown', (e) => {
    if (e.key === 'd' || e.key === 'D') {
      document.documentElement.classList.toggle('dark');
    }
  });
</script>

Playful_Job_Application_Progress_Indicator

ジョブ応募ワークフロー用の複雑で遊び心があり、応答性の高い進行状況インジケータコンポーネントで、キャンディー/スウィートの配色とダークモードのサポートを特長としています。求人掲示板やキャリア開発プラットフォーム向けに設計されており、アニメーション化されたトランジションと励ましのメッセージで複数の応募ステージを視覚的に表現します。

開けるプレビュー

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans antialiased">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-700 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="p-6 sm:p-8">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-pink-600 dark:text-pink-400 mb-2 text-center">
        Your Job Hunt Adventure!
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-8 text-center">
        Let's track your progress, one sweet step at a time.
      </p>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
        <!-- Application Overview Card -->
        <div class="bg-pink-50 dark:bg-gray-600 rounded-2xl p-6 shadow-md transition-all duration-300 transform hover:scale-105">
          <h3 class="text-xl font-bold text-pink-700 dark:text-pink-300 mb-3">Current Application</h3>
          <p class="text-2xl font-extrabold text-purple-700 dark:text-purple-300">Frontend Developer</p>
          <p class="text-gray-600 dark:text-gray-400 mb-4">at Sparkle Tech Innovations</p>
          <div class="flex items-center text-sm font-medium text-pink-600 dark:text-pink-400">
            <svg class="w-5 h-5 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            Applied on: Apr 12, 2024
          </div>
        </div>

        <!-- Motivational Quote Card -->
        <div class="bg-purple-50 dark:bg-gray-600 rounded-2xl p-6 shadow-md transition-all duration-300 transform hover:scale-105">
          <div class="flex items-center justify-center mb-3">
            <svg class="w-10 h-10 text-purple-600 dark:text-purple-300 mr-3" 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.414 1.758l-.707.707M3.757 19.414l.707-.707M1.021 10.499a11.955 11.955 0 010-2.998m12.745 10.603a11.955 11.955 0 01-2.998 0M21.021 10.499a11.955 11.955 0 000-2.998M3.757 4.586L3.05 3.879m16.97 16.97l-.707-.707M16.95 20.485l.707-.707M12 21.001v-1m-4.504-2.504l-.707.707M5.074 1.758L4.367 1.051M10 12h4m-2 4v-4"></path></svg>
            <h3 class="text-xl font-bold text-purple-700 dark:text-purple-300">Keep Shining!</h3>
          </div>
          <blockquote class="text-lg italic text-gray-700 dark:text-gray-300 text-center">
            "Every 'no' gets you closer to a 'yes'! Your dream job is just around the corner."
          </blockquote>
        </div>
      </div>

      <!-- Progress Steps Container -->
      <div class="relative flex flex-col sm:flex-row justify-between items-center w-full px-4 sm:px-0 mb-8">
        <!-- Progress Line (Mobile/Tablet Hidden) -->
        <div class="hidden sm:block absolute top-1/2 left-0 right-0 h-2 bg-gradient-to-r from-pink-200 to-purple-200 dark:from-gray-500 dark:to-gray-600 rounded-full mx-auto -mt-1 z-0"></div>
        <div class="hidden sm:block absolute top-1/2 left-0 h-2 bg-gradient-to-r from-pink-500 to-purple-500 dark:from-mint-400 dark:to-pink-400 rounded-full transition-all duration-1000 ease-out z-10" style="width: 66%;"></div>

        <!-- Steps -->
        <div class="flex flex-col sm:flex-row w-full justify-between z-20">

          <!-- Step 1: Applied -->
          <div class="flex flex-col items-center mb-6 sm:mb-0 w-full sm:w-auto relative group">
            <div class="w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-full bg-gradient-to-br from-pink-400 to-purple-400 dark:from-mint-500 dark:to-teal-500 text-white shadow-lg transform transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl">
              <svg class="w-8 h-8 sm:w-10 sm:h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            </div>
            <p class="mt-3 text-sm sm:text-base font-bold text-pink-700 dark:text-pink-300 text-center">1. Applied!</p>
            <div class="absolute hidden group-hover:block bottom-full mb-2 p-2 rounded-lg bg-pink-600 dark:bg-gray-800 text-white text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform -translate-y-2 group-hover:translate-y-0">
              Application Sent (Apr 12)
              <div class="absolute left-1/2 -bottom-1 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-pink-600 dark:border-t-gray-800 -translate-x-1/2"></div>
            </div>
          </div>

          <!-- Step 2: Interview Scheduled -->
          <div class="flex flex-col items-center mb-6 sm:mb-0 w-full sm:w-auto relative group">
            <div class="w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-full bg-gradient-to-br from-mint-400 to-teal-400 dark:from-purple-500 dark:to-pink-500 text-white shadow-lg transform transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl">
              <svg class="w-8 h-8 sm:w-10 sm:h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            </div>
            <p class="mt-3 text-sm sm:text-base font-bold text-mint-700 dark:text-mint-300 text-center">2. Interview Time!</p>
            <div class="absolute hidden group-hover:block bottom-full mb-2 p-2 rounded-lg bg-mint-600 dark:bg-gray-800 text-white text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform -translate-y-2 group-hover:translate-y-0">
              Round 1 Interview (Apr 20)
              <div class="absolute left-1/2 -bottom-1 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-mint-600 dark:border-t-gray-800 -translate-x-1/2"></div>
            </div>
          </div>

          <!-- Step 3: Feedback Received -->
          <div class="flex flex-col items-center mb-6 sm:mb-0 w-full sm:w-auto relative group">
            <div class="w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-full bg-gradient-to-br from-orange-400 to-yellow-400 dark:from-amber-500 dark:to-orange-500 text-white shadow-lg opacity-60 transform transition-all duration-300 group-hover:scale-110 group-hover:opacity-100 group-hover:shadow-xl">
              <svg class="w-8 h-8 sm:w-10 sm:h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
            </div>
            <p class="mt-3 text-sm sm:text-base font-bold text-orange-700 dark:text-orange-300 opacity-60 group-hover:opacity-100 text-center">3. Feedback Fun!</p>
            <div class="absolute hidden group-hover:block bottom-full mb-2 p-2 rounded-lg bg-orange-600 dark:bg-gray-800 text-white text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform -translate-y-2 group-hover:translate-y-0">
              Awaiting Feedback
              <div class="absolute left-1/2 -bottom-1 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-orange-600 dark:border-t-gray-800 -translate-x-1/2"></div>
            </div>
          </div>

          <!-- Step 4: Offer/Rejection -->
          <div class="flex flex-col items-center w-full sm:w-auto relative group">
            <div class="w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-full bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-500 dark:to-gray-600 text-gray-600 dark:text-gray-200 shadow-inner opacity-40 transform transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl group-hover:opacity-100">
              <svg class="w-8 h-8 sm:w-10 sm:h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L12 21l-2.286-6.857L3 12l5.714-2.143L12 3z"></path></svg>
            </div>
            <p class="mt-3 text-sm sm:text-base font-bold text-gray-600 dark:text-gray-400 opacity-40 group-hover:opacity-100 text-center">4. Tada Moment!</p>
            <div class="absolute hidden group-hover:block bottom-full mb-2 p-2 rounded-lg bg-gray-800 dark:bg-gray-800 text-white text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform -translate-y-2 group-hover:translate-y-0">
              Offer or Next Steps
              <div class="absolute left-1/2 -bottom-1 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-gray-800 dark:border-t-gray-800 -translate-x-1/2"></div>
            </div>
          </div>

        </div>
      </div>

      <!-- Call to Action / Next Steps -->
      <div class="text-center mt-12">
        <p class="text-xl text-gray-700 dark:text-gray-300 mb-6">Ready for your next power-up? ✨</p>
        <button class="px-8 py-4 rounded-full bg-gradient-to-r from-pink-500 to-purple-500 dark:from-mint-500 dark:to-teal-500 text-white text-lg font-bold shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-mint-300 animate-bounce-slow">
          View All Applications!
        </button>
      </div>

      <!-- Related Content / Profile Link -->
      <div class="mt-10 pt-8 border-t border-gray-200 dark:border-gray-600 text-center">
        <p class="text-gray-600 dark:text-gray-400">Don't forget to keep your profile sparkling! ✨</p>
        <div class="flex items-center justify-center mt-4">
          <img class="w-12 h-12 rounded-full border-4 border-pink-400 dark:border-mint-400 shadow-md mr-3 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
          <a href="#" class="text-lg font-semibold text-purple-600 dark:text-purple-300 hover:text-purple-800 dark:hover:text-purple-100 transition-colors duration-300">
            My Sparkle Profile
          </a>
        </div>
      </div>

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

<style>
  /* Custom bouncy animation for button */
  @keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  .animate-bounce-slow {
    animation: bounce-slow 2s infinite ease-in-out;
  }
</style>

チャットウィンドウコンポーネント

有機的/自然にインスパイアされたデザイン、ネオン/エレクトリックの配色、ダークモードのサポートを備えたシンプルで応答性の高いチャットウィンドウコンポーネントで、予約/予約システムに適しています。

開けるプレビュー

                <div class="flex justify-center items-center h-screen bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="relative w-full max-w-sm lg:max-w-md xl:max-w-lg bg-white dark:bg-gray-850 rounded-3xl shadow-xl overflow-hidden animate-fade-in-up transition-all duration-500 ease-in-out transform hover:scale-105 group">
    <!-- Organic Top Shape -->
    <div class="absolute top-0 left-0 right-0 h-40 bg-gradient-to-r from-teal-400 via-blue-500 to-indigo-600 dark:from-teal-600 dark:via-blue-700 dark:to-indigo-800 rounded-bl-[40%] rounded-br-[30%] group-hover:from-teal-300 group-hover:via-blue-400 group-hover:to-indigo-500 transition-all duration-300 ease-in-out"></div>

    <!-- Header -->
    <div class="relative z-10 flex items-center justify-between p-6 pb-2 pt-8">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full border-2 border-teal-300 dark:border-teal-500 shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <h2 class="text-xl font-bold text-white drop-shadow-md">Scheduler Bot</h2>
          <p class="text-sm text-blue-100 dark:text-blue-200 text-opacity-80">Online</p>
        </div>
      </div>
      <button class="p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600">
        <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="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Chat Body -->
    <div class="relative z-0 p-6 pt-4 h-96 overflow-y-auto custom-scrollbar-neon" style="scrollbar-width: thin; -ms-overflow-style: none;">
      <!-- Receiver Message -->
      <div class="flex items-start mb-4 animate-fade-in" style="animation-delay: 0.1s;">
        <img class="w-8 h-8 rounded-full mr-2 shadow-sm" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Bot Avatar">
        <div class="bg-gradient-to-tr from-cyan-400 to-blue-500 dark:from-cyan-600 dark:to-blue-700 text-white p-3 rounded-tr-lg rounded-bl-lg rounded-br-lg max-w-[80%] shadow-lg transition-transform duration-300 ease-in-out hover:scale-105">
          <p class="text-sm">Hello! How can I assist you with your booking today?</p>
          <span class="block text-xs text-blue-100 text-opacity-75 mt-1">10:00 AM</span>
        </div>
      </div>

      <!-- User Message -->
      <div class="flex justify-end mb-4 animate-fade-in" style="animation-delay: 0.2s;">
        <div class="bg-gradient-to-tr from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-800 text-white p-3 rounded-tl-lg rounded-bl-lg rounded-br-lg max-w-[80%] shadow-lg transition-transform duration-300 ease-in-out hover:scale-105">
          <p class="text-sm">I'd like to book an appointment for a health check-up next week.</p>
          <span class="block text-xs text-purple-100 text-opacity-75 mt-1">10:02 AM</span>
        </div>
      </div>

      <!-- Receiver Message (Options) -->
      <div class="flex items-start mb-4 animate-fade-in" style="animation-delay: 0.3s;">
        <img class="w-8 h-8 rounded-full mr-2 shadow-sm" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Bot Avatar">
        <div class="bg-gradient-to-tr from-cyan-400 to-blue-500 dark:from-cyan-600 dark:to-blue-700 text-white p-3 rounded-tr-lg rounded-bl-lg rounded-br-lg max-w-[80%] shadow-lg">
          <p class="text-sm mb-2">Great! Please select your preferred day:</p>
          <div class="flex flex-wrap gap-2">
            <button class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-xs text-white hover:bg-opacity-30 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-blue-300">Monday</button>
            <button class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-xs text-white hover:bg-opacity-30 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-blue-300">Wednesday</button>
            <button class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-xs text-white hover:bg-opacity-30 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-blue-300">Friday</button>
          </div>
          <span class="block text-xs text-blue-100 text-opacity-75 mt-2">10:03 AM</span>
        </div>
      </div>
    </div>

    <!-- Input Area -->
    <div class="relative p-4 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-850">
      <div class="flex items-center space-x-2">
        <input type="text" placeholder="Type your message..." class="flex-grow py-2 px-4 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 transition-shadow duration-200 ease-in-out placeholder-gray-400 dark:placeholder-gray-500 shadow-inner" />
        <button class="bg-gradient-to-r from-teal-400 to-blue-500 dark:from-teal-600 dark:to-blue-700 p-3 rounded-full text-white shadow-lg hover:from-teal-300 hover:to-blue-400 dark:hover:from-teal-500 dark:hover:to-blue-600 transition-all duration-300 ease-in-out transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5.108 5.768a2 2 0 0 1 2.828 0L20 12l-12.064 6.232a2 2 0 0 1-2.828-2.828L14.172 12 5.108 5.768z" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Custom Scrollbar Styles (can be moved to a <style> tag or CSS file) -->
  <style>
    .custom-scrollbar-neon::-webkit-scrollbar {
      width: 6px;
    }

    .custom-scrollbar-neon::-webkit-scrollbar-track {
      background: transparent;
    }

    .custom-scrollbar-neon::-webkit-scrollbar-thumb {
      background-image: linear-gradient(to bottom, #0ea5e9, #a855f7);
      border-radius: 10px;
    }
    
    .dark .custom-scrollbar-neon::-webkit-scrollbar-thumb {
      background-image: linear-gradient(to bottom, #2563eb, #7c3aed);
    }

    .custom-scrollbar-neon {
      scrollbar-color: #0ea5e9 #f1f5f9; /* thumb and track for Firefox */
    }

    .dark .custom-scrollbar-neon {
      scrollbar-color: #2563eb #1f2937; /* thumb and track for Firefox in dark mode */
    }

    /* Animations */
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .animate-fade-in {
      animation: fade-in 0.5s ease-out forwards;
    }

    @keyframes fade-in-up {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .animate-fade-in-up {
      animation: fade-in-up 0.6s ease-out forwards;
    }
  </style>
</div>

Brutalist_Login_Form_Travel_Tourism

旅行や観光のウェブサイト向けに設計された、鮮やかな色の中程度の複雑さのブルータリズムスタイルのログインフォーム。ハイコントラスト、大胆なタイポグラフィ、ダークモードのサポートによる完全な応答性を備えています。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center p-4 bg-lime-200 dark:bg-gray-900 font-mono transition-colors duration-300">
  <div class="w-full max-w-md bg-yellow-400 dark:bg-gray-800 border-4 border-black dark:border-red-500 shadow-[8px_8px_0_0_black] dark:shadow-[8px_8px_0_0_red] transform -rotate-2 hover:rotate-0 transition-all duration-300 ease-in-out p-8 md:p-12 space-y-8 relative overflow-hidden">
    <div class="absolute top-0 left-0 w-16 h-16 bg-fuchsia-600 dark:bg-sky-500 rounded-br-full z-0"></div>
    <div class="absolute bottom-0 right-0 w-24 h-24 bg-teal-500 dark:bg-orange-500 rounded-tl-full z-0"></div>

    <h2 class="text-5xl md:text-6xl font-extrabold text-black dark:text-yellow-400 text-center uppercase leading-tight tracking-tighter relative z-10 drop-shadow-[4px_4px_0_black] dark:drop-shadow-[4px_4px_0_red]">
      <span class="block">Embark</span> <span class="block">Login</span>
    </h2>
    <p class="text-lg text-black dark:text-gray-200 text-center relative z-10 border-t-2 border-b-2 border-black dark:border-red-500 py-2">
      Adventure Awaits! Sign in to book your next journey.
    </p>

    <form class="space-y-6 relative z-10">
      <div>
        <label for="email" class="block text-black dark:text-yellow-400 text-xl font-bold uppercase mb-2 border-b-2 border-black dark:border-red-500 pb-1">
          Email
        </label>
        <input type="email" id="email" name="email" placeholder="[email protected]" class="w-full p-4 bg-blue-300 dark:bg-gray-700 text-black dark:text-white border-4 border-black dark:border-red-500 focus:outline-none focus:ring-4 focus:ring-fuchsia-600 dark:focus:ring-sky-500 text-xl font-bold transition-all duration-200 placeholder-black dark:placeholder-gray-400 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" required>
      </div>
      <div>
        <label for="password" class="block text-black dark:text-yellow-400 text-xl font-bold uppercase mb-2 border-b-2 border-black dark:border-red-500 pb-1">
          Password
        </label>
        <input type="password" id="password" name="password" placeholder="your_secret_path" class="w-full p-4 bg-emerald-300 dark:bg-gray-700 text-black dark:text-white border-4 border-black dark:border-red-500 focus:outline-none focus:ring-4 focus:ring-fuchsia-600 dark:focus:ring-sky-500 text-xl font-bold transition-all duration-200 placeholder-black dark:placeholder-gray-400 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" required>
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="h-6 w-6 text-fuchsia-600 dark:text-sky-500 border-4 border-black dark:border-red-500 focus:ring-fuchsia-600 dark:focus:ring-sky-500 bg-white dark:bg-gray-700 checked:bg-fuchsia-600 dark:checked:bg-sky-500 transition-colors duration-200 relative top-1">
          <label for="remember-me" class="ml-3 text-lg font-bold text-black dark:text-gray-200 uppercase">
            Remember Me
          </label>
        </div>
        <a href="#" class="font-bold text-lg text-black dark:text-red-500 underline hover:no-underline transition-all duration-200 uppercase relative z-10">
          Forgot Password?
        </a>
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-4 px-6 border-4 border-black dark:border-red-500 shadow-[6px_6px_0_0_black] dark:shadow-[6px_6px_0_0_red] bg-violet-600 dark:bg-green-500 text-white dark:text-black hover:bg-yellow-500 dark:hover:bg-red-500 hover:text-black dark:hover:text-black text-2xl uppercase tracking-widest font-extrabold focus:outline-none focus:ring-4 focus:ring-fuchsia-600 dark:focus:ring-sky-500 transform hover:translate-x-1 hover:translate-y-1 transition-all duration-200 relative z-10">
          Login to Explore
        </button>
      </div>
    </form>

    <p class="mt-8 text-center text-lg text-black dark:text-gray-200 relative z-10">
      Don't have an account?
      <a href="#" class="font-bold text-lg text-black dark:text-green-500 underline hover:no-underline transition-all duration-200 uppercase ml-2">
        Register Here!
      </a>
    </p>

    <div class="absolute -left-16 -bottom-16 w-32 h-32 bg-purple-500 dark:bg-cyan-500 rounded-full opacity-50 blur-xl z-0 pointer-events-none"></div>
    <div class="absolute -right-16 -top-16 w-40 h-40 bg-pink-500 dark:bg-yellow-500 rounded-full opacity-50 blur-xl z-0 pointer-events-none"></div>
  </div>
</div>

Retro_Vintage_Loader_Component

セピア/ブラウンの色調のシンプルで応答性の高いレトロ/ビンテージをテーマにしたローダーコンポーネントは、イベントや会議のWebサイトに適しており、ダークモードのサポートを備えています。

開けるプレビュー

                <div class="p-4 md:p-8 flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 font-mono">
    <div class="w-full max-w-sm p-6 md:p-8 rounded-lg shadow-xl border-2 border-amber-800 dark:border-amber-600 bg-amber-50 dark:bg-gray-800 transform transition-transform duration-300 hover:scale-105">
        <div class="text-center mb-6">
            <p class="text-2xl md:text-3xl font-bold text-amber-900 dark:text-amber-200 uppercase tracking-widest leading-tight">
                Initializing
            </p>
            <p class="text-sm md:text-base text-amber-700 dark:text-amber-400 mt-1">
                Please stand by...
            </p>
        </div>

        <div class="flex items-center justify-center space-x-2 animate-pulse mb-6">
            <div class="w-4 h-4 md:w-5 md:h-5 bg-amber-600 dark:bg-amber-400 rounded-full animate-bounce-custom" style="animation-delay: 0s;"></div>
            <div class="w-4 h-4 md:w-5 md:h-5 bg-amber-600 dark:bg-amber-400 rounded-full animate-bounce-custom" style="animation-delay: 0.1s;"></div>
            <div class="w-4 h-4 md:w-5 md:h-5 bg-amber-600 dark:bg-amber-400 rounded-full animate-bounce-custom" style="animation-delay: 0.2s;"></div>
            <div class="w-4 h-4 md:w-5 md:h-5 bg-amber-600 dark:bg-amber-400 rounded-full animate-bounce-custom" style="animation-delay: 0.3s;"></div>
            <div class="w-4 h-4 md:w-5 md:h-5 bg-amber-600 dark:bg-amber-400 rounded-full animate-bounce-custom" style="animation-delay: 0.4s;"></div>
        </div>

        <div class="w-full bg-amber-200 dark:bg-gray-700 rounded-full h-3 mb-4 overflow-hidden retro-progress-bar">
            <div class="bg-amber-700 dark:bg-amber-500 h-3 rounded-full animate-progress-fill origin-left" style="width: 0%;"></div>
        </div>

        <div class="text-center text-xs md:text-sm text-gray-600 dark:text-gray-400">
            <p>Loading essential modules...</p>
        </div>
    </div>

    <style>
        .animate-bounce-custom {
            animation: bounce-custom 1.5s infinite ease-in-out;
        }

        @keyframes bounce-custom {
            0%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
        }

        @keyframes progress-fill {
            0% {
                width: 0%;
            }
            100% {
                width: 100%;
            }
        }

        .animate-progress-fill {
            animation: progress-fill 2s forwards linear;
        }

        .retro-progress-bar {
            box-shadow: inset 0 0 5px rgba(0,0,0,0.2) relevant;
        }
    </style>
</div>

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

モノスペース/開発者の美学と温かみのあるニュートラルな配色で設計された複雑で応答性の高いメガメニューコンポーネントで、専門的なコンサルティング/サービスWebサイトに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <nav class="bg-gray-100 font-mono tracking-tighter shadow-sm dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="flex h-16 justify-between items-center">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <a href="#" class="text-gray-800 dark:text-gray-200 text-xl font-bold uppercase"><span class="text-orange-500">[</span>DEV<span class="text-orange-500">]</span>CONSULT</a>
        </div>
      </div>
      <div class="hidden md:ml-6 md:flex md:items-center">
        <button type="button" class="relative rounded-full bg-gray-200 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:text-gray-100 dark:focus:ring-offset-gray-900">
          <span class="absolute -inset-1.5"></span>
          <span class="sr-only">View notifications</span>
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
          </svg>
        </button>

        <div class="relative ml-3 group">
          <div>
            <button type="button" class="relative flex rounded-full bg-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:bg-gray-800 dark:focus:ring-offset-gray-900" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
              <span class="absolute -inset-1.5"></span>
              <span class="sr-only">Open user menu</span>
              <img class="h-8 w-8 rounded-full border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
            </button>
          </div>

          <!-- Dropdown menu, show/hide based on menu state. -->
          <div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700 hidden group-hover:block" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
          </div>
        </div>
      </div>
      <div class="-mr-2 flex md:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="relative inline-flex items-center justify-center rounded-md bg-gray-200 p-2 text-gray-700 hover:bg-gray-300 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:focus:ring-offset-gray-900" aria-controls="mobile-menu" aria-expanded="false">
          <span class="absolute -inset-0.5"></span>
          <span class="sr-only">Open main menu</span>
          <!-- Menu open: "hidden", Menu closed: "block" -->
          <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
          </svg>
          <!-- Menu open: "block", Menu closed: "hidden" -->
          <svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Main Navigation Links -->
    <div class="hidden md:block py-4">
      <div class="flex space-x-8">
        <div class="group relative">
          <button class="text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-200 dark:hover:text-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900">[.SERVICES]</button>
          <div class="hidden group-hover:block absolute left-0 top-full z-10 w-screen max-w-5xl overflow-hidden rounded-lg bg-gray-50 p-6 shadow-xl dark:bg-gray-800 dark:ring-gray-700">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div>
                <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// CORE SERVICES</h3>
                <ul class="mt-4 space-y-2">
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Cloud Infrastructure</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> DevOps Automation</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Cybersecurity Consulting</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Data Engineering</a></li>
                </ul>
              </div>
              <div>
                <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// INDUSTRY SOLUTIONS</h3>
                <ul class="mt-4 space-y-2">
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> FinTech Deployment</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Healthcare IT</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> E-commerce Platforms</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Government & Public Sector</a></li>
                </ul>
              </div>
              <div class="bg-gray-100 p-4 rounded-md dark:bg-gray-700">
                <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// FEATURED RESOURCE</h3>
                <img class="mt-4 w-full h-32 object-cover rounded-md" src="https://picsum.photos/300/200?random=1" alt="Featured Resource">
                <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">'Mastering Kubernetes: A Developer's Guide to Container Orchestration.' Dive deep into scalable deployments.</p>
                <a href="#" class="mt-3 inline-flex items-center text-sm font-medium text-orange-600 hover:text-orange-500 dark:text-orange-400 dark:hover:text-orange-300">READ_DOCS() <span aria-hidden="true"> &rarr;</span></a>
              </div>
            </div>
          </div>
        </div>

        <div class="group relative">
          <button class="text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-200 dark:hover:text-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900">[.SOLUTIONS]</button>
          <div class="hidden group-hover:block absolute left-0 top-full z-10 w-screen max-w-2xl overflow-hidden rounded-lg bg-gray-50 p-6 shadow-xl dark:bg-gray-800 dark:ring-gray-700">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
              <div>
                <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// BY INDUSTRY</h3>
                <ul class="mt-4 space-y-2">
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Energy Sector Automation</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Manufacturing Digitalization</a></li>
                </ul>
              </div>
              <div>
                <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// BY TECHNOLOGY</h3>
                <ul class="mt-4 space-y-2">
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">AI/ML Integration</a></li>
                  <li><a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Blockchain Development</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <a href="#" class="text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-200 dark:hover:text-orange-400">[.ABOUT_US]</a>
        <a href="#" class="text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-200 dark:hover:text-orange-400">[.BLOG]</a>
        <a href="#" class="text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium dark:text-gray-200 dark:hover:text-orange-400">[.CONTACT]</a>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden" id="mobile-menu">
    <div class="space-y-1 px-2 pb-3 pt-2">
      <div class="group relative">
        <button class="w-full text-left text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-base font-medium dark:text-gray-200 dark:hover:text-orange-400">[.SERVICES]</button>
        <div class="mt-2 space-y-1 pl-4">
          <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// CORE SERVICES</p>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Cloud Infrastructure</a>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> DevOps Automation</a>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Cybersecurity Consulting</a>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Data Engineering</a>
          
          <p class="mt-4 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// INDUSTRY SOLUTIONS</p>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> FinTech Deployment</a>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm"><span class="text-orange-500">$</span> Healthcare IT</a>
        </div>
      </div>
      
      <div class="group relative">
        <button class="w-full text-left text-gray-800 hover:text-orange-500 px-3 py-2 rounded-md text-base font-medium dark:text-gray-200 dark:hover:text-orange-400">[.SOLUTIONS]</button>
        <div class="mt-2 space-y-1 pl-4">
          <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// BY INDUSTRY</p>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Energy Sector Automation</a>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Manufacturing Digitalization</a>
          <p class="mt-4 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">// BY TECHNOLOGY</p>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">AI/ML Integration</a>
          <a href="#" class="block p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">Blockchain Development</a>
        </div>
      </div>

      <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 hover:text-orange-500 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-orange-400">[.ABOUT_US]</a>
      <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 hover:text-orange-500 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-orange-400">[.BLOG]</a>
      <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 hover:text-orange-500 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-orange-400">[.CONTACT]</a>
    </div>
    <div class="border-t border-gray-200 pb-3 pt-4 dark:border-gray-700">
      <div class="flex items-center px-5">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium leading-none text-gray-800 dark:text-gray-200">John Doe</div>
          <div class="text-sm font-medium leading-none text-gray-500 dark:text-gray-400">[email protected]</div>
        </div>
        <button type="button" class="ml-auto flex-shrink-0 rounded-full bg-gray-200 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:hover:text-gray-100 dark:focus:ring-offset-gray-900">
          <span class="sr-only">View notifications</span>
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
          </svg>
        </button>
      </div>
      <div class="mt-3 space-y-1 px-2">
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700">Your Profile</a>
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700">Settings</a>
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-800 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700">Sign out</a>
      </div>
    </div>
  </div>
</nav>

ラグジュアリー認証コンポーネント

高級ファッションおよび美容ブランド向けに設計されたエレガントで洗練された認証コンポーネントで、豊富なインターフェイス、応答性の高いレイアウト、および類似の配色を使用したダークモードのサポートを特長としています。

開けるプレビュー

                <div class="min-h-screen bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-serif">
  <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-xl overflow-hidden max-w-4xl w-full flex flex-col lg:flex-row transform transition-all duration-300 hover:shadow-3xl dark:border dark:border-gray-700">
    <!-- Left Section: Image and Slogan -->
    <div class="relative lg:w-1/2 overflow-hidden flex items-center justify-center p-6 lg:p-10 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-900 dark:to-pink-900 border-b lg:border-r border-gray-100 dark:border-purple-800">
      <img src="https://picsum.photos/600/800?grayscale&blur=2" alt="Luxury Fashion" class="absolute inset-0 w-full h-full object-cover opacity-60 dark:opacity-40 transition-opacity duration-300">
      <div class="relative z-10 text-center text-gray-900 dark:text-white px-4 py-8 rounded-lg bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm dark:bg-black dark:bg-opacity-30">
        <h2 class="text-4xl lg:text-5xl font-bold mb-4 tracking-tight">Embrace Your Elegance</h2>
        <p class="text-lg lg:text-xl leading-relaxed italic">Discover exquisite collections crafted for timeless beauty and unparalleled style.</p>
        <div class="mt-8 flex justify-center space-x-4">
          <a href="#" class="text-gray-900 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-300 transform hover:scale-110 transition-transform duration-300">
            <svg class="h-7 w-7" 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.886 8.438-9.879z" clip-rule="evenodd" /></svg>
          </a>
          <a href="#" class="text-gray-900 dark:text-gray-200 hover:text-pink-700 dark:hover:text-pink-300 transform hover:scale-110 transition-transform duration-300">
            <svg class="h-7 w-7" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.002 3.797.048 1.05.056 1.405.123 1.748.213.688.181 1.255.426 1.71.681a3.07 3.07 0 011.086 1.086c.255.455.5.962.681 1.71.09.344.156.699.213 1.748.047 1.013.048 1.371.048 3.797s-.001 2.784-.048 3.797c-.056 1.05-.123 1.405-.213 1.748a3.07 3.07 0 01-.681 1.71 3.07 3.07 0 01-1.086 1.086c-.455.255-.962.5-1.71.681-.344.09-.699.156-1.748.213-1.013.047-1.371.048-3.797.048s-2.784-.001-3.797-.048c-1.05-.056-1.405-.123-1.748-.213a3.07 3.07 0 01-1.71-.681 3.07 3.07 0 01-1.086-1.086c-.255-.455-.5-.962-.681-1.71-.09-.344-.156-.699-.213-1.748C3.003 16.315 3 15.958 3 13.5s.002-2.784.048-3.797c.056-1.05.123-1.405.213-1.748a3.07 3.07 0 01.681-1.71 3.07 3.07 0 011.086-1.086c.455-.255.962-.5 1.71-.681.344-.09.699-.156 1.748-.213C9.557 2.003 9.918 2 12.315 2zm0 2.137c-2.002 0-2.274.004-3.067.04l-.566.027c-.41.02-.638.07-.797.135a1.59 1.59 0 00-.86.86c-.065.159-.115.387-.135.797l-.027.566c-.036.793-.04 1.065-.04 3.067s.004 2.274.04 3.067l.027.566c.02.41.07.638.135.797a1.59 1.59 0 00.86.86c.159.065.387.115.797.135l.566.027c.793.036 1.065.04 3.067.04s2.274-.004 3.067-.04l.566-.027c.41-.02.638-.07.797-.135a1.59 1.59 0 00.86-.86c.065-.159.115-.387.135-.797l.027-.566c.036-.793.04-1.065.04-3.067s-.004-2.274-.04-3.067l-.027-.566c-.02-.41-.07-.638-.135-.797a1.59 1.59 0 00-.86-.86c-.159-.065-.387-.115-.797-.135l-.566-.027c-.793-.036-1.065-.04-3.067-.04zm0 3.393a4.469 4.469 0 100 8.938 4.469 4.469 0 000-8.938zM12.315 9.08a3.07 3.07 0 110 6.139 3.07 3.07 0 010-6.139zm5.355-3.003a1.076 1.076 0 100 2.152 1.076 1.076 0 000-2.152z" clip-rule="evenodd" /></svg>
          </a>
        </div>
      </div>
    </div>

    <!-- Right Section: Login/Register Form -->
    <div class="lg:w-1/2 p-6 sm:p-8 lg:p-10 flex flex-col justify-center dark:text-gray-200">
      <div class="mb-6 text-center">
        <h3 class="text-3xl lg:text-4xl font-bold mb-2 text-gray-900 dark:text-white">Welcome Back!</h3>
        <p class="text-gray-600 dark:text-gray-400">Log in or create an account to continue your journey.</p>
      </div>

      <div class="flex justify-center mb-6">
        <button class="px-6 py-3 rounded-full text-lg font-semibold border border-purple-500 bg-purple-500 text-white dark:bg-purple-700 dark:border-purple-700 hover:bg-purple-600 dark:hover:bg-purple-800 transition-colors duration-300 shadow-md mr-4 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          Login
        </button>
        <button class="px-6 py-3 rounded-full text-lg font-semibold border border-pink-500 text-pink-700 dark:text-pink-300 hover:bg-pink-50 dark:hover:bg-pink-900 transition-colors duration-300 shadow-md focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          Register
        </button>
      </div>

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

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
          <input type="password" id="password" name="password" autocomplete="current-password" required
            class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:ring-pink-500 focus:border-pink-500 sm:text-base bg-white dark:bg-gray-700 dark:text-white transition-colors duration-300">
        </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-purple-600 dark:text-purple-400 border-gray-300 dark:border-gray-600 rounded focus:ring-purple-500 dark:focus:ring-purple-400">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
          </div>
          <div class="text-sm">
            <a href="#" class="font-medium text-pink-600 hover:text-pink-500 dark:text-pink-400 dark:hover:text-pink-300 transition-colors duration-300">Forgot your password?</a>
          </div>
        </div>

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

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

      <div class="mt-6 grid grid-cols-1 gap-4">
        <button type="button"
          class="w-full flex items-center justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-semibold bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-offset-gray-900 transition-colors duration-300">
          <svg class="h-6 w-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12.001 2.002c-5.522 0-10 4.477-10 10 0 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.886 8.438-9.879 0-5.522-4.477-10-10-10Z"/></svg>
          Sign in with Facebook
        </button>
        <button type="button"
          class="w-full flex items-center justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-semibold bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-offset-gray-900 transition-colors duration-300">
          <svg class="h-6 w-6 mr-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M22.54 12.083c0-.7-.06-1.39-.18-2.07H12v3.69h6.1C17.78 17.65 15.06 20 12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8c2.34 0 4.42.96 5.96 2.4l2.79-2.79C18.66 2.92 15.52 1 12 1 5.92 1 1 5.92 1 12s4.92 11 11 11c6.08 0 11-4.92 11-11v-.917z"/></svg>
          Sign in with Google
        </button>
      </div>
    </div>
  </div>
</div>

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

CRM/ビジネスツール用に設計されたレスポンシブで視覚的に魅力的な登録フォームコンポーネントで、トライアドの配色と微妙なマイクロインタラクションが特徴で、完全なダークモードがサポートされています。

開けるプレビュー

                <div class="min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 dark:from-slate-900 dark:via-gray-950 dark:to-zinc-950 p-4 sm:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-[1.01] dark:shadow-xl dark:shadow-blue-900/20">
    <div class="px-6 py-8 sm:px-8 sm:py-10">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2 text-center">
        Join Our Community
      </h2>
      <p class="text-center text-sm text-gray-600 dark:text-gray-400 mb-8">
        Create your account to unlock powerful CRM tools.
      </p>

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

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

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
          <input type="password" id="password" name="password" placeholder="At least 8 characters" required
            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-200 ease-in-out
                   bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500
                   hover:border-purple-400 dark:hover:border-purple-600 focus:shadow-md">
        </div>

        <div class="relative flex items-start">
          <div class="flex items-center h-5">
            <input id="terms" name="terms" type="checkbox" required
              class="focus:ring-blue-500 h-4 w-4 text-blue-600 dark:text-blue-500 border-gray-300 dark:border-gray-600 rounded transform transition-all duration-200 ease-in-out
                     dark:bg-gray-700 dark:checked:bg-blue-600 dark:checked:border-blue-600 opacity-90 hover:opacity-100
                     focus:scale-110">
          </div>
          <div class="ml-3 text-sm">
            <label for="terms" class="font-medium text-gray-700 dark:text-gray-300">
              I agree to the <a href="#" class="text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 font-semibold underline-offset-2 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-sm">Terms of Service</a> and <a href="#" class="text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 font-semibold underline-offset-2 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-sm">Privacy Policy</a>.
            </label>
          </div>
        </div>

        <div>
          <button type="submit"
            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-md text-lg font-semibold text-white
                   bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 
                   hover:from-purple-700 hover:via-pink-700 hover:to-blue-700 
                   focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800
                   transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95
                   relative overflow-hidden group">
            <span class="relative z-10">Register</span>
            <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
          </button>
        </div>
      </form>

      <div class="mt-8 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400">
          Already have an account?
          <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 ml-1 underline-offset-2 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-sm">
            Sign In
          </a>
        </p>
      </div>
    </div>
  </div>
</div>

Corporate_Professional_Forum_Modal

フォーラム/コミュニティプラットフォーム向けの複雑で応答性が高く、プロフェッショナルなモーダルコンポーネントで、類似のカラースキームとダークモードのサポートを備えています。

開けるプレビュー

                <div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 flex items-center justify-center p-4 z-50 overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full transform transition-all sm:my-8 sm:align-middle overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="px-4 py-3 sm:px-6 flex justify-between items-center bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-700">
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="modal-title">
        Create New Discussion Topic
      </h3>
      <button type="button" class="text-gray-400 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
        <span class="sr-only">Close panel</span>
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
    <div class="p-4 sm:p-6 space-y-4" id="modal-description">
      <div>
        <label for="topic-title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Topic Title</label>
        <div class="mt-1">
          <input type="text" name="topic-title" id="topic-title" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 rounded-md" placeholder="Enter a concise title" aria-required="true">
        </div>
      </div>

      <div>
        <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Category</label>
        <div class="mt-1">
          <select id="category" name="category" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md dark:bg-gray-900 dark:border-gray-600 dark:text-gray-100">
            <option>General Discussion</option>
            <option>Technical Support</option>
            <option>Feature Requests</option>
            <option>Announcements</option>
          </select>
        </div>
      </div>

      <div>
        <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
        <div class="mt-1">
          <textarea id="description" name="description" rows="5" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md dark:bg-gray-900 dark:border-gray-600 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Share details about your topic..."></textarea>
        </div>
      </div>

      <div class="flex items-center space-x-3">
        <div class="flex-shrink-0">
          <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        </div>
        <div class="min-w-0 flex-1">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Posting as John Doe</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Your post will be visible to all forum members.</p>
        </div>
      </div>

    </div>
    <div class="px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
      <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm dark:bg-blue-700 dark:hover:bg-blue-800">
        Create Topic
      </button>
      <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700">
        Cancel
      </button>
    </div>
  </div>
</div>

JobBoardナビゲーション

求人掲示板やキャリア開発プラットフォーム向けのシンプルで応答性の高いナビゲーションコンポーネントで、オーシャン/ブルーの色調、ホバー時のマイクロインタラクション、ダークモードのサポートが特徴です。

開けるプレビュー

                <nav class="bg-sky-500 shadow-lg dark:bg-sky-900 py-4">
  <div class="container mx-auto px-4 flex justify-between items-center">
    <a href="#" class="text-white text-2xl font-bold tracking-tight transform hover:scale-105 transition-transform duration-300 ease-in-out">
      JobFind
    </a>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="relative text-white font-medium hover:text-sky-100 dark:hover:text-sky-300 transition-colors duration-200 ease-in-out group">
        Find Jobs
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300 ease-in-out"></span>
      </a>
      <a href="#" class="relative text-white font-medium hover:text-sky-100 dark:hover:text-sky-300 transition-colors duration-200 ease-in-out group">
        Post a Job
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300 ease-in-out"></span>
      </a>
      <a href="#" class="relative text-white font-medium hover:text-sky-100 dark:hover:text-sky-300 transition-colors duration-200 ease-in-out group">
        Resume Builder
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300 ease-in-out"></span>
      </a>
      <a href="#" class="relative text-white font-medium hover:text-sky-100 dark:hover:text-sky-300 transition-colors duration-200 ease-in-out group">
        Career Advice
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300 ease-in-out"></span>
      </a>
    </div>
    <div class="md:hidden">
      <button aria-label="Toggle navigation" class="text-white focus:outline-none focus:ring-2 focus:ring-white rounded">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

1 ... 59 60 61 62 63 ... 335

検索コンポーネント

カテゴリ

すべてのコンポーネント