検索コンポーネント

すべてのコンポーネント

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

ソーシャルコンポーネント

曇りガラスのような半透明の要素とぼかし効果、レスポンシブ効果、ダークテーマのサポートを備えた glassmorphism デザインを特徴とする Web コンポーネント。

                <div class="flex justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-500">
    <div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-80 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-lg w-full">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4 text-center">Connect with Us</h2>
        <div class="flex items-center justify-around flex-wrap mb-4">
            <div class="flex flex-col items-center">
                <img src="https://picsum.photos/80/80?random=1" alt="User Avatar" class="rounded-full mb-2">
                <p class="text-gray-800 dark:text-white">User 1</p>
                <a href="#" class="text-blue-500 hover:underline">Follow</a>
            </div>
            <div class="flex flex-col items-center">
                <img src="https://picsum.photos/80/80?random=2" alt="User Avatar" class="rounded-full mb-2">
                <p class="text-gray-800 dark:text-white">User 2</p>
                <a href="#" class="text-blue-500 hover:underline">Follow</a>
            </div>
            <div class="flex flex-col items-center">
                <img src="https://picsum.photos/80/80?random=3" alt="User Avatar" class="rounded-full mb-2">
                <p class="text-gray-800 dark:text-white">User 3</p>
                <a href="#" class="text-blue-500 hover:underline">Follow</a>
            </div>
        </div>
        <div class="text-center">
            <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300">View More</button>
        </div>
    </div>
</div>

製品ギャラリーコンポーネント

ダークモード用に設計されたレスポンシブ製品ギャラリーコンポーネントで、Tailwind CSSを使用した画像とアバターが特徴です。

開けるプレビュー

                <div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 1</h3>
                <p class="text-gray-400">$29.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 2</h3>
                <p class="text-gray-400">$39.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 3</h3>
                <p class="text-gray-400">$49.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=4" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 4</h3>
                <p class="text-gray-400">$59.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=5" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 5</h3>
                <p class="text-gray-400">$69.99</p>
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=6" alt="Product Image" class="w-full h-40 object-cover">
            <div class="p-4">
                <h3 class="font-semibold text-xl">Product Title 6</h3>
                <p class="text-gray-400">$79.99</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h2 class="text-xl font-semibold mb-2">Featured Seller</h2>
        <div class="flex items-center bg-gray-800 p-3 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div>
                <p class="font-semibold">John Doe</p>
                <p class="text-gray-400">Best Seller</p>
            </div>
        </div>
    </div>
</div>

Like/Reaction Buttons コンポーネント

マイクロインタラクションを備えた「いいね」ボタンと「リアクション」ボタンを備えたWebコンポーネントで、Tailwind CSSを使用したダークテーマのサポートがあります。

開けるプレビュー

                <div class="flex flex-col items-center justify-center p-4">
  <h2 class="text-xl font-semibold mb-4 dark:text-white">React to this</h2>
  <div class="flex space-x-4">
    <button class="group bg-blue-500 text-white px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300">
      <span class="flex items-center space-x-2">
        <img src="https://picsum.photos/20/20" alt="like" class="rounded-full">
        <span>Like</span>
      </span>
    </button>
    <button class="group bg-gray-300 text-gray-800 px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">
      <span class="flex items-center space-x-2">
        <img src="https://picsum.photos/20/20?random=1" alt="love" class="rounded-full">
        <span>Love</span>
      </span>
    </button>
    <button class="group bg-yellow-500 text-white px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-yellow-600 focus:outline-none focus:ring focus:ring-yellow-300">
      <span class="flex items-center space-x-2">
        <img src="https://picsum.photos/20/20?random=2" alt="laugh" class="rounded-full">
        <span>Laugh</span>
      </span>
    </button>
    <button class="group bg-red-500 text-white px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-red-600 focus:outline-none focus:ring focus:ring-red-300">
      <span class="flex items-center space-x-2">
        <img src="https://picsum.photos/20/20?random=3" alt="wow" class="rounded-full">
        <span>Wow</span>
      </span>
    </button>
  </div>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #1a1a1a;
      color: #ffffff;
    }
  }
</style>

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

ダークモードUI用に設計されたCAPTCHAコンポーネントで、レスポンシブエフェクトとダークテーマのサポートを備えています。

開けるプレビュー

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-lg font-semibold mb-4">Verify You're Human</h2>
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50/50" alt="Random Image" class="w-12 h-12 rounded-full mr-3" />
        <span class="flex-1 text-sm">Please identify the image below:</span>
    </div>
    <div class="mb-4">
        <img src="https://picsum.photos/250/150" alt="CAPTCHA Image" class="w-full h-auto rounded-md" />
    </div>
    <div class="flex space-x-4">
        <button class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Verify</button>
        <button class="bg-gray-500 hover:bg-gray-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Refresh</button>
    </div>
</div>

トップに戻るボタンコンポーネント

スキューモーフィックスタイルでデザインされたレスポンシブなBack to Topボタンは、ダークテーマのサポートとレスポンシブエフェクトを備えています。

開けるプレビュー

                <div class="fixed bottom-10 right-10 z-50">
    <a href="#top" class="bg-white dark:bg-gray-800 rounded-full shadow-lg p-3 transition-transform transform hover:scale-110"> 
        <img src="https://picsum.photos/50/50?random=1" alt="Back to Top" class="w-full h-full rounded-full">
    </a>
    <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white text-sm rounded-lg shadow-md p-2 mt-2 text-center">
        Back to Top
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white { background-color: #1f2937; }
    .bg-gray-200 { background-color: #4b5563; }
    .bg-gray-700 { background-color: #2d3748; }
    .text-gray-800 { color: #f7fafc; }
}
</style>

メディアコンポーネントコンポーネント

Tailwind CSS で設計された、魅力的なアニメーションとのマイクロインタラクションを特徴とするレスポンシブメディアコンポーネント。ダークテーマをサポートし、プレースホルダー画像とアバターが含まれています。

開けるプレビュー

                <div class="w-full max-w-xs bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105 hover:shadow-xl duration-300">
    <img src="https://picsum.photos/400/200" alt="Media Image" class="w-full h-32 object-cover">
    <div class="p-4">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-md">
            <div>
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Media Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Media description goes here. It can be a brief overview or any content relevant to the media.</p>
            </div>
        </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <button class="w-full py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-150">Watch Now</button>
    </div>
</div>

レトロヴィンテージモーダルコンポーネント

Tailwind CSSでデザインされたレスポンシブなレトロ/ビンテージモーダルコンポーネントで、ダークモードのサポートとノスタルジックな80年代/90年代の美学が含まれています。

開けるプレビュー

                <div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-75 transition-opacity" id="modal-wrapper">
    <div class="bg-white rounded-lg shadow-lg max-w-md w-full p-6 sm:p-8">
        <div class="flex justify-between items-center">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-300">Retro Modal Title</h2>
            <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200 focus:outline-none" id="modal-close">
                &times;
            </button>
        </div>
        <div class="mt-4">
            <img src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" class="w-full h-auto rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">This is a nostalgic modal component inspired by the vintage aesthetics of the 80s and 90s. It features a simple layout and dark mode support.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-300">John Doe</span>
            </div>
        </div>
        <div class="mt-6 flex justify-end">
            <button class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Action</button>
        </div>
    </div>
</div>
<!-- Dark Mode Styles -->
<style>
    @media (prefers-color-scheme: dark) {
        #modal-wrapper {
            background-color: rgba(31, 41, 55, 0.75);
        }
    }
</style>

アクティビティフィードコンポーネント

ダークテーマをサポートする 3D スタイルで設計されたレスポンシブアクティビティフィードコンポーネントで、奥行きとエンゲージメントのための 3 次元要素を組み込んでいます。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Activity Feed</h2>
    <div class="space-y-4">  
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Liked your post about web development.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">2 hours ago</span>
            </div>
        </div>
        
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Commented on your picture.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">5 hours ago</span>
            </div>
        </div>
        
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Mike Johnson</p>
                <p class="text-gray-600 dark:text-gray-400">Started following you.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">1 day ago</span>
            </div>
        </div>
        
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Emily Davis</p>
                <p class="text-gray-600 dark:text-gray-400">Shared your post.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">3 days ago</span>
            </div>
        </div>
    </div>
    
    <div class="mt-6 text-center">
        <img class="rounded-lg transition-transform transform hover:scale-105" src="https://picsum.photos/400/200?random=1" alt="Placeholder Image">
    </div>
</div>

フッターコンポーネント

レスポンシブエフェクトとTailwind CSSを使用したダークテーマのサポートを備えたBrutalismスタイルのフッターコンポーネント。

開けるプレビュー

                <footer class="bg-gray-800 text-white p-10 flex flex-col items-center justify-center">  <div class="flex flex-wrap justify-center">    <div class="m-5">      <h4 class="text-2xl font-bold mb-2">Contact Us</h4>      <p class="text-lg">Email: [email protected]</p>      <p class="text-lg">Phone: (123) 456-7890</p>    </div>    <div class="m-5">      <h4 class="text-2xl font-bold mb-2">Follow Us</h4>      <div class="flex space-x-4">        <a href="#" class="text-lg hover:text-gray-400">Facebook</a>        <a href="#" class="text-lg hover:text-gray-400">Twitter</a>        <a href="#" class="text-lg hover:text-gray-400">Instagram</a>      </div>    </div>    <div class="m-5">      <h4 class="text-2xl font-bold mb-2">About Us</h4>      <p class="text-lg">We are a company that values...</p>    </div>  </div>  <div class="flex flex-wrap justify-center mt-10">    <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1">    <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar 2">    <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/men/34.jpg" alt="Avatar 3">  </div>  <div class="mt-10 text-center">    <p class="text-sm">© 2023 Example Company. All Rights Reserved.</p>  </div>  <style>    @media (prefers-color-scheme: dark) {      .bg-gray-800 { background-color: #1a1a1a; }      .text-white { color: #f0f0f0; }      .hover\:text-gray-400:hover { color: #a0a0a0; }    }  </style> </footer>

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

Tailwind CSS を使用してマテリアルデザインの原則で設計されたレスポンシブコミュニティフォーラムコンポーネントで、ダークテーマのサポートとプレースホルダー画像が特徴です。

開けるプレビュー

                <div class="container mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4">
            <div class="flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>
            </div>
            <p class="text-gray-700 dark:text-gray-300">This is a great place to discuss various topics and share ideas with others. Feel free to start a conversation!</p>
            <img src="https://picsum.photos/400/200" alt="Community Discussion" class="rounded-lg shadow mt-2">
            <div class="mt-3">
                <span class="text-gray-500 dark:text-gray-400 text-sm">Posted on January 1, 2023</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4">
            <div class="flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Jane Smith</h3>
            </div>
            <p class="text-gray-700 dark:text-gray-300">I love the community here! Everyone is so friendly and welcoming. Looking forward to more discussions.</p>
            <img src="https://picsum.photos/400/201" alt="Community Discussion" class="rounded-lg shadow mt-2">
            <div class="mt-3">
                <span class="text-gray-500 dark:text-gray-400 text-sm">Posted on January 2, 2023</span>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Join the Conversation</h4>
        <textarea class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md" rows="4" placeholder="Share your thoughts..."></textarea>
        <button class="mt-2 bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Post</button>
    </div>
</div>

1 ... 297 298 299 300 301 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント