検索コンポーネント

すべてのコンポーネント

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

ダークモードカードコンポーネント

ビジネス/企業のWebサイト向けに設計されたレスポンシブカードコンポーネントで、ダークモードUIとグレースケールの配色を備え、適度な複雑さとインタラクティブ性を備えています。

                <div class="flex flex-wrap justify-center p-5 bg-gray-900 dark:bg-gray-800">
    <div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Card Image">
        <div class="p-5">
            <div class="flex items-center mb-4">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="Avatar">
                <div class="ml-4 text-white">
                    <h2 class="text-lg font-semibold">John Doe</h2>
                    <p class="text-gray-400">@johndoe</p>
                </div>
            </div>
            <h3 class="text-xl font-bold text-white mb-2">Business Strategy</h3>
            <p class="text-gray-300 mb-4">This card contains information about business strategies that can be utilized for enhancing corporate effectiveness.</p>
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Learn More</a>
        </div>
    </div>
    <div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=2" alt="Card Image">
        <div class="p-5">
            <div class="flex items-center mb-4">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/11.jpg" alt="Avatar">
                <div class="ml-4 text-white">
                    <h2 class="text-lg font-semibold">Jane Smith</h2>
                    <p class="text-gray-400">@janesmith</p>
                </div>
            </div>
            <h3 class="text-xl font-bold text-white mb-2">Marketing Insights</h3>
            <p class="text-gray-300 mb-4">Insights and analytics on market trends that can help your business adapt and grow.</p>
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Discover More</a>
        </div>
    </div>
    <div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=3" alt="Card Image">
        <div class="p-5">
            <div class="flex items-center mb-4">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar">
                <div class="ml-4 text-white">
                    <h2 class="text-lg font-semibold">Mike Johnson</h2>
                    <p class="text-gray-400">@mikejohnson</p>
                </div>
            </div>
            <h3 class="text-xl font-bold text-white mb-2">Financial Planning</h3>
            <p class="text-gray-300 mb-4">Detailed financial planning services aimed at helping companies achieve their financial goals.</p>
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Get Started</a>
        </div>
    </div>
</div>

Glassmorphism ページネーションコンポーネント

glassmorphism とトライアドの配色で設計されたレスポンシブページネーションコンポーネントで、ブログやコンテンツの読み取りに適しています。複数のインタラクティブ要素を備えており、ダークモードをサポートしています。

開けるプレビュー

                <div class="flex justify-center mt-6">
    <nav class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4">
        <ul class="flex items-center space-x-2">
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-blue-500 dark:hover:bg-blue-700 text-blue-600 dark:text-blue-300">Previous</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">1</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">2</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">3</a>
            </li>
            <li>
                <a href="#" class="px-3 py-1 rounded-lg hover:bg-red-500 dark:hover:bg-red-700 text-red-600 dark:text-red-300">Next</a>
            </li>
        </ul>
    </nav>
</div>
<div class="flex justify-center mt-8 space-x-6">
    <div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
        <img class="rounded-t-lg" src="https://picsum.photos/300/150?random=1" alt="Content Image" />
        <h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 1</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
        <img class="rounded-t-lg" src="https://picsum.photos/300/150?random=2" alt="Content Image" />
        <h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 2</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 text-center">Pellentesque habitant morbi tristique senectus.</p>
    </div>
    <div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
        <img class="rounded-t-lg" src="https://picsum.photos/300/150?random=3" alt="Content Image" />
        <h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 3</h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 text-center">Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
</div>

バッジコンポーネント

類似の配色と豊富なインターフェイスを備えたブログ用のNeumorphismスタイルのバッジコンポーネント。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-800 flex items-center justify-center p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- Badge 1 -->
        <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer">
            <img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="flex flex-col">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Tech Trends</h2>
                <p class="text-gray-600 dark:text-gray-400">Stay updated with the latest in technology.</p>
            </div>
        </div>
        
        <!-- Badge 2 -->
        <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer">
            <img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
            <div class="flex flex-col">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Health & Wellness</h2>
                <p class="text-gray-600 dark:text-gray-400">Tips for a healthier lifestyle.</p>
            </div>
        </div>
        
        <!-- Badge 3 -->
        <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer">
            <img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
            <div class="flex flex-col">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Travel Diaries</h2>
                <p class="text-gray-600 dark:text-gray-400">Explore the world through rich stories.</p>
            </div>
        </div>
        
        <!-- Badge 4 -->
        <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 flex items-center space-x-4 transition-all duration-300 hover:shadow-2xl cursor-pointer">
            <img class="w-12 h-12 rounded-full shadow-inner" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
            <div class="flex flex-col">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Food & Recipes</h2>
                <p class="text-gray-600 dark:text-gray-400">Discover delicious recipes and cooking tips.</p>
            </div>
        </div>
    </div>
</div>

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

3Dデザイン、類似の配色、ダークモードをサポートするレスポンシブな追い風CSSメガメニュー

開けるプレビュー

                <nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 shadow-xl">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <div class="text-white text-2xl font-bold">BlogName</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-white hover:text-gray-200 transition duration-300">Home</a>
      <div class="relative group">
        <button class="text-white hover:text-gray-200 transition duration-300">Categories</button>
        <div class="absolute z-10 invisible group-hover:visible bg-white dark:bg-gray-700 shadow-lg rounded-md p-6 mt-2 transition duration-300 transform translate-y-2 opacity-0 group-hover:opacity-100 group-hover:translate-y-0" style="perspective: 1000px;">
          <div class="grid grid-cols-2 gap-4" style="transform: rotateY(0deg);">
            <div class="space-y-2">
              <a href="#" class="block text-gray-800 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">Technology</a>
              <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-300">Lifestyle</a>
              <a href="#" class="block text-gray-800 dark:text-white hover:text-red-600 dark:hover:text-red-400 transition duration-300">Travel</a>
            </div>
            <div class="space-y-2">
              <a href="#" class="block text-gray-800 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">Food</a>
              <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-300">Fashion</a>
              <a href="#" class="block text-gray-800 dark:text-white hover:text-red-600 dark:hover:text-red-400 transition duration-300">Sports</a>
            </div>
          </div>
        </div>
      </div>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300">About</a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default) -->
  <div class="mobile-menu hidden md:hidden bg-gradient-to-r from-purple-400 via-pink-400 to-red-400 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 py-4 px-4">
    <a href="#" class="block text-white hover:text-gray-200 transition duration-300 py-2">Home</a>
    <div class="relative group">
      <button class="block text-white hover:text-gray-200 transition duration-300 py-2">Categories</button>
      <div class="relative z-10 invisible group-hover:visible bg-white dark:bg-gray-700 shadow-lg rounded-md p-4 mt-2 transition duration-300">
        <div class="grid grid-cols-1 gap-2">
          <a href="#" class="block text-gray-800 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">Technology</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-300">Lifestyle</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-red-600 dark:hover:text-red-400 transition duration-300">Travel</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">Food</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-300">Fashion</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-red-600 dark:hover:text-red-400 transition duration-300">Sports</a>
        </div>
      </div>
    </div>
    <a href="#" class="block text-white hover:text-gray-200 transition duration-300 py-2">About</a>
    <a href="#" class="block text-white hover:text-gray-200 transition duration-300 py-2">Contact</a>
  </div>
</nav>

ダークモード棒グラフ

ダークモードをサポートするデータを表示するためのレスポンシブ棒グラフ。

開けるプレビュー

                <template>
  <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
    <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
      <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Sales Data</h2>
      <div class="relative h-60 lg:h-80">
        <!-- Bars -->
        <div class="absolute bottom-0 left-0 right-0 top-0 flex items-end justify-around px-4">
          <!-- Example bars - adjust height based on your data -->
          <div class="w-8 bg-blue-500 dark:bg-blue-600 rounded-t-lg h-3/4">
            <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">75%</span>
          </div>
          <div class="w-8 bg-green-500 dark:bg-green-600 rounded-t-lg h-2/3">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">66%</span>
          </div>
          <div class="w-8 bg-red-500 dark:bg-red-600 rounded-t-lg h-4/5">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">80%</span>
          </div>
          <div class="w-8 bg-yellow-500 dark:bg-yellow-600 rounded-t-lg h-1/2">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">50%</span>
          </div>
           <div class="w-8 bg-indigo-500 dark:bg-indigo-600 rounded-t-lg h-3/5">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">60%</span>
          </div>
           <div class="w-8 bg-purple-500 dark:bg-purple-600 rounded-t-lg h-2/4">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">50%</span>
          </div>
            <div class="w-8 bg-pink-500 dark:bg-pink-600 rounded-t-lg h-1/3">
             <span class="block text-center text-xs font-medium text-gray-700 dark:text-gray-300 mt-1">33%</span>
          </div>
        </div>
        <!-- X-axis Labels -->
        <div class="absolute bottom-0 left-0 right-0 h-8 flex items-center justify-around text-gray-600 dark:text-gray-400 text-sm">
          <span>Jan</span>
          <span>Feb</span>
          <span>Mar</span>
          <span>Apr</span>
          <span>May</span>
          <span>Jun</span>
          <span>Jul</span>
        </div>
      </div>
    </div>
  </div>
</template>

レトロイメージライトボックスコンポーネント

レトロ/ビンテージデザイン、類似の配色、ダークモードのサポートを備えたレスポンシブでシンプルな画像ライトボックスコンポーネントで、ブログやコンテンツサイトに適しています。

開けるプレビュー

                <
  div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 font-mono bg-gray-200 dark:bg-gray-800"
>
  <
    div
    class="relative group cursor-pointer"
    onclick="this.querySelector('.lightbox').classList.remove('hidden')"
  >
    <
      img
      src="https://picsum.photos/seed/retro1/500/300"
      alt="Retro Image 1"
      class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-yellow-600 dark:border-yellow-400"
    >
    <
      div
      class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
      onclick="event.stopPropagation(); this.classList.add('hidden')"
    >
      <
        img
        src="https://picsum.photos/seed/retro1/800/600"
        alt="Retro Image 1 Enlarged"
        class="max-w-full max-h-full border-4 border-yellow-600 dark:border-yellow-400"
      >
    <
    /div
  >

  <
    div
    class="relative group cursor-pointer"
    onclick="this.querySelector('.lightbox').classList.remove('hidden')"
  >
    <
      img
      src="https://picsum.photos/seed/retro2/500/300"
      alt="Retro Image 2"
      class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-orange-600 dark:border-orange-400"
    >
    <
      div
      class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
      onclick="event.stopPropagation(); this.classList.add('hidden')"
    >
      <
        img
        src="https://picsum.photos/seed/retro2/800/600"
        alt="Retro Image 2 Enlarged"
        class="max-w-full max-h-full border-4 border-orange-600 dark:border-orange-400"
      >
    <
    /div
  >


  <
    div
    class="relative group cursor-pointer"
    onclick="this.querySelector('.lightbox').classList.remove('hidden')"
  >
    <
      img
      src="https://picsum.photos/seed/retro3/500/300"
      alt="Retro Image 3"
      class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-red-600 dark:border-red-400"
    >
    <
      div
      class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
      onclick="event.stopPropagation(); this.classList.add('hidden')"
    >
      <
        img
        src="https://picsum.photos/seed/retro3/800/600"
        alt="Retro Image 3 Enlarged"
        class="max-w-full max-h-full border-4 border-red-600 dark:border-red-400"
      >
    <
    /div
  >
<
/div
>

セッションタイムアウトアラート

ソーシャルメディア用のシンプルなモノクロマテリアルデザインセッションタイムアウトアラートコンポーネントで、レスポンシブデザインとダークテーマをサポートしています。

開けるプレビュー

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
    <div class="mt-3 text-center">
      <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-gray-100 dark:bg-gray-700">
        <svg class="h-6 w-6 text-gray-600 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white mt-4">Session Expiring</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-300">Your session is about to expire. You will be logged out automatically.</p>
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-gray-600 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-600">OK</button>
      </div>
    </div>
  </div>
</div>

レトロなCAPTCHA

アースカラー、適度な複雑さ、ビジネスWebサイト向けのレトロ/ビンテージスタイルを備えたレスポンシブCAPTCHAコンポーネントで、Tailwind CSSを使用したダークモードがサポートされています。JavaScript はありません。

開けるプレビュー

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-md w-96">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Verification</h2>
    
    <div class="mb-4">
      <label for="captcha-input" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Enter the characters you see below:</label>
      <div class="flex items-center space-x-4">
        <div class="captcha-display bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white text-xl font-mono px-4 py-2 rounded tracking-wider">
          A3fG9h
        </div>
        <button class="px-3 py-2 bg-gray-200 dark:bg-gray-500 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400">
          &#x21bb;
        </button>
      </div>
    </div>
    
    <input type="text" id="captcha-input" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-700 dark:text-white" placeholder="Enter CAPTCHA">
    
    <button class="mt-6 w-full bg-amber-600 dark:bg-amber-700 text-white py-2 rounded hover:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500">
      Verify
    </button>
  </div>
</div>

Follow Button コンポーネント

ダークテーマをサポートするダッシュボード用のNeumorphismスタイルのフォローボタン。

開けるプレビュー

                <div class="flex justify-center items-center h-screen bg-gray-800 dark:bg-gray-900">
    <button class="relative inline-flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-full shadow-lg transition-transform transform hover:scale-105 active:scale-95 dark:shadow-inner shadow-gray-300 ">
        <span class="absolute inset-0 rounded-full bg-gradient-to-r from-pink-400 via-red-500 to-yellow-500 opacity-20 blur transition-all duration-500"></span>
        <span class="relative text-white font-bold text-lg">
            Follow
        </span>
    </button>
</div>

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

3Dデザイン、単色の配色、ダッシュボード用の適度な複雑さ、ダークテーマをサポートするレスポンシブデザインを備えたエラーメッセージコンポーネント。

開けるプレビュー

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative">
    <div class="absolute inset-0 bg-gradient-to-r from-purple-400 to-purple-600 transform -skew-y-3 rotate-1 scross-y-3 rounded-3xl dark:from-purple-700 dark:to-purple-900"></div>
    <div class="relative bg-white p-10 rounded-xl shadow-2xl text-center dark:bg-gray-800">
      <h1 class="text-3xl font-bold text-red-500 dark:text-red-400">Error!</h1>
      <p class="mt-4 text-gray-700 dark:text-gray-300">Something went wrong. Please try again later.</p>
      <button class="mt-6 px-8 py-2 bg-purple-500 text-white rounded-full hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-700">Retry</button>
    </div>
  </div>
</div>

1 ... 239 240 241 242 243 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント