検索コンポーネント

すべてのコンポーネント

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

鮮やかな色のNeumorphismユーザープロファイルコンポーネント

ビジネス/企業のWebサイト用の鮮やかな色のNeumorphismユーザープロファイルコンポーネント、ダークテーマをサポートするレスポンシブデザイン。

                <div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-10">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">

    <!-- Profile Card 1 -->
    <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="flex flex-col items-center pb-10">
        <img class="w-24 h-24 mb-3 rounded-full shadow-neumorphism-light dark:shadow-neumorphism-dark" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Bonnie image"/>
        <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">Bonnie Green</h5>
        <span class="text-sm text-gray-500 dark:text-gray-400">UI/UX Designer</span>
        <div class="flex mt-4 space-x-3 md:mt-6">
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:ring-4 focus:outline-none focus:ring-indigo-300 dark:bg-indigo-500 dark:hover:bg-indigo-600 dark:focus:ring-indigo-800 shadow-neumorphism-light dark:shadow-neumorphism-dark">View Profile</a>
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">Message</a>
        </div>
      </div>
    </div>

    <!-- Profile Card 2 -->
    <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="flex flex-col items-center pb-10">
        <img class="w-24 h-24 mb-3 rounded-full shadow-neumorphism-light dark:shadow-neumorphism-dark" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Bonnie image"/>
        <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">Jese Leos</h5>
        <span class="text-sm text-gray-500 dark:text-gray-400">Marketing Specialist</span>
        <div class="flex mt-4 space-x-3 md:mt-6">
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-pink-600 rounded-lg hover:bg-pink-700 focus:ring-4 focus-outline-none focus:ring-pink-300 dark:bg-pink-500 dark:hover:bg-pink-600 dark:focus:ring-pink-800 shadow-neumorphism-light dark:shadow-neumorphism-dark">View Profile</a>
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 focus:ring-4 focus-outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">Message</a>
        </div>
      </div>
    </div>

    <!-- Profile Card 3 -->
    <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="flex flex-col items-center pb-10">
        <img class="w-24 h-24 mb-3 rounded-full shadow-neumorphism-light dark:shadow-neumorphism-dark" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Bonnie image"/>
        <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">Robert Gough</h5>
        <span class="text-sm text-gray-500 dark:text-gray-400">Software Engineer</span>
        <div class="flex mt-4 space-x-3 md:mt-6">
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-green-600 rounded-lg hover:bg-green-700 focus:ring-4 focus-outline-none focus:ring-green-300 dark:bg-green-500 dark:hover:bg-green-600 dark:focus:ring-green-800 shadow-neumorphism-light dark:shadow-neumorphism-dark">View Profile</a>
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 focus:ring-4 focus-outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">Message</a>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
.shadow-neumorphism-light {
  box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}

.dark .shadow-neumorphism-dark {
  box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #666666;
}
</style>

ダークモードプログレスバーコンポーネント

ビジネス/企業Webサイト用のレスポンシブダークモードプログレスバーコンポーネントで、鮮やかな色とインタラクティブな要素を利用しています。

開けるプレビュー

                <div class="p-6 max-w-md mx-auto bg-gray-800 rounded-xl shadow-md space-y-4">
    <h2 class="text-2xl font-bold text-white text-center">Progress Tracker</h2>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 1</span>
        <span class="text-sm text-gray-400">75%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-green-500 h-4 rounded-full" style="width: 75%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 2</span>
        <span class="text-sm text-gray-400">50%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-yellow-500 h-4 rounded-full" style="width: 50%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 3</span>
        <span class="text-sm text-gray-400">30%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-red-500 h-4 rounded-full" style="width: 30%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 4</span>
        <span class="text-sm text-gray-400">10%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-blue-500 h-4 rounded-full" style="width: 10%;"></div>
    </div>
</div>

CAPTCHAコンポーネント

ポートフォリオを展示するためのミニマリスト/フラットデザインのCAPTCHAコンポーネントで、ダークモードをサポートしたレスポンシブです。

開けるプレビュー

                <div class="flex flex-col items-center justify-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Verify You're Human</h2>
    <div class="flex items-center justify-center mb-4">
        <img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="rounded-lg border border-gray-300 dark:border-gray-600" />
    </div>
    <p class="text-gray-600 dark:text-gray-400 mb-4">Please complete the CAPTCHA to prove you are human.</p>
    <div class="flex flex-col space-y-4 w-full">
        <input type="text" placeholder="Enter the characters you see" class="border border-gray-300 dark:border-gray-600 rounded p-2 focus:outline-none focus:ring focus:ring-gray-500 dark:focus:ring-gray-600" />
        <button class="bg-gray-800 text-white rounded p-2 hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Submit</button>
    </div>
    <div class="flex items-center justify-between mt-4 text-sm text-gray-600 dark:text-gray-400">
        <span>Need a new CAPTCHA? <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Refresh</a></span>
        <span>Help? <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Contact Us</a></span>
    </div>
</div>

レトロ/ビンテージEコマースフッター

Eコマース向けの、アースカラー、シンプルなレイアウト、レスポンシブデザイン、ダークテーマのサポートを備えたレトロ/ビンテージフッターナビゲーションコンポーネント。

開けるプレビュー

                <footer class="bg-stone-100 text-amber-900 dark:bg-stone-900 dark:text-amber-100 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-1/4 mb-4 md:mb-0">
        <h3 class="text-lg font-bold mb-2">E-commerce Store</h3>
        <p class="text-sm">© 2023 All rights reserved.</p>
      </div>
      <div class="w-full md:w-1/4 mb-4 md:mb-0">
        <h4 class="text-md font-semibold mb-2">Quick Links</h4>
        <ul class="text-sm">
          <li class="mb-1"><a href="#" class="hover:underline">Home</a></li>
          <li class="mb-1"><a href="#" class="hover:underline">Shop</a></li>
          <li class="mb-1"><a href="#" class="hover:underline">About Us</a></li>
          <li class="mb-1"><a href="#" class="hover:underline">Contact</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4 mb-4 md:mb-0">
        <h4 class="text-md font-semibold mb-2">Follow Us</h4>
        <div class="flex space-x-4">
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300"><i class="fab fa-facebook-f"></i></a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300"><i class="fab fa-twitter"></i></a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300"><i class="fab fa-instagram"></i></a>
        </div>
      </div>
      <div class="w-full md:w-1/4 mb-4 md:mb-0">
        <h4 class="text-md font-semibold mb-2">Contact Us</h4>
        <p class="text-sm">123 Retro Lane</p>
        <p class="text-sm">Vintage City, VC 45678</p>
        <p class="text-sm">[email protected]</p>
        <p class="text-sm">+(123) 456-7890</p>
      </div>
    </div>
  </div>
</footer>

スティッキーナビゲーションコンポーネント - ニューモーフィズム

Neumorphismデザイン、補色スキーム、ダークテーマのサポートを備えたレスポンシブスティッキーナビゲーションコンポーネントで、ポートフォリオWebサイトに適しています。Tailwind CSS をダークモードクラスで使用し、Neumorphism エフェクトの微妙なシャドウを含めます。

開けるプレビュー

                <nav class="sticky top-0 z-10 bg-gray-200 dark:bg-gray-800 p-4 transition-all duration-300 ease-in-out shadow-neumorphism-light dark:shadow-neumorphism-dark">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-gray-800 dark:text-white text-lg font-bold">Your Logo</div>
    <ul class="flex space-x-4">
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
      </li>
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
      </li>
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Portfolio</a>
      </li>
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<style>
.shadow-neumorphism-light {
  box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}

.dark .shadow-neumorphism-dark {
  box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #545454;
}
</style>

カルーセルスライダーコンポーネント

ダッシュボード用に設計されたレスポンシブなカルーセルスライダーコンポーネントで、ダークモードをサポートするマイクロインタラクションと鮮やかな色が特徴です。

開けるプレビュー

                <div class="relative w-full max-w-screen-lg mx-auto">
    <div class="overflow-hidden">
        <div class="flex transition-transform duration-300 ease-in-out" style="transform: translateX(0);"><!-- Previous Transform: translateX(-100%) -->
            <div class="flex-shrink-0 w-full">
                <img src="https://picsum.photos/800/400?random=1" alt="Slide 1" class="w-full h-auto rounded-lg" />
                <div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
                    <h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 1 Title</h3>
                    <p class="text-gray-800 dark:text-gray-300">Description for slide 1.</p>
                </div>
            </div>
            <div class="flex-shrink-0 w-full">
                <img src="https://picsum.photos/800/400?random=2" alt="Slide 2" class="w-full h-auto rounded-lg" />
                <div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
                    <h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 2 Title</h3>
                    <p class="text-gray-800 dark:text-gray-300">Description for slide 2.</p>
                </div>
            </div>
            <div class="flex-shrink-0 w-full">
                <img src="https://picsum.photos/800/400?random=3" alt="Slide 3" class="w-full h-auto rounded-lg" />
                <div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
                    <h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 3 Title</h3>
                    <p class="text-gray-800 dark:text-gray-300">Description for slide 3.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="absolute top-1/2 left-0 transform -translate-y-1/2">
        <button class="bg-white text-blue-600 dark:bg-gray-800 dark:text-blue-400 hover:scale-110 transition-transform duration-200 rounded-full p-2 shadow-md">
            &#10094;
        </button>
    </div>
    <div class="absolute top-1/2 right-0 transform -translate-y-1/2">
        <button class="bg-white text-blue-600 dark:bg-gray-800 dark:text-blue-400 hover:scale-110 transition-transform duration-200 rounded-full p-2 shadow-md">
            &#10095;
        </button>
    </div>
    <div class="flex justify-center mt-4 space-x-2">
        <button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
        <button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
        <button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
    </div>
</div>

Product Reviews コンポーネント

ビジネスWebサイト向けに設計された、マイクロインタラクションを備えた複雑で魅力的な製品レビューコンポーネント。このコンポーネントは、Tailwind CSS を使用したダークをテーマにしたレスポンシブデザインを特徴としており、アニメーションと類似の色に基づく配色が組み込まれています。

開けるプレビュー

                <div class="bg-gray-900 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-100 dark:text-gray-200 mb-4">Product Reviews</h2>
    <div class="space-y-4">
        <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
            <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">John Doe</h3>
                    <p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
                </div>
            </div>
            <p class="text-gray-300 dark:text-gray-400 mb-2">"This product exceeded my expectations! Great quality and fast shipping. Highly recommend!"</p>
            <div class="flex items-center">
                <span class="text-yellow-400">★ ★ ★ ★ ☆</span>
                <span class="ml-2 text-gray-400 dark:text-gray-500">4/5</span>
            </div>
        </div>
        <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
            <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">Jane Smith</h3>
                    <p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
                </div>
            </div>
            <p class="text-gray-300 dark:text-gray-400 mb-2">"I had a great experience with this product! The quality is impressive and it works as advertised."</p>
            <div class="flex items-center">
                <span class="text-yellow-400">★ ★ ★ ★ ★</span>
                <span class="ml-2 text-gray-400 dark:text-gray-500">5/5</span>
            </div>
        </div>
        <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
            <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">Mike Johnson</h3>
                    <p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
                </div>
            </div>
            <p class="text-gray-300 dark:text-gray-400 mb-2">"Good product, but it took a bit longer to arrive than I expected. Overall satisfied!"</p>
            <div class="flex items-center">
                <span class="text-yellow-400">★ ★ ★ ★ ☆</span>
                <span class="ml-2 text-gray-400 dark:text-gray-500">4/5</span>
            </div>
        </div>
    </div>
</div>

ビデオプレーヤーコンポーネント

ブログやコンテンツの消費向けに設計されたレスポンシブビデオプレーヤーコンポーネントで、マイクロインタラクションとパステルカラースキームを備えています。再生/一時停止機能とボリュームコントロールが含まれています。このデザインには、ダークモードのサポートも含まれています。

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto overflow-hidden">
    <div class="relative">
        <img src="https://picsum.photos/500/300" class="w-full h-48 object-cover" alt="Video Thumbnail">
        <div class="absolute bottom-0 left-0 right-0 bg-gray-900 bg-opacity-50 p-2 flex items-center justify-between">
            <span class="text-white">Video Title</span>
            <div class="flex items-center">
                <button class="text-white p-1 hover:bg-gray-700 rounded-md transition duration-200">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
                </button>
                <input type="range" class="ml-2 w-24 slider slider-dark dark:bg-gray-700" min="0" max="100" value="50">
            </div>
        </div>
    </div>
    <div class="p-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full mr-2" alt="User Avatar">
            <span class="text-gray-800 dark:text-gray-200">User Name</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description of the video content. It provides insight into what the video is about and engages the user to watch the video.</p>
    </div>
</div>

カートに入れるボタンコンポーネント

eコマースアプリケーション用のレトロ/ビンテージスタイルの「カートに追加」ボタンコンポーネント。このボタンは、80年代と90年代に触発されたノスタルジックなデザインで、類似の配色を使用し、インタラクティブ性のためのエフェクトを備えています。レスポンシブで、ダークテーマをサポートしています。

開けるプレビュー

                <div class="flex flex-col items-center">
    <div class="bg-gradient-to-r from-purple-500 to-pink-500 p-6 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 dark:from-purple-700 dark:to-pink-700">
        <img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-auto rounded-t-lg" />
        <div class="mt-2 flex flex-col items-center">
            <p class="text-white text-lg font-bold dark:text-gray-300">Cool Retro Product</p>
            <span class="text-yellow-200 dark:text-yellow-300">$19.99</span>
            <button class="mt-4 bg-yellow-400 text-white py-2 px-4 rounded-full transition duration-300 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700">
                <span class="flex items-center justify-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2" />
                    Add to Cart
                </span>
            </button>
        </div>
    </div>
</div>

コミュニティフォーラムコンポーネント

ソーシャルメディア用のグレースケールのシンプルなブルータリストコミュニティフォーラムコンポーネントで、レスポンシブデザインとダークモードがサポートされています。

開けるプレビュー

                <div class="bg-white dark:bg-black text-black dark:text-white min-h-screen p-4">
  <div class="container mx-auto">
    <h1 class="text-2xl font-bold mb-4 text-center">Community Forum</h1>
    <div class="space-y-4">
      <!-- Forum Post -->
      <div class="border border-black dark:border-white p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white">
          <p class="font-bold">User One</p>
        </div>
        <p class="mb-2">This is a sample forum post content.</p>
        <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
          <span>Posted on: 2023-10-27</span>
          <span>Replies: 5</span>
        </div>
      </div>

      <!-- Forum Post -->
      <div class="border border-black dark:border-white p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white">
          <p class="font-bold">User Two</p>
        </div>
        <p class="mb-2">Another example forum post here.</p>
        <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
          <span>Posted on: 2023-10-27</span>
          <span>Replies: 10</span>
        </div>
      </div>

       <!-- Forum Post -->
      <div class="border border-black dark:border-white p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white">
          <p class="font-bold">User Three</p>
        </div>
        <p class="mb-2">Yet another example forum post to fill the space.</p>
        <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
          <span>Posted on: 2023-10-27</span>
          <span>Replies: 2</span>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 229 230 231 232 233 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント