検索コンポーネント

すべてのコンポーネント

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

ブルータリストアクティビティフィード

ブルータリズムにインスパイアされたSaaSアプリケーション用のアクティビティフィードコンポーネントで、アースカラーの配色、ハイコントラスト、生のデザインの美学が特徴です。ダークモードのサポートによるレスポンシブ。

                <div class="p-4 sm:p-8 bg-stone-100 dark:bg-stone-900 min-h-screen font-mono text-stone-800 dark:text-stone-200">
  <div class="max-w-4xl mx-auto border-4 border-stone-900 dark:border-stone-100 p-4 sm:p-6 bg-stone-200 dark:bg-stone-800 shadow-[8px_8px_0_0_#444] dark:shadow-[8px_8px_0_0_#999]">
    <h2 class="text-3xl sm:text-4xl font-bold mb-6 text-stone-900 dark:text-stone-100 uppercase tracking-widest border-b-4 border-stone-900 dark:border-stone-100 pb-2">
      Activity Log
    </h2>

    <div class="space-y-6">

      <!-- Activity Item 1: New Project -->
      <div class="border-2 border-stone-700 dark:border-stone-300 p-4 bg-stone-300 dark:bg-stone-700 relative overflow-hidden group">
        <div class="absolute top-0 left-0 w-full h-full bg-stone-400 dark:bg-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full border-2 border-stone-900 dark:border-stone-100 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1">
              <span class="uppercase font-extrabold">Alex Johnson</span> created a new project
              <a href="#" class="text-green-800 dark:text-green-300 underline font-extrabold hover:text-green-600 dark:hover:text-green-500 transition-colors duration-200">'Quantum Leap Initiative'</a>
            </p>
            <p class="text-sm text-stone-700 dark:text-stone-300 uppercase">2 hours ago &bull; Project Management</p>
            <div class="mt-3 p-2 border-2 border-stone-600 dark:border-stone-400 bg-stone-400 dark:bg-stone-600 text-stone-900 dark:text-stone-100 text-sm italic">
              <p>"We're aiming to revolutionize data processing. This is a big one!"</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Activity Item 2: Task Update -->
      <div class="border-2 border-stone-700 dark:border-stone-300 p-4 bg-stone-300 dark:bg-stone-700 relative overflow-hidden group">
        <div class="absolute top-0 left-0 w-full h-full bg-stone-400 dark:bg-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full border-2 border-stone-900 dark:border-stone-100 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1">
              <span class="uppercase font-extrabold">Dr. Lena Petrova</span> updated task
              <span class="text-blue-800 dark:text-blue-300 font-extrabold">'Implement Auth Module'</span> in
              <a href="#" class="text-green-800 dark:text-green-300 underline font-extrabold hover:text-green-600 dark:hover:text-green-500 transition-colors duration-200">'Secure Core System'</a>
            </p>
            <p class="text-sm text-stone-700 dark:text-stone-300 uppercase">5 hours ago &bull; Development</p>
            <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm">
              <div class="p-2 border-2 border-yellow-800 dark:border-yellow-300 bg-yellow-300 dark:bg-yellow-800 text-yellow-900 dark:text-yellow-100 font-bold">
                Status: <span class="underline">In Progress</span>
              </div>
              <div class="p-2 border-2 border-orange-800 dark:border-orange-300 bg-orange-300 dark:bg-orange-800 text-orange-900 dark:text-orange-100 font-bold">
                Progress: <span class="underline">65% Complete</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Activity Item 3: File Upload -->
      <div class="border-2 border-stone-700 dark:border-stone-300 p-4 bg-stone-300 dark:bg-stone-700 relative overflow-hidden group">
        <div class="absolute top-0 left-0 w-full h-full bg-stone-400 dark:bg-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full border-2 border-stone-900 dark:border-stone-100 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1">
              <span class="uppercase font-extrabold">Carlos Rivera</span> uploaded 3 files to
              <a href="#" class="text-green-800 dark:text-green-300 underline font-extrabold hover:text-green-600 dark:hover:text-green-500 transition-colors duration-200">'Marketing Assets 2023'</a>
            </p>
            <p class="text-sm text-stone-700 dark:text-stone-300 uppercase">1 day ago &bull; Design</p>
            <div class="mt-3 grid grid-cols-1 sm:grid-cols-3 gap-2">
              <img src="https://picsum.photos/id/1025/300/200" alt="Uploaded Image 1" class="w-full h-auto object-cover border-2 border-stone-600 dark:border-stone-400 shadow-md transform hover:scale-105 transition-transform duration-200">
              <img src="https://picsum.photos/id/1004/300/200" alt="Uploaded Image 2" class="w-full h-auto object-cover border-2 border-stone-600 dark:border-stone-400 shadow-md transform hover:scale-105 transition-transform duration-200">
              <img src="https://picsum.photos/id/1008/300/200" alt="Uploaded Image 3" class="w-full h-auto object-cover border-2 border-stone-600 dark:border-stone-400 shadow-md transform hover:scale-105 transition-transform duration-200">
            </div>
          </div>
        </div>
      </div>

      <!-- Activity Item 4: Comment -->
      <div class="border-2 border-stone-700 dark:border-stone-300 p-4 bg-stone-300 dark:bg-stone-700 relative overflow-hidden group">
        <div class="absolute top-0 left-0 w-full h-full bg-stone-400 dark:bg-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full border-2 border-stone-900 dark:border-stone-100 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1">
              <span class="uppercase font-extrabold">Sarah Chen</span> commented on task
              <span class="text-blue-800 dark:text-blue-300 font-extrabold">'Data Migration Strategy'</span> in
              <a href="#" class="text-green-800 dark:text-green-300 underline font-extrabold hover:text-green-600 dark:hover:text-green-500 transition-colors duration-200">'Legacy System Upgrade'</a>
            </p>
            <p class="text-sm text-stone-700 dark:text-stone-300 uppercase">2 days ago &bull; Operations</p>
            <div class="mt-3 p-2 border-2 border-stone-600 dark:border-stone-400 bg-stone-400 dark:bg-stone-600 text-stone-900 dark:text-stone-100 text-sm italic font-semibold">
              <p>"Have we considered the implications of the new GDPR policies on this migration phase? It's critical."</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Activity Item 5: User Joined -->
      <div class="border-2 border-stone-700 dark:border-stone-300 p-4 bg-stone-300 dark:bg-stone-700 relative overflow-hidden group">
        <div class="absolute top-0 left-0 w-full h-full bg-stone-400 dark:bg-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="flex items-start">
          <img class="w-10 h-10 rounded-full border-2 border-stone-900 dark:border-stone-100 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
          <div class="flex-grow">
            <p class="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1">
              <span class="uppercase font-extrabold">David Kim</span> joined the team
              <span class="text-purple-800 dark:text-purple-300 font-extrabold">'Backend Engineers'</span>
            </p>
            <p class="text-sm text-stone-700 dark:text-stone-300 uppercase">3 days ago &bull; HR System</p>
            <div class="mt-3 flex items-center justify-between p-2 border-2 border-stone-600 dark:border-stone-400 bg-stone-400 dark:bg-stone-600 text-stone-900 dark:text-stone-100 text-sm ">
              <span class="text-md font-bold"><span class="text-orange-900 dark:text-orange-100">Welcome, David!</span></span>
              <img src="https://picsum.photos/id/1084/80/80" alt="Abstract Icon" class="w-12 h-12 border-2 border-stone-700 dark:border-stone-300 hidden sm:block">
            </div>
          </div>
        </div>
      </div>

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

オーガニックネイチャースポーツショッピングカートコンポーネント

オーガニック/自然にインスパイアされたデザイン、トライアドカラースキーム、スポーツやフィットネスのアプリケーションに適した、ダークモードをサポートするシンプルでレスポンシブなショッピングカートコンポーネント。

開けるプレビュー

                <div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gradient-to-br from-emerald-50 dark:from-gray-900 to-teal-50 dark:to-gray-800 p-4 sm:p-6 lg:p-8 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden animate-fade-in-up transition-all duration-500 ease-in-out transform hover:scale-[1.01]">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-rose-100 dark:border-rose-900 mx-4 sm:mx-6 lg:mx-8">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-2 text-emerald-700 dark:text-emerald-300 text-center leading-tight tracking-tight drop-shadow-sm">Your Cart</h2>
      <p class="text-lg text-center text-gray-600 dark:text-gray-400 font-light">Ready to embark on your fitness journey?</p>
    </div>

    <div class="p-6 sm:p-8 lg:p-10 space-y-6">

      <!-- Cart Item 1 -->
      <div class="flex items-start md:items-center space-x-4 bg-gradient-to-r from-emerald-50 via-teal-50 to-rose-50 dark:from-gray-700 dark:via-gray-750 dark:to-gray-800 p-4 rounded-2xl shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:ring-2 hover:ring-rose-300 dark:hover:ring-rose-600">
        <img src="https://picsum.photos/seed/sports-shoe/100/100" alt="Running Shoe" class="w-24 h-24 sm:w-28 sm:h-28 object-cover rounded-xl shadow-inner border border-emerald-200 dark:border-emerald-600 flex-shrink-0">
        <div class="flex-1 min-w-0">
          <h3 class="text-lg sm:text-xl font-semibold text-emerald-800 dark:text-emerald-200 mb-1 leading-snug">Elite Running Shoes</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-2 truncate">Unleash your speed with ultimate comfort and support.</p>
          <div class="flex items-center justify-between mt-2 flex-wrap">
            <p class="text-md font-bold text-rose-600 dark:text-rose-400">$129.99</p>
            <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
              <button class="p-1 rounded-full bg-rose-200 dark:bg-rose-700 text-rose-800 dark:text-rose-200 hover:bg-rose-300 dark:hover:bg-rose-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-rose-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z" clip-rule="evenodd" /></svg></button>
              <span class="font-medium text-lg">1</span>
              <button class="p-1 rounded-full bg-emerald-200 dark:bg-emerald-700 text-emerald-800 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" /></svg></button>
            </div>
          </div>
        </div>
      </div>

      <!-- Cart Item 2 -->
      <div class="flex items-start md:items-center space-x-4 bg-gradient-to-r from-emerald-50 via-teal-50 to-rose-50 dark:from-gray-700 dark:via-gray-750 dark:to-gray-800 p-4 rounded-2xl shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:ring-2 hover:ring-rose-300 dark:hover:ring-rose-600">
        <img src="https://picsum.photos/seed/yoga-mat/100/100" alt="Yoga Mat" class="w-24 h-24 sm:w-28 sm:h-28 object-cover rounded-xl shadow-inner border border-emerald-200 dark:border-emerald-600 flex-shrink-0">
        <div class="flex-1 min-w-0">
          <h3 class="text-lg sm:text-xl font-semibold text-emerald-800 dark:text-emerald-200 mb-1 leading-snug">Eco-Friendly Yoga Mat</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-2 truncate">Connect with nature and your inner self.</p>
          <div class="flex items-center justify-between mt-2 flex-wrap">
            <p class="text-md font-bold text-rose-600 dark:text-rose-400">$49.99</p>
            <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
              <button class="p-1 rounded-full bg-rose-200 dark:bg-rose-700 text-rose-800 dark:text-rose-200 hover:bg-rose-300 dark:hover:bg-rose-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-rose-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z" clip-rule="evenodd" /></svg></button>
              <span class="font-medium text-lg">1</span>
              <button class="p-1 rounded-full bg-emerald-200 dark:bg-emerald-700 text-emerald-800 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" /></svg></button>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="p-6 sm:p-8 lg:p-10 border-t border-rose-100 dark:border-rose-900 mx-4 sm:mx-6 lg:mx-8">
      <div class="flex justify-between items-center text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">
        <span>Total:</span>
        <span class="text-rose-700 dark:text-rose-300">$179.98</span>
      </div>
      <button class="w-full py-4 rounded-xl text-xl font-semibold text-white bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:shadow-lg animate-bounce-once">Proceed to Checkout</button>
    </div>
  </div>
</div>

<style>
  @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;
  }

  @keyframes bounce-once {
    0%, 100% {
      transform: translateY(0);
    }
    20%, 50%, 80% {
      transform: translateY(-5px);
    }
    40%, 60% {
      transform: translateY(0);
    }
  }
  .animate-bounce-once:hover {
    animation: bounce-once 0.8s ease-in-out;
  }
</style>

登録フォームコンポーネント - 音楽/オーディオをテーマに

スイス/インターナショナルのタイポグラフィスタイルと秋の配色を備えた、音楽/オーディオプラットフォーム向けに設計された、すっきりとしたミニマリストの登録フォームコンポーネント。完全にレスポンシブで、ダークモードをサポートし、セマンティックHTMLを使用します。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-orange-100 to-amber-200 dark:from-stone-900 dark:to-orange-950 font-sans">
  <div class="max-w-md w-full bg-white dark:bg-stone-800 rounded-lg shadow-xl p-8 space-y-6 transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
    <div class="text-center">
      <h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-stone-800 dark:text-orange-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">
        <span class="block">Tune In</span>
        <span class="block text-xl sm:text-2xl text-orange-500 dark:text-orange-400">Create Your Account</span>
      </h2>
      <p class="text-sm text-stone-600 dark:text-stone-400">
        Unlock a world of music and podcasts.
      </p>
    </div>

    <form class="space-y-5">
      <div>
        <label for="email" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">Email address</label>
        <input type="email" id="email" name="email" autocomplete="email" required
               class="appearance-none block w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500
                      focus:outline-none focus:ring-orange-500 focus:border-orange-500 dark:bg-stone-700 dark:text-stone-100 dark:focus:ring-orange-400 dark:focus:border-orange-400
                      sm:text-sm transition-all duration-200">
      </div>

      <div>
        <label for="username" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">Username</label>
        <input type="text" id="username" name="username" autocomplete="username" required
               class="appearance-none block w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500
                      focus:outline-none focus:ring-orange-500 focus:border-orange-500 dark:bg-stone-700 dark:text-stone-100 dark:focus:ring-orange-400 dark:focus:border-orange-400
                      sm:text-sm transition-all duration-200">
      </div>

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

      <div>
        <label for="confirm-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">Confirm Password</label>
        <input type="password" id="confirm-password" name="confirm-password" autocomplete="new-password" required
               class="appearance-none block w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500
                      focus:outline-none focus:ring-orange-500 focus:border-orange-500 dark:bg-stone-700 dark:text-stone-100 dark:focus:ring-orange-400 dark:focus:border-orange-400
                      sm:text-sm transition-all duration-200">
      </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-orange-600 border-stone-300 rounded dark:text-orange-500 dark:bg-stone-700 dark:border-stone-600 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200">
          <label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-200">Remember me</label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-orange-600 hover:text-orange-500 dark:text-orange-400 dark:hover:text-orange-300 transition-colors duration-200">
            Terms & Privacy
          </a>
        </div>
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-base font-medium text-white
                       bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500
                       dark:bg-orange-700 dark:hover:bg-orange-600 dark:focus:ring-offset-stone-800 dark:focus:ring-orange-400
                       transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
          Sign Up
        </button>
      </div>
    </form>

    <div class="text-center text-sm text-stone-600 dark:text-stone-400">
      Already have an account?
      <a href="#" class="font-medium text-orange-600 hover:text-orange-500 dark:text-orange-400 dark:hover:text-orange-300 transition-colors duration-200">
        Sign In
      </a>
    </div>
  </div>
</div>

コメントセクションコンポーネント

バウハウスにインスパイアされた黒と白の配色と明るいアクセントカラーを備えた予約/予約システム用に設計された、複雑で応答性の高いコメントセクションコンポーネント。ユーザーのアバター、星評価、タイムスタンプ、ダークモードのサポートが含まれます。

開けるプレビュー

                <div class="font-sans bg-gray-50 dark:bg-gray-900 min-h-screen py-8 sm:py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-start sm:items-center justify-between">
      <div>
        <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-gray-900 dark:text-white mb-2">Client Reviews</h2>
        <p class="text-base sm:text-lg text-gray-600 dark:text-gray-300">What our clients say about their experience.</p>
      </div>
      <div class="flex items-center mt-4 sm:mt-0">
        <span class="text-4xl font-bold text-gray-900 dark:text-white mr-2">4.7</span>
        <div class="flex flex-col">
          <div class="flex text-yellow-400">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          </div>
          <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Based on 1,234 reviews</p>
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 space-y-8">

      <!-- Comment 1 -->
      <div class="flex items-start">
        <img class="w-12 h-12 rounded-full object-cover mr-4 ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/women/42.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex justify-between items-center mb-2">
            <p class="font-semibold text-gray-900 dark:text-white">Sarah L.</p>
            <div class="flex items-center text-yellow-400">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 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"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 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"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 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"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 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"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-2">“The service was prompt and professional. I was able to book my appointment in minutes, and the staff was incredibly helpful. Highly recommend!”</p>
          <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
            <span>Booked: Sept 14, 2023</span>
            <span>2 days ago</span>
          </div>
        </div>
      </div>

      <!-- Comment 2 -->
      <div class="flex items-start border-t border-gray-100 dark:border-gray-700 pt-8">
        <img class="w-12 h-12 rounded-full object-cover mr-4 ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex justify-between items-center mb-2">
            <p class="font-semibold text-gray-900 dark:text-white">Michael B.</p>
            <div class="flex items-center text-yellow-400">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 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"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 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"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 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"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 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 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-2">“Easy to navigate and straightforward booking process. Had a slight issue with rescheduling but customer support handled it quickly.”</p>
          <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
            <span>Booked: Aug 28, 2023</span>
            <span>3 weeks ago</span>
          </div>
        </div>
      </div>

      <!-- Comment 3 -->
      <div class="flex items-start border-t border-gray-100 dark:border-gray-700 pt-8">
        <img class="w-12 h-12 rounded-full object-cover mr-4 ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/men/77.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex justify-between items-center mb-2">
            <p class="font-semibold text-gray-900 dark:text-white">David P.</p>
            <div class="flex items-center text-yellow-400">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 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"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 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"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 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"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 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"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-2">“Excellent experience from start to finish. The booking flow was seamless and notifications were very helpful. Highly satisfied!”</p>
          <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
            <span>Booked: Sept 01, 2023</span>
            <span>1 week ago</span>
          </div>
        </div>
      </div>

      <!-- Comment 4 -->
      <div class="flex items-start border-t border-gray-100 dark:border-gray-700 pt-8">
        <img class="w-12 h-12 rounded-full object-cover mr-4 ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex justify-between items-center mb-2">
            <p class="font-semibold text-gray-900 dark:text-white">Emily R.</p>
            <div class="flex items-center text-yellow-400">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 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"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 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"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 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"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 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 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><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.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-2">“Smooth process from start to finish. The app is intuitive and the booking was confirmed instantly. Will definitely use again.”</p>
          <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
            <span>Booked: Aug 20, 2023</span>
            <span>1 month ago</span>
          </div>
        </div>
      </div>

    </div>

    <div class="p-6 sm:p-8 bg-gray-100 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-center justify-between">
      <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 sm:mb-0">Want to add your own review?</p>
      <button type="button" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
        Write a Review
        <svg class="ml-2 -mr-1 w-5 h-5" 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>
      </button>
    </div>
  </div>
</div>

Cyberpunk_Fashion_Data_Table

サイバーパンクの美学、落ち着いた配色、ネオンのアクセントを備えたレスポンシブデータテーブルで、ファッションや美容製品のリスティングに適しており、ダークモードのサポートとインタラクティブなホバー効果が特徴です。

開けるプレビュー

                <div class="font-['Electrolize'] bg-gray-950 text-gray-300 min-h-screen p-4 sm:p-8 dark:bg-gray-950 dark:text-gray-300">
  <div class="container mx-auto max-w-7xl relative">
    <!-- Neon Border Effect -->
    <div class="absolute inset-0 bg-gradient-to-br from-purple-600 via-pink-600 to-red-500 opacity-20 filter blur-xl rounded-xl animate-pulse-slow"></div>

    <div class="relative bg-gray-900 rounded-xl shadow-lg border border-purple-800 dark:bg-gray-800 dark:border-purple-900 overflow-hidden">
      <div class="p-4 sm:p-6 bg-gray-800 border-b border-purple-700 dark:bg-gray-700 dark:border-purple-800 flex flex-col sm:flex-row justify-between items-center">
        <h2 class="text-2xl sm:text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-neon-purple to-neon-pink mb-4 sm:mb-0">Product Catalog // <span class="text-purple-400 font-normal text-xl sm:text-2xl">[LIVE]</span></h2>
        <div class="flex space-x-2">
          <button class="px-4 py-2 bg-purple-700 text-white rounded-md text-sm sm:text-base hover:bg-purple-600 transition duration-300 transform hover:scale-105 border border-purple-500 shadow-md shadow-purple-900/50">+</button>
          <button class="px-4 py-2 bg-pink-700 text-white rounded-md text-sm sm:text-base hover:bg-pink-600 transition duration-300 transform hover:scale-105 border border-pink-500 shadow-md shadow-pink-900/50">~</button>
          <button class="px-4 py-2 bg-red-700 text-white rounded-md text-sm sm:text-base hover:bg-red-600 transition duration-300 transform hover:scale-105 border border-red-500 shadow-md shadow-red-900/50">x</button>
        </div>
      </div>

      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-purple-800 dark:divide-purple-900">
          <thead class="bg-gray-850 dark:bg-gray-750">
            <tr>
              <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-purple-400 dark:text-purple-500 border-b border-purple-700">
                <input type="checkbox" class="form-checkbox h-4 w-4 text-neon-pink border-purple-600 rounded-sm focus:ring-neon-pink bg-gray-700">
              </th>
              <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-pink-400 dark:text-pink-500 border-b border-purple-700">
                Product ID
              </th>
              <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-neon-purple dark:text-neon-purple border-b border-purple-700">
                Image
              </th>
              <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-neon-pink dark:text-neon-pink border-b border-purple-700">
                Name
              </th>
              <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-neon-purple dark:text-neon-purple border-b border-purple-700">
                Category
              </th>
              <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-neon-pink dark:text-neon-pink border-b border-purple-700">
                Price
              </th>
              <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-neon-purple dark:text-neon-purple border-b border-purple-700">
                Status
              </th>
              <th scope="col" class="relative px-4 py-3 sm:px-6 sm:py-4 border-b border-purple-700">
                <span class="sr-only">Actions</span>
              </th>
            </tr>
          </thead>
          <tbody class="divide-y divide-purple-900 bg-gray-900 dark:bg-gray-800">
            <!-- Row 1 -->
            <tr class="hover:bg-purple-900/30 transition duration-200">
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
                <input type="checkbox" class="form-checkbox h-4 w-4 text-neon-pink border-purple-600 rounded-sm focus:ring-neon-pink bg-gray-700">
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-400 font-mono">#2C4B7E</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap">
                <div class="flex-shrink-0 w-12 h-12 overflow-hidden rounded-md border border-purple-700">
                  <img class="w-full h-full object-cover" src="https://picsum.photos/id/1018/60/60" alt="Product Image">
                </div>
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm font-medium text-pink-300 transition-colors duration-200 hover:text-pink-400">Cybernetic Visor 3.0</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-purple-300">Accessories</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-green-400 font-bold">$120.99</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300 border border-green-700">In Stock</span>
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-right text-sm font-medium">
                <a href="#" class="text-neon-pink hover:text-neon-purple mr-2 transition duration-200 font-bold">Edit</a>
                <a href="#" class="text-red-500 hover:text-red-400 transition duration-200 font-bold">Delete</a>
              </td>
            </tr>
            <!-- Row 2 -->
            <tr class="hover:bg-purple-900/30 transition duration-200">
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
                <input type="checkbox" class="form-checkbox h-4 w-4 text-neon-pink border-purple-600 rounded-sm focus:ring-neon-pink bg-gray-700">
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-400 font-mono">#1E9F6A</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap">
                <div class="flex-shrink-0 w-12 h-12 overflow-hidden rounded-md border border-purple-700">
                  <img class="w-full h-full object-cover" src="https://picsum.photos/id/1020/60/60" alt="Product Image">
                </div>
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm font-medium text-pink-300 transition-colors duration-200 hover:text-pink-400">Chromium Jacket</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-purple-300">Apparel</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-green-400 font-bold">$349.00</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300 border border-green-700">In Stock</span>
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-right text-sm font-medium">
                <a href="#" class="text-neon-pink hover:text-neon-purple mr-2 transition duration-200 font-bold">Edit</a>
                <a href="#" class="text-red-500 hover:text-red-400 transition duration-200 font-bold">Delete</a>
              </td>
            </tr>
            <!-- Row 3 -->
            <tr class="hover:bg-purple-900/30 transition duration-200">
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
                <input type="checkbox" class="form-checkbox h-4 w-4 text-neon-pink border-purple-600 rounded-sm focus:ring-neon-pink bg-gray-700">
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-400 font-mono">#5D3C8F</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap">
                <div class="flex-shrink-0 w-12 h-12 overflow-hidden rounded-md border border-purple-700">
                  <img class="w-full h-full object-cover" src="https://picsum.photos/id/1025/60/60" alt="Product Image">
                </div>
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm font-medium text-pink-300 transition-colors duration-200 hover:text-pink-400">Quantum Beauty Serum</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-purple-300">Beauty</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-yellow-400 font-bold">$85.50</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-900 text-yellow-300 border border-yellow-700">Low Stock</span>
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-right text-sm font-medium">
                <a href="#" class="text-neon-pink hover:text-neon-purple mr-2 transition duration-200 font-bold">Edit</a>
                <a href="#" class="text-red-500 hover:text-red-400 transition duration-200 font-bold">Delete</a>
              </td>
            </tr>
            <!-- Row 4 -->
            <tr class="hover:bg-purple-900/30 transition duration-200">
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
                <input type="checkbox" class="form-checkbox h-4 w-4 text-neon-pink border-purple-600 rounded-sm focus:ring-neon-pink bg-gray-700">
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-400 font-mono">#7F1A0B</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap">
                <div class="flex-shrink-0 w-12 h-12 overflow-hidden rounded-md border border-purple-700">
                  <img class="w-full h-full object-cover" src="https://picsum.photos/id/1027/60/60" alt="Product Image">
                </div>
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm font-medium text-pink-300 transition-colors duration-200 hover:text-pink-400">Neo-Tokyo Boots</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-purple-300">Footwear</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-green-400 font-bold">$210.00</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-900 text-red-300 border border-red-700">Discontinued</span>
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-right text-sm font-medium">
                <a href="#" class="text-neon-pink hover:text-neon-purple mr-2 transition duration-200 font-bold">Edit</a>
                <a href="#" class="text-red-500 hover:text-red-400 transition duration-200 font-bold">Delete</a>
              </td>
            </tr>
            <!-- Row 5 -->
            <tr class="hover:bg-purple-900/30 transition duration-200">
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
                <input type="checkbox" class="form-checkbox h-4 w-4 text-neon-pink border-purple-600 rounded-sm focus:ring-neon-pink bg-gray-700">
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-400 font-mono">#A32B9C</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap">
                <div class="flex-shrink-0 w-12 h-12 overflow-hidden rounded-md border border-purple-700">
                  <img class="w-full h-full object-cover" src="https://picsum.photos/id/1035/60/60" alt="Product Image">
                </div>
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm font-medium text-pink-300 transition-colors duration-200 hover:text-pink-400">Aura Glo Lip gloss</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-purple-300">Cosmetics</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-green-400 font-bold">$29.99</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300 border border-green-700">In Stock</span>
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-right text-sm font-medium">
                <a href="#" class="text-neon-pink hover:text-neon-purple mr-2 transition duration-200 font-bold">Edit</a>
                <a href="#" class="text-red-500 hover:text-red-400 transition duration-200 font-bold">Delete</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="p-4 sm:p-6 bg-gray-800 border-t border-purple-700 dark:bg-gray-700 dark:border-purple-800 flex justify-between items-center text-sm">
        <div class="text-gray-400">Showing 1 to 5 of 120 Products</div>
        <div class="flex space-x-1">
          <button class="px-3 py-1 bg-gray-700 text-gray-400 rounded-md hover:bg-purple-800 hover:text-white transition duration-200">
            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="px-3 py-1 bg-purple-700 text-white rounded-md hover:bg-purple-600 transition duration-200">1</button>
          <button class="px-3 py-1 bg-gray-700 text-gray-400 rounded-md hover:bg-purple-800 hover:text-white transition duration-200">2</button>
          <button class="px-3 py-1 bg-gray-700 text-gray-400 rounded-md hover:bg-purple-800 hover:text-white transition duration-200">3</button>
          <button class="px-3 py-1 bg-gray-700 text-gray-400 rounded-md hover:bg-purple-800 hover:text-white transition duration-200">
            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom font import for Electrolize */
  @import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');

  /* Custom properties for neon colors */
  .text-neon-pink {
    color: #FF69B4; /* Hot Pink */
  }
  .dark .text-neon-pink {
    color: #FF5DAA; /* Slightly brighter for dark mode */
  }

  .text-neon-purple {
    color: #BF00FF; /* Electric Purple */
  }
  .dark .text-neon-purple {
    color: #D400FF; /* Slightly brighter for dark mode */
  }

  .bg-gradient-to-r.from-neon-purple.to-neon-pink {
    background-image: linear-gradient(to right, #BF00FF, #FF69B4);
  }

  /* Animation for the background blur effect */
  @keyframes pulse-slow {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.02); }
  }

  .animate-pulse-slow {
    animation: pulse-slow 6s infinite ease-in-out;
  }

  /* Tailwind checkbox custom styles */
  input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: #FF69B4; /* Default neon pink */
    background-color: #4B5563; /* Gray-700 for background */
    border: 1px solid #7C3AED; /* Purple-600 */
    border-radius: 0.125rem; /* Rounded-sm */
    transition: background-color 0.2s, border-color 0.2s;
  }

  input[type="checkbox"]:checked {
    background-color: currentColor; /* Use the color set by text-neon-pink */
    border-color: currentColor;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--tw-ring-offset-color, transparent), 0 0 0 4px #FF69B4;
    border-color: #FF69B4;
  }

  .dark input[type="checkbox"] {
    background-color: #374151; /* Darker gray for dark mode */
    border-color: #9333ea; /* Darker purple for dark mode */
  }

  .dark input[type="checkbox"]:focus {
    box-shadow: 0 0 0 2px var(--tw-ring-offset-color, transparent), 0 0 0 4px #FF5DAA;
    border-color: #FF5DAA;
  }

</style>

Skeuomorphic Analogous Job Card コンポーネント

類似の配色を使用したスキューモーフィックなデザインスタイルのレスポンシブジョブカードコンポーネントで、求人掲示板やキャリア開発プラットフォームに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="p-4 sm:p-8 bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 dark:from-gray-800 dark:via-gray-900 dark:to-black min-h-screen flex items-center justify-center font-sans">

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full max-w-7xl">

    <!-- Job Card 1 -->
    <div class="relative rounded-xl shadow-2xl overflow-hidden
                bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-700 dark:to-gray-800
                transform transition-all duration-300 hover:scale-105 hover:shadow-3xl
                border-t border-l border-indigo-200 dark:border-gray-600
                before:absolute before:inset-0 before:rounded-xl before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.7),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]
                dark:before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.05),inset_-2px_-2px_4px_rgba(0,0,0,0.4)]">

      <div class="relative p-6 space-y-4">
        <!-- Top Section - Company Logo & Title -->
        <div class="flex items-center space-x-4">
          <img class="w-16 h-16 rounded-full object-cover shadow-md border-2 border-indigo-300 dark:border-gray-500" src="https://picsum.photos/id/68/100/100" alt="Company Logo">
          <div>
            <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Senior UX Designer</h3>
            <p class="text-md text-purple-700 dark:text-purple-400">Acme Inc.</p>
          </div>
        </div>

        <!-- Job Details -->
        <div class="space-y-2 text-indigo-700 dark:text-indigo-200">
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636m11.314 11.314L12.757 13.973a1.998 1.998 0 00-2.828 0L5.636 12.586A".fill-rule="evenodd" clip-rule="evenodd"></path><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.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636"></path></svg>
            Remote
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2-3-.895-3-2 1.343-2 3-2zM12 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><circle cx="12" cy="12" r="10"></circle></svg>
            Full-time
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Posted 2 days ago
          </p>
        </div>

        <!-- Salary Range -->
        <p class="text-lg font-semibold text-pink-700 dark:text-pink-300">$90,000 - $120,000 / year</p>

        <!-- Tags -->
        <div class="flex flex-wrap gap-2">
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">UX Design</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">Figma</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">Research</span>
        </div>

        <!-- Apply Button -->
        <button class="w-full py-3 rounded-lg text-lg font-bold
                       bg-gradient-to-br from-indigo-500 to-purple-600 text-white
                       shadow-lg shadow-indigo-400/50 dark:shadow-purple-700/50
                       transform transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98]
                       border-b-2 border-r-2 border-indigo-700 dark:border-purple-800
                       before:absolute before:inset-0 before:rounded-lg before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.4),inset_-1px_-1px_2px_rgba(0,0,0,0.2)]
                       dark:before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.1),inset_-1px_-1px_2px_rgba(0,0,0,0.4)]
                       relative overflow-hidden group">
          <span class="relative z-10">Apply Now</span>
          <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
        </button>
      </div>
    </div>

    <!-- Job Card 2 -->
    <div class="relative rounded-xl shadow-2xl overflow-hidden
                bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-700 dark:to-gray-800
                transform transition-all duration-300 hover:scale-105 hover:shadow-3xl
                border-t border-l border-indigo-200 dark:border-gray-600
                before:absolute before:inset-0 before:rounded-xl before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.7),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]
                dark:before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.05),inset_-2px_-2px_4px_rgba(0,0,0,0.4)]">

      <div class="relative p-6 space-y-4">
        <!-- Top Section - Company Logo & Title -->
        <div class="flex items-center space-x-4">
          <img class="w-16 h-16 rounded-full object-cover shadow-md border-2 border-indigo-300 dark:border-gray-500" src="https://picsum.photos/id/88/100/100" alt="Company Logo">
          <div>
            <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Marketing Manager</h3>
            <p class="text-md text-purple-700 dark:text-purple-400">Global Solutions</p>
          </div>
        </div>

        <!-- Job Details -->
        <div class="space-y-2 text-indigo-700 dark:text-indigo-200">
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636"></path></svg>
            Hybrid (NYC)
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2-3-.895-3-2 1.343-2 3-2zM12 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><circle cx="12" cy="12" r="10"></circle></svg>
            Full-time
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Posted 5 days ago
          </p>
        </div>

        <!-- Salary Range -->
        <p class="text-lg font-semibold text-pink-700 dark:text-pink-300">$75,000 - $100,000 / year</p>

        <!-- Tags -->
        <div class="flex flex-wrap gap-2">
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">Digital Marketing</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">SEO</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">Content</span>
        </div>

        <!-- Apply Button -->
        <button class="w-full py-3 rounded-lg text-lg font-bold
                       bg-gradient-to-br from-indigo-500 to-purple-600 text-white
                       shadow-lg shadow-indigo-400/50 dark:shadow-purple-700/50
                       transform transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98]
                       border-b-2 border-r-2 border-indigo-700 dark:border-purple-800
                       before:absolute before:inset-0 before:rounded-lg before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.4),inset_-1px_-1px_2px_rgba(0,0,0,0.2)]
                       dark:before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.1),inset_-1px_-1px_2px_rgba(0,0,0,0.4)]
                       relative overflow-hidden group">
          <span class="relative z-10">Apply Now</span>
          <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
        </button>
      </div>
    </div>

    <!-- Job Card 3 -->
    <div class="relative rounded-xl shadow-2xl overflow-hidden
                bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-700 dark:to-gray-800
                transform transition-all duration-300 hover:scale-105 hover:shadow-3xl
                border-t border-l border-indigo-200 dark:border-gray-600
                before:absolute before:inset-0 before:rounded-xl before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.7),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]
                dark:before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.05),inset_-2px_-2px_4px_rgba(0,0,0,0.4)]">

      <div class="relative p-6 space-y-4">
        <!-- Top Section - Company Logo & Title -->
        <div class="flex items-center space-x-4">
          <img class="w-16 h-16 rounded-full object-cover shadow-md border-2 border-indigo-300 dark:border-gray-500" src="https://picsum.photos/id/98/100/100" alt="Company Logo">
          <div>
            <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Frontend Developer</h3>
            <p class="text-md text-purple-700 dark:text-purple-400">Tech Innovators</p>
          </div>
        </div>

        <!-- Job Details -->
        <div class="space-y-2 text-indigo-700 dark:text-indigo-200">
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636"></path></svg>
            On-site (London)
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2-3-.895-3-2 1.343-2 3-2zM12 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><circle cx="12" cy="12" r="10"></circle></svg>
            Full-time
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Posted 1 week ago
          </p>
        </div>

        <!-- Salary Range -->
        <p class="text-lg font-semibold text-pink-700 dark:text-pink-300">$80,000 - $110,000 / year</p>

        <!-- Tags -->
        <div class="flex flex-wrap gap-2">
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">React</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">Tailwind CSS</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">JavaScript</span>
        </div>

        <!-- Apply Button -->
        <button class="w-full py-3 rounded-lg text-lg font-bold
                       bg-gradient-to-br from-indigo-500 to-purple-600 text-white
                       shadow-lg shadow-indigo-400/50 dark:shadow-purple-700/50
                       transform transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98]
                       border-b-2 border-r-2 border-indigo-700 dark:border-purple-800
                       before:absolute before:inset-0 before:rounded-lg before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.4),inset_-1px_-1px_2px_rgba(0,0,0,0.2)]
                       dark:before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.1),inset_-1px_-1px_2px_rgba(0,0,0,0.4)]
                       relative overflow-hidden group">
          <span class="relative z-10">Apply Now</span>
          <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
        </button>
      </div>
    </div>

  </div>
</div>

エラーメッセージコンポーネント

アーストーンのグラデーション、スムーズな移行、ダークモードのサポートを備えたレスポンシブエラーメッセージコンポーネントで、コンサルティング/サービスWebサイトに適しています。

開けるプレビュー

                <div class="min-h-screen bg-gradient-to-br from-stone-100 via-yellow-50 to-amber-100 dark:from-stone-900 dark:via-gray-950 dark:to-neutral-900 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="max-w-md w-full mx-auto bg-white dark:bg-neutral-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 group border-2 border-transparent dark:border-transparent dark:hover:border-amber-700 hover:border-yellow-600">
    <div class="p-6 sm:p-8 relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-orange-200 via-amber-300 to-yellow-400 dark:from-stone-800 dark:via-neutral-700 dark:to-neutral-600 opacity-75 group-hover:opacity-100 transition-opacity duration-500"></div>
      <div class="relative z-10 text-center">
        <svg class="mx-auto h-16 w-16 text-red-600 dark:text-red-400 animate-bounce transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <h2 class="mt-4 text-3xl font-extrabold text-stone-800 dark:text-stone-100 tracking-tight sm:text-4xl transition-colors duration-300">Oops! Something Went Wrong</h2>
        <p class="mt-4 text-lg leading-relaxed text-stone-600 dark:text-stone-300 transition-colors duration-300">
          It seems like we encountered an unexpected issue while processing your request. Please try again or contact support.
        </p>
        <div class="mt-8 space-y-4">
          <button class="w-full px-6 py-3 rounded-full text-lg font-semibold text-white bg-gradient-to-r from-orange-600 to-amber-700 hover:from-orange-700 hover:to-amber-800 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50 shadow-lg transform transition-all duration-300 active:scale-95 ease-in-out dark:from-amber-700 dark:to-orange-800 dark:hover:from-amber-800 dark:hover:to-orange-900 dark:focus:ring-orange-600">
            Try Again
          </button>
          <a href="#" class="w-full inline-flex items-center justify-center px-6 py-3 border-2 border-stone-400 dark:border-stone-600 rounded-full text-lg font-medium text-stone-700 dark:text-stone-300 bg-white dark:bg-neutral-700 hover:bg-stone-50 hover:border-stone-500 dark:hover:bg-neutral-600 dark:hover:border-stone-500 focus:outline-none focus:ring-4 focus:ring-stone-400 focus:ring-opacity-50 shadow-md transform transition-all duration-300 active:scale-95 ease-in-out">
            <svg class="-ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.887 8.887 0 01-3.696-.807l-3.377.94-.807-3.377A8.887 8.887 0 013 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM9.002 9a1 1 0 100 2 1 1 0 000-2zM13 9a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd" />
            </svg>
            Contact Support
          </a>
        </div>
      </div>
    </div>
    <div class="px-6 py-4 bg-stone-50 dark:bg-neutral-900 border-t border-stone-200 dark:border-neutral-700 text-center text-sm text-stone-500 dark:text-stone-400 transition-colors duration-300">
      <p>Error Code: <span class="font-semibold text-stone-600 dark:text-stone-300">500 Internal Server Error</span></p>
    </div>
  </div>
</div>

Bauhaus_EarthTone_Agriculture_Filters_Component

農業/農業Webサイト用の複雑でレスポンシブなフィルターコンポーネントで、アースカラーのバウハウススタイルで設計されています。カテゴリ、価格帯、評価、人気のあるタグなどのさまざまなフィルタリングオプションが含まれており、ダークモードが完全にサポートされています。

開けるプレビュー

                <div class="bg-stone-50 text-stone-800 dark:bg-stone-900 dark:text-stone-200 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl font-sans max-w-7xl mx-auto border border-stone-200 dark:border-stone-700">
  <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-stone-900 dark:text-stone-50 border-b-2 border-stone-400 dark:border-stone-600 pb-2">
    Farm Product Filters
  </h2>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
    <!-- Category Filter -->
    <div class="filter

OAuth ボタンコンポーネント

シンプルでレスポンシブな OAuth ログインボタンコンポーネントで、スキューモーフィックデザイン、類似のカラースキーム、ダークモードのサポートがあり、フォーラム/コミュニティプラットフォームに適しています。

開けるプレビュー

                <div class="flex flex-col items-center justify-center p-4 sm:p-6 md:p-8 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 min-h-screen">
  <div class="w-full max-w-sm p-6 sm:p-8 md:p-10 bg-gradient-to-br from-blue-100 via-purple-100 to-pink-100 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 rounded-xl shadow-2xl transition-all duration-300 ease-in-out
    border border-blue-200 dark:border-gray-600
    hover:shadow-3xl hover:border-blue-300 dark:hover:border-gray-500
  ">
    <h2 class="text-center text-2xl sm:text-3xl font-extrabold mb-8 text-indigo-800 dark:text-indigo-200
      text-shadow-light dark:text-shadow-dark
    ">Join the Community</h2>

    <div class="space-y-6">
      <button class="w-full flex items-center justify-center px-6 py-3 sm:py-3.5 border border-transparent text-lg font-medium rounded-xl shadow-md
        bg-gradient-to-br from-blue-500 to-blue-600 text-white
        hover:from-blue-600 hover:to-blue-700
        focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
        active:from-blue-700 active:to-blue-800 active:shadow-inner
        transform transition-all duration-200
        relative group overflow-hidden
      ">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 mr-3 shrink-0" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.0003 12.72L19.2003 8.35999L12.0003 4L4.8003 8.35999L12.0003 12.72ZM12.0003 14.28L4.8003 9.91999L12.0003 18.5999L19.2003 9.91999L12.0003 14.28Z" fill="#FFFFFF"></path>
          <path d="M12.0003 4L19.2003 8.36V16.64L12.0003 21L4.8003 16.64V8.36L12.0003 4Z" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        <span class="z-10">Continue with Google</span>
        <div class="absolute inset-0 bg-blue-700 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></div>
      </button>

      <button class="w-full flex items-center justify-center px-6 py-3 sm:py-3.5 border border-transparent text-lg font-medium rounded-xl shadow-md
        bg-gradient-to-br from-purple-500 to-purple-600 text-white
        hover:from-purple-600 hover:to-purple-700
        focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800
        active:from-purple-700 active:to-purple-800 active:shadow-inner
        transform transition-all duration-200
        relative group overflow-hidden
      ">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 mr-3 shrink-0" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.082-.74.082-.725.082-.725 1.204.086 1.838 1.238 1.838 1.238 1.07 1.835 2.809 1.305 3.492.997.107-.775.418-1.305.762-1.604-2.665-.3-5.466-1.332-5.466-5.93 0-1.312.465-2.387 1.229-3.22-.124-.3-.535-1.524.118-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.046.138 3.003.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.876.118 3.176.766.833 1.229 1.908 1.229 3.22 0 4.604-2.801 5.621-5.476 5.922.429.369.816 1.096.816 2.209v3.291c0 .319.192.694.8 0 4.767-1.589 8.197-6.095 8.197-11.389 0-6.627-5.373-12-12-12z"/>
        </svg>
        <span class="z-10">Continue with GitHub</span>
        <div class="absolute inset-0 bg-purple-700 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></div>
      </button>

      <button class="w-full flex items-center justify-center px-6 py-3 sm:py-3.5 border border-transparent text-lg font-medium rounded-xl shadow-md
        bg-gradient-to-br from-pink-500 to-pink-600 text-white
        hover:from-pink-600 hover:to-pink-700
        focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800
        active:from-pink-700 active:to-pink-800 active:shadow-inner
        transform transition-all duration-200
        relative group overflow-hidden
      ">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 mr-3 shrink-0" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.419 2.866 8.141 6.843 9.471-.035-.308-.06-.803.01-1.127.069-.323.235-.956.408-1.52.173-.564.331-.79.524-1.042.193-.252.417-.674.673-1.018.257-.344.537-.775.762-1.078.225-.303.473-.618.73-1.01.258-.392.518-.755.768-.973.25-.218.472-.408.68-.564.208-.156.408-.288.608-.408.2-.12.388-.22.564-.296.176-.076.331-.132.463-.168.132-.036.24-.052.324-.048.084.004.148.012.192.024.044.012.064.024.06.032.004.008-.008.012-.008.016v-1.92h-.008c-.004 0-.008.004-.008.012-.004 0-.008.004-.008.008-.004.004-.004.004-.004.004-.004 0-.004 0-.004-.004-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.008-.004-.008-.004-.008-.004-.012-.008-.016-.004-.004-.004-.008-.004-.012-.004-.004-.004-.008-.004-.012-.004-.004-.004-.008-.004-.012-.004-.004-.004-.008-.004-.012-.004-.004-.004-.008-.004-.012-.004-.004-.004-.008-.004-.012-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008h-.008c-.004 0-.008-.004-.008-.008s-.004-.012-.004-.02c-.004-.008-.004-.016-.004-.02-.004-.004-.004-.008-.004-.012-.004-.008-.004-.016-.004-.024-.004-.008-.004-.016-.004-.024 0-.008-.004-.012-.004-.016-.004-.008-.004-.012-.004-.016-.004-.008.004-.012.004-.016.004-.004.004-.008.004-.012.004-.004.004-.008.004-.012.004-.004.004-.008.004-.012.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.035-.308-.06-.803.01-1.127.069-.323.235-.956.408-1.52.173-.564.331-.79.524-1.042.193-.252.417-.674.673-1.018.257-.344.537-.775.762-1.078.225-.303.473-.618.73-1.01.258-.392.518-.755.768-.973.25-.218.472-.408.68-.564.208-.156.408-.288.608-.408.2-.12.388-.22.564-.296.176-.076.331-.132.463-.168.132-.036.24-.052.324-.048.084.004.148.012.192.024A10 10 0 0112 2C6.477 2 2 6.477 2 12c0 4.419 2.866 8.141 6.843 9.471z" />
        </svg>
        <span class="z-10">Continue with Apple</span>
        <div class="absolute inset-0 bg-pink-700 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></div>
      </button>
    </div>

    <div class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
      Or <a href="#" class="font-medium text-indigo-700 hover:text-indigo-900 dark:text-indigo-300 dark:hover:text-indigo-100">sign in with email</a>
    </div>
  </div>
</div>

<style>
  /* Custom utility classes for skeuomorphism */
  .text-shadow-light {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6), -1px -1px 2px rgba(0, 0, 0, 0.2);
  }
  .dark .text-shadow-dark {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6), -1px -1px 2px rgba(255, 255, 255, 0.2);
  }
</style>

Brutalism_Job_Media_Card

求人掲示板用の複雑なブルータリズムスタイルのメディアコンポーネントで、ハイコントラスト、大胆なタイポグラフィ、紫/紫の配色が特徴です。ダークモードのサポートによるレスポンシブ。

開けるプレビュー

                <div class="font-['Arial_Black',_sans-serif] bg-gradient-to-br from-purple-100 via-white to-purple-50 dark:from-neutral-900 dark:via-gray-950 dark:to-purple-950 p-4 sm:p-8 md:p-12 min-h-screen flex items-center justify-center">
  <div class="relative w-full max-w-4xl bg-purple-700 dark:bg-black border-4 border-purple-900 dark:border-purple-500 shadow-[8px_8px_0_0_rgba(72,21,111,1)] dark:shadow-[8px_8px_0_0_rgba(128,90,213,1)] overflow-hidden">
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/black-linen.png')] opacity-10 dark:opacity-5"></div>
    
    <div class="relative z-10 p-4 sm:p-6 md:p-8 lg:p-10 text-white">
      <div class="border-b-4 border-purple-900 dark:border-purple-500 pb-4 mb-6 sm:mb-8 flex flex-col sm:flex-row items-start sm:items-center justify-between">
        <h1 class="text-2xl sm:text-3xl md:text-5xl lg:text-6xl font-extrabold leading-tight tracking-tighter uppercase text-purple-200 dark:text-purple-300">
          <span class="block -skew-x-12 bg-purple-900 dark:bg-purple-800 px-3 py-1 mb-2 sm:mb-0">JOB</span>
          <span class="block skew-x-12 bg-purple-900 dark:bg-purple-800 px-3 py-1">POSTING CENTRAL</span>
        </h1>
        <button class="mt-4 sm:mt-0 text-lg sm:text-xl md:text-2xl font-bold bg-purple-900 dark:bg-purple-800 text-purple-200 dark:text-purple-300 border-4 border-purple-900 dark:border-purple-500 px-6 py-3 shadow-[4px_4px_0_0_rgba(72,21,111,1)] dark:shadow-[4px_4px_0_0_rgba(128,90,213,1)] uppercase hover:bg-purple-800 dark:hover:bg-purple-700 transition duration-200 ease-in-out">
          ⚡ BROWSE NOW
        </button>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
        <!-- Featured Job Card 1 -->
        <div class="md:col-span-2 bg-purple-900 dark:bg-purple-950 border-4 border-purple-900 dark:border-purple-500 p-4 sm:p-6 shadow-[6px_6px_0_0_rgba(72,21,111,1)] dark:shadow-[6px_6px_0_0_rgba(128,90,213,1)]">
          <div class="flex items-start mb-4 border-b-2 border-purple-800 dark:border-purple-700 pb-3">
            <img class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-purple-500 dark:border-purple-400 mr-4" src="https://picsum.photos/id/237/100/100" alt="Company Logo">
            <div>
              <h3 class="text-xl sm:text-2xl md:text-3xl font-extrabold uppercase text-purple-200 dark:text-purple-300 leading-none mb-1">LEAD UX NINJA</h3>
              <p class="text-sm sm:text-base text-purple-300 dark:text-purple-400">MEGA CORP INC. <span class="ml-2 text-xs opacity-75">San Francisco, CA</span></p>
            </div>
          </div>
          <p class="text-sm sm:text-base text-purple-200 dark:text-purple-400 mb-4">Seeking a visionary UX leader to revolutionize our digital product ecosystem. Must thrive in high-pressure, chaotic environments and deliver impactful, disruptive solutions.</p>
          <div class="flex flex-wrap gap-2 mb-4">
            <span class="text-xs sm:text-sm font-bold bg-purple-500 dark:bg-purple-600 px-3 py-1 text-white border border-purple-400 dark:border-purple-500">#DESIGN</span>
            <span class="text-xs sm:text-sm font-bold bg-purple-500 dark:bg-purple-600 px-3 py-1 text-white border border-purple-400 dark:border-purple-500">#BRUTALIST</span>
            <span class="text-xs sm:text-sm font-bold bg-purple-500 dark:bg-purple-600 px-3 py-1 text-white border border-purple-400 dark:border-purple-500">#LEADERSHIP</span>
          </div>
          <button class="w-full text-base sm:text-lg md:text-xl font-bold bg-purple-500 text-white dark:bg-purple-600 border-4 border-purple-900 dark:border-purple-500 px-6 py-3 shadow-[4px_4px_0_0_rgba(72,21,111,1)] dark:shadow-[4px_4px_0_0_rgba(128,90,213,1)] uppercase hover:bg-purple-400 dark:hover:bg-purple-500 transition duration-200 ease-in-out">
            🚨 APPLY NOW
          </button>
        </div>

        <!-- Quick Links / Stats Column -->
        <div class="order-first md:order-last">
          <div class="bg-purple-900 dark:bg-purple-950 border-4 border-purple-900 dark:border-purple-500 p-4 sm:p-6 mb-6 sm:mb-8 shadow-[6px_6px_0_0_rgba(72,21,111,1)] dark:shadow-[6px_6px_0_0_rgba(128,90,213,1)]">
            <h4 class="text-lg sm:text-xl font-extrabold uppercase text-purple-200 dark:text-purple-300 border-b-2 border-purple-800 dark:border-purple-700 pb-2 mb-3">QUICK LINKS <span class="text-purple-500">_</span></h4>
            <ul class="list-none p-0 m-0">
              <li class="mb-2"><a href="#" class="text-purple-200 dark:text-purple-400 hover:text-purple-500 dark:hover:text-purple-300 text-sm sm:text-base font-bold uppercase transition duration-200">🔥 HOT JOBS</a></li>
              <li class="mb-2"><a href="#" class="text-purple-200 dark:text-purple-400 hover:text-purple-500 dark:hover:text-purple-300 text-sm sm:text-base font-bold uppercase transition duration-200">⚙️ JOB ALERTS</a></li>
              <li class="mb-2"><a href="#" class="text-purple-200 dark:text-purple-400 hover:text-purple-500 dark:hover:text-purple-300 text-sm sm:text-base font-bold uppercase transition duration-200">👤 PROFILE EDIT</a></li>
              <li><a href="#" class="text-purple-200 dark:text-purple-400 hover:text-purple-500 dark:hover:text-purple-300 text-sm sm:text-base font-bold uppercase transition duration-200">_ CONTACT US</a></li>
            </ul>
          </div>

          <div class="bg-purple-900 dark:bg-purple-950 border-4 border-purple-900 dark:border-purple-500 p-4 sm:p-6 shadow-[6px_6px_0_0_rgba(72,21,111,1)] dark:shadow-[6px_6px_0_0_rgba(128,90,213,1)]">
            <h4 class="text-lg sm:text-xl font-extrabold uppercase text-purple-200 dark:text-purple-300 border-b-2 border-purple-800 dark:border-purple-700 pb-2 mb-3">STATS <span class="text-purple-500">//</span></h4>
            <div class="grid grid-cols-2 gap-4 text-purple-200 dark:text-purple-400">
              <div>
                <p class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-purple-500 dark:text-purple-300 leading-none">786</p>
                <p class="text-xs sm:text-sm uppercase font-bold ">Active Listings</p>
              </div>
              <div>
                <p class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-purple-500 dark:text-purple-300 leading-none">1.2K+</p>
                <p class="text-xs sm:text-sm uppercase font-bold ">Users Registered</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Latest Opportunities Section -->
      <div class="mt-8 sm:mt-12">
        <h2 class="text-xl sm:text-2xl md:text-4xl font-extrabold uppercase text-purple-200 dark:text-purple-300 border-b-4 border-purple-900 dark:border-purple-500 pb-2 mb-6 sm:mb-8 flex items-center">
          <span class="block -skew-x-12 bg-purple-900 dark:bg-purple-800 px-3 py-1 mr-4">LATEST</span>
          <span class="block skew-x-12 bg-purple-900 dark:bg-purple-800 px-3 py-1">OPPORTUNITIES</span>
        </h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
          <!-- Job Card 1 -->
          <div class="bg-purple-800 dark:bg-purple-900 border-4 border-purple-900 dark:border-purple-500 p-4 shadow-[5px_5px_0_0_rgba(72,21,111,1)] dark:shadow-[5px_5px_0_0_rgba(128,90,213,1)]">
            <h3 class="text-lg sm:text-xl font-extrabold uppercase text-purple-200 dark:text-purple-300 leading-tight mb-1">CYBER-SEC GURU</h3>
            <p class="text-sm text-purple-300 dark:text-purple-400 mb-3">FORTRESS CORP. | Remote</p>
            <p class="text-xs text-purple-200 dark:text-purple-400 mb-4">Protect our digital empire from all threats. High stakes, higher rewards.</p>
            <a href="#" class="block text-center text-sm font-bold bg-purple-500 text-white dark:bg-purple-600 border-2 border-purple-900 dark:border-purple-500 px-4 py-2 shadow-[2px_2px_0_0_rgba(72,21,111,1)] dark:shadow-[2px_2px_0_0_rgba(128,90,213,1)] uppercase hover:bg-purple-400 dark:hover:bg-purple-500 transition duration-200">VIEW ROLE</a>
          </div>
          <!-- Job Card 2 -->
          <div class="bg-purple-800 dark:bg-purple-900 border-4 border-purple-900 dark:border-purple-500 p-4 shadow-[5px_5px_0_0_rgba(72,21,111,1)] dark:shadow-[5px_5px_0_0_rgba(128,90,213,1)]">
            <h3 class="text-lg sm:text-xl font-extrabold uppercase text-purple-200 dark:text-purple-300 leading-tight mb-1">SENIOR DATA WIZARD</h3>
            <p class="text-sm text-purple-300 dark:text-purple-400 mb-3">ANALYTICS LLC. | NYC</p>
            <p class="text-xs text-purple-200 dark:text-purple-400 mb-4">Unleash the power of data. Predict the future. Master the chaos.</p>
            <a href="#" class="block text-center text-sm font-bold bg-purple-500 text-white dark:bg-purple-600 border-2 border-purple-900 dark:border-purple-500 px-4 py-2 shadow-[2px_2px_0_0_rgba(72,21,111,1)] dark:shadow-[2px_2px_0_0_rgba(128,90,213,1)] uppercase hover:bg-purple-400 dark:hover:bg-purple-500 transition duration-200">VIEW ROLE</a>
          </div>
          <!-- Job Card 3 -->
          <div class="bg-purple-800 dark:bg-purple-900 border-4 border-purple-900 dark:border-purple-500 p-4 shadow-[5px_5px_0_0_rgba(72,21,111,1)] dark:shadow-[5px_5px_0_0_rgba(128,90,213,1)]">
            <h3 class="text-lg sm:text-xl font-extrabold uppercase text-purple-200 dark:text-purple-300 leading-tight mb-1">PRODUCT DESTRØYER</h3>
            <p class="text-sm text-purple-300 dark:text-purple-400 mb-3">ALPHA DESIGNS | Berlin</p>
            <p class="text-xs text-purple-200 dark:text-purple-400 mb-4">Break the mold. Build the next big thing. No compromises.</p>
            <a href="#" class="block text-center text-sm font-bold bg-purple-500 text-white dark:bg-purple-600 border-2 border-purple-900 dark:border-purple-500 px-4 py-2 shadow-[2px_2px_0_0_rgba(72,21,111,1)] dark:shadow-[2px_2px_0_0_rgba(128,90,213,1)] uppercase hover:bg-purple-400 dark:hover:bg-purple-500 transition duration-200">VIEW ROLE</a>
          </div>
        </div>
      </div>

      <!-- Testimonial / Featured Person -->
      <div class="mt-8 sm:mt-12 bg-purple-900 dark:bg-purple-950 border-4 border-purple-900 dark:border-purple-500 p-4 sm:p-6 shadow-[6px_6px_0_0_rgba(72,21,111,1)] dark:shadow-[6px_6px_0_0_rgba(128,90,213,1)] flex flex-col md:flex-row items-center justify-between gap-6">
        <div class="flex-shrink-0">
          <img class="w-24 h-24 sm:w-32 sm:h-32 rounded-full border-4 border-purple-500 dark:border-purple-400 object-cover shadow-[4px_4px_0_0_rgba(72,21,111,1)] dark:shadow-[4px_4px_0_0_rgba(128,90,213,1)]" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow text-center md:text-left">
          <p class="italic text-purple-200 dark:text-purple-400 text-base sm:text-lg mb-2">"THIS PLATFORM IS A JOLT TO THE SYSTEM. PURE ADRENALINE, NO FLUFF. I'VE LANDED MY DREAM DESTRUCTIVE ROLE!"</p>
          <p class="font-bold uppercase text-purple-300 dark:text-purple-200 text-sm sm:text-base">— MAXINE 'THE DESTROYER' KANE, SENIOR ANNIHILATION ENGINEER</p>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 21 22 23 24 25 ... 335