検索コンポーネント

すべてのコンポーネント

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

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

アーストーンとダークテーマのサポートを備えたブログコンテンツの消費用に設計されたスキューモーフィックページネーションコンポーネント。

                <div class="flex justify-center items-center space-x-4 py-4">
    <button class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full px-4 py-2 shadow-lg hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300">
        Previous
    </button>
    <span class="text-gray-800 dark:text-gray-200">Page <strong>1</strong> of <strong>10</strong></span>
    <button class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full px-4 py-2 shadow-lg hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300">
        Next
    </button>
</div>
<div class="flex justify-center space-x-2 py-4">
    <button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
        1
    </button>
    <button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
        2
    </button>
    <button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
        3
    </button>
    <button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
        4
    </button>
    <button class="w-10 h-10 flex justify-center items-center bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-2 border-gray-400 dark:border-gray-600 rounded-full transition duration-300 hover:bg-gray-300 dark:hover:bg-gray-700 shadow-lg">
        5
    </button>
</div>
<div class="flex justify-center items-center space-x-4 py-4">
    <span class="text-gray-800 dark:text-gray-200">Jump to page:</span>
    <input type="number" min="1" max="10" class="w-12 px-2 py-1 border-2 border-gray-400 dark:border-gray-600 rounded bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition duration-300 focus:outline-none focus:border-gray-600 dark:focus:border-gray-400" />
</div>

ウィッシュリストコンポーネント

3Dデザインスタイル、パステルカラースキーム、ビジネスWebサイト向けのレスポンシブデザインを備えたウィッシュリストコンポーネントで、ダークモードをサポートします。

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto p-6">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">My Wishlist</h2>
    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
            <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist1/100/100" alt="Wishlist Item 1" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 1</h3>
                <p class="text-gray-500 dark:text-gray-400">Description of Item 1</p>
                <span class="text-purple-600 dark:text-purple-400">$29.99</span>
            </div>
        </li>
        <li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
            <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist2/100/100" alt="Wishlist Item 2" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 2</h3>
                <p class="text-gray-500 dark:text-gray-400">Description of Item 2</p>
                <span class="text-purple-600 dark:text-purple-400">$39.99</span>
            </div>
        </li>
        <li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
            <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist3/100/100" alt="Wishlist Item 3" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 3</h3>
                <p class="text-gray-500 dark:text-gray-400">Description of Item 3</p>
                <span class="text-purple-600 dark:text-purple-400">$49.99</span>
            </div>
        </li>
    </ul>
    <div class="mt-4 flex justify-between items-center">
        <span class="text-gray-700 dark:text-gray-300">Total:</span>
        <span class="text-purple-600 dark:text-purple-400 font-bold">$119.97</span>
    </div>
    <button class="mt-4 w-full bg-purple-500 dark:bg-purple-600 text-white font-semibold py-2 rounded hover:bg-purple-600 dark:hover:bg-purple-700 transition duration-200">Checkout</button>
</div>

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

ブルータリズムスタイルでデザインされた複雑な画像ライトボックスコンポーネントで、ソーシャルメディアインターフェイスに適しており、グレースケールの配色とダークモードをサポートするための高コントラストが特徴です。

開けるプレビュー

                <div class="relative z-10">
    <!-- Thumbnail Trigger -->
    <div class="mb-4">
        <img src="https://picsum.photos/200/300" alt="Thumbnail" class="cursor-pointer h-auto w-full border border-gray-700 hover:border-gray-500 dark:border-gray-300 dark:hover:border-gray-100">
    </div>

    <!-- Modal for Lightbox -->
    <div class="fixed inset-0 bg-gray-900 bg-opacity-75 dark:bg-opacity-95 flex items-center justify-center hidden group-hover:block">
        <div class="bg-gray-800 w-full max-w-3xl p-6 rounded-lg shadow-lg border border-gray-700">
            <!-- Image Display -->
            <img src="https://picsum.photos/800/600" alt="Large Image" class="w-full h-auto mb-4 rounded-lg border border-gray-600 dark:border-gray-400">
            <!-- Close Button -->
            <button class="absolute top-4 right-4 text-white hover:text-gray-400">
                &times;
            </button>
            <div class="flex justify-end mt-4">
                <a href="#" class="text-gray-300 hover:text-gray-100 transition-colors duration-200">Next</a>
                <a href="#" class="ml-4 text-gray-300 hover:text-gray-100 transition-colors duration-200">Previous</a>
            </div>
        </div>
    </div>
</div>

<style>
    /* Brutalist Styles */
    img {
        user-select: none;
    }
    button {
        background: none;
        border: none;
        font-size: 2rem;
        cursor: pointer;
    }
    button:hover {
        color: #ddd;
    }
    .hidden {
        display: none;
    }
</style>

ダークモードソーシャルカード

アースカラーのダークモード用にスタイリングされたレスポンシブカードコンポーネントで、ソーシャルメディアインターフェイス用に設計されています。

開けるプレビュー

                <div class="max-w-sm mx-auto p-4">
  <div class="bg-gray-800 rounded-lg shadow-lg dark:bg-gray-900">
    <img class="rounded-t-lg" src="https://picsum.photos/400/200" alt="Card image cap">
    <div class="p-4">
      <div class="flex items-center">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <div class="ml-4">
          <h2 class="text-lg font-bold text-gray-300 dark:text-gray-100">John Doe</h2>
          <p class="text-sm text-gray-500 dark:text-gray-400">@john_doe</p>
        </div>
      </div>
      <p class="mt-2 text-gray-300 dark:text-gray-200">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut libero et neque vehicula porta.
      </p>
      <div class="flex justify-between mt-4">
        <button class="text-gray-300 dark:text-gray-200 hover:text-gray-200 dark:hover:text-gray-100">Like</button>
        <button class="text-gray-300 dark:text-gray-200 hover:text-gray-200 dark:hover:text-gray-100">Comment</button>
        <button class="text-gray-300 dark:text-gray-200 hover:text-gray-200 dark:hover:text-gray-100">Share</button>
      </div>
    </div>
  </div>
</div>

メディア埋め込みコンポーネント

Glassmorphism スタイル、類似の配色、コンテンツ消費のダークモードサポートを備えたレスポンシブメディア埋め込みコンポーネント。

開けるプレビュー

                <div class="dark:bg-gray-900 py-8">
  <div class="container mx-auto px-4">
    <div class="max-w-sm mx-auto rounded-xl shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 bg-white dark:bg-gray-800 dark:bg-opacity-20 overflow-hidden">
      <div class="relative">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/unsplash/400/300" alt="Media Placeholder">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
        <div class="absolute bottom-0 left-0 p-4 text-white">
          <h3 class="text-xl font-bold">Media Title</h3>
          <p class="text-sm">Date Published</p>
        </div>
      </div>
      <div class="p-4">
        <p class="text-gray-700 dark:text-gray-300 text-base">
          This is a description of the media content. It can be a short summary or excerpt.
        </p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/random.jpg" alt="Avatar of Author">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none">Author Name</p>
            <p class="text-gray-600 dark:text-gray-400">Author Title</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Product Reviews コンポーネント

ビジネス/企業のWebサイトに適した、鮮やかな配色のダークモード用に設計されたレスポンシブ製品レビューコンポーネント。ユーザーのアバター、レビュー評価、ユーザーのコメントがインタラクティブなレイアウトで提供されます。

開けるプレビュー

                <div class="max-w-4xl mx-auto p-6 bg-gray-900 text-white rounded-lg shadow-lg">
  <h2 class="text-2xl font-bold mb-4">Product Reviews</h2>
  <div class="space-y-4">
    <!-- Review Item -->
    <div class="flex items-start bg-gray-800 p-4 rounded-lg">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
      <div class="flex-1">
        <div class="flex items-center mb-1">
          <span class="text-yellow-400 text-xl">
            &#9733;&#9733;&#9733;&#9733;&#9734;
          </span>
          <span class="ml-2 text-sm text-gray-400">4.0</span>
        </div>
        <p class="text-gray-300">Great product! Highly recommend it to others.</p>
        <span class="text-gray-500 text-xs">by John Doe on June 15, 2023</span>
      </div>
    </div>
    <!-- Review Item -->
    <div class="flex items-start bg-gray-800 p-4 rounded-lg">
      <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
      <div class="flex-1">
        <div class="flex items-center mb-1">
          <span class="text-yellow-400 text-xl">
            &#9733;&#9733;&#9733;&#9733;&#9733;
          </span>
          <span class="ml-2 text-sm text-gray-400">5.0</span>
        </div>
        <p class="text-gray-300">Absolutely love this! It's perfect for my needs!</p>
        <span class="text-gray-500 text-xs">by Jane Smith on June 10, 2023</span>
      </div>
    </div>
    <!-- Review Item -->
    <div class="flex items-start bg-gray-800 p-4 rounded-lg">
      <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
      <div class="flex-1">
        <div class="flex items-center mb-1">
          <span class="text-yellow-400 text-xl">
            &#9733;&#9733;&#9733;&#9732;&#9732;
          </span>
          <span class="ml-2 text-sm text-gray-400">3.0</span>
        </div>
        <p class="text-gray-300">It's okay, but I expected better quality.</p>
        <span class="text-gray-500 text-xs">by Mike Johnson on June 5, 2023</span>
      </div>
    </div>
  </div>
</div>

ユーザーメンションコンポーネント

レスポンシブなユーザーが、Tailwind CSS を使用するビジネス Web サイト向けに設計された、ダークテーマのサポートとマイクロインタラクションを備えたコンポーネントについて言及しています。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-800 py-8 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">User Mentions</h2>
    <div class="space-y-4">
      <!-- Mention 1 -->
      <div class="flex items-center bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-white">Jane Doe</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">Mentioned you in a post</p>
        </div>
        <div class="ml-auto">
          <svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition duration-300 hover:rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m9 0a3 3 0 01-6 0m-9 0a3 3 0 01-6 0"></path></svg>
        </div>
      </div>

      <!-- Mention 2 -->
      <div class="flex items-center bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-white">John Smith</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">Replied to your comment</p>
        </div>
        <div class="ml-auto">
           <svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition duration-300 hover:rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m9 0a3 3 0 01-6 0m-9 0a3 3 0 01-6 0"></path></svg>
        </div>
      </div>

      <!-- Mention 3 -->
       <div class="flex items-center bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-white">Jessica Williams</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">Liked your photo</p>
        </div>
        <div class="ml-auto">
           <svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition duration-300 hover:rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m9 0a3 3 0 01-6 0m-9 0a3 3 0 01-6 0"></path></svg>
        </div>
      </div>
    </div>
  </div>
</div>

CAPTCHAコンポーネント

ダッシュボード用に設計された3DスタイルのCAPTCHAコンポーネントで、鮮やかな色とレスポンシブデザイン、ダークモードをサポートします。

開けるプレビュー

                <div class="flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105">
    <h2 class="text-lg font-bold text-center text-vibrant-600 dark:text-vibrant-300 mb-4">Please verify you are human</h2>
    <div class="w-full max-w-xs">
        <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-4 rounded-lg shadow-xl text-white flex items-center justify-between">  
            <img src="https://picsum.photos/100" alt="Random Image" class="rounded-lg shadow-md" />
            <p class="ml-4">Check all images with a car</p>
        </div>
        <div class="grid grid-cols-3 gap-2 my-4">  
            <img src="https://picsum.photos/50?random=1" alt="Image 1" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=2" alt="Image 2" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=3" alt="Image 3" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=4" alt="Image 4" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=5" alt="Image 5" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=6" alt="Image 6" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
        </div>
        <button class="w-full bg-vibrant-600 hover:bg-vibrant-500 text-white py-2 rounded-lg transition duration-300 ease-in-out shadow-lg">Verify</button>
    </div>
</div>

インタラクティブコンポーネントコンポーネント

Skeuomorphismデザイン、類似の配色、およびブログ/コンテンツの目的のための適度な複雑さを備えたインタラクティブコンポーネントコンポーネント。ダークテーマをサポートするレスポンシブデザイン。JavaScript コードはありません。

開けるプレビュー

                <div class="bg-gray-200 dark:bg-gray-900 p-6 rounded-lg shadow-xl max-w-sm mx-auto">
  <div class="relative">
    <img class="w-full h-48 object-cover rounded-md border-4 border-gray-300 dark:border-gray-700" src="https://picsum.photos/seed/skeuomorphism/400/300" alt="Article Image">
    <div class="absolute bottom-0 right-0 bg-gradient-to-tl from-gray-400 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-800 dark:text-gray-200 text-xs px-2 py-1 rounded-tl-lg">Skeuomorphism</div>
  </div>
  <div class="mt-4">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Blog Post Title</h2>
    <p class="text-gray-700 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="flex justify-between items-center mt-4">
    <div class="flex items-center">
      <img class="w-8 h-8 rounded-full mr-2 border-2 border-gray-300 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
      <span class="text-gray-700 dark:text-gray-300 text-sm">John Doe</span>
    </div>
    <button class="bg-gradient-to-br from-blue-500 to-purple-600 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">Read More</button>
  </div>
  <div class="mt-4 flex justify-around text-gray-600 dark:text-gray-400 text-sm">
    <div class="flex items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M18 3a1 1 0 00-1.447-.894L10 6l-6.553-3.894A1 1 0 002 3v14a1 1 0 001 1h14a1 1 0 001-1V3z" clip-rule="evenodd" />
      </svg>
      <span>Save</span>
    </div>
    <div class="flex items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
        <path d="M15 8a3 3 0 10-2.977-2.455l-4.78 2.49a3 3 0 00-4.633.908l-1.5-.8A3 3 0 105 12v1a1 1 0 100 2v1a1 1 0 100 2h2a1 1 0 100-2h1a1 1 0 100-2h2a1 1 0 100-2h3a3 3 0 10-3-3zm-3.154 9A3 3 0 1016 13.802v-4.036l-.078.04A2.005 2.005 0 0115 9a2 2 0 11-1.923 2.554l-.078.04V17z" />
      </svg>
      <span>Share</span>
    </div>
  </div>
</div>

機能コンポーネントコンポーネント

ブログやコンテンツの消費向けに設計されたシンプルなWebコンポーネントで、魅力的なマイクロインタラクションと、ダークテーマをサポートするグレースケールの配色が特徴です。

開けるプレビュー

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
  <div class="p-4">
    <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Blog Post Title</h2>
    <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa.</p>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-3" />
      <div class="text-sm">
        <p class="text-gray-800 dark:text-white">Author Name</p>
        <p class="text-gray-500 dark:text-gray-400">Feb 16, 2023</p>
      </div>
    </div>
  </div>
  <img src="https://picsum.photos/400/200" alt="Blog Post Image" class="w-full h-48 object-cover bg-gray-200 dark:bg-gray-700 transition-all duration-300 transform hover:scale-105" />
  <div class="p-4 bg-gray-100 dark:bg-gray-700">
    <button class="px-4 py-2 bg-gray-800 text-white font-semibold rounded-lg hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-200 transition duration-150 ease-in-out">Read More</button>
  </div>
</div>

1 ... 237 238 239 240 241 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント