検索コンポーネント

すべてのコンポーネント

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

通知コンポーネント

Tailwind CSSを使用してダークモードで設計されたレスポンシブ通知コンポーネント。

                <div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg max-w-md mx-auto">
  <h2 class="text-xl font-semibold mb-4">Notifications</h2>
  <div class="space-y-4">
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">John Doe</p>
        <p>Just completed a new task.</p>
        <span class="text-gray-400 text-sm">10 minutes ago</span>
      </div>
    </div>
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">Jane Smith</p>
        <p>Commented on your post.</p>
        <span class="text-gray-400 text-sm">20 minutes ago</span>
      </div>
    </div>
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">Michael Brown</p>
        <p>Sent you a friend request.</p>
        <span class="text-gray-400 text-sm">30 minutes ago</span>
      </div>
    </div>
    <div class="flex items-start p-3 bg-gray-700 rounded">
      <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">Emily Davis</p>
        <p>Liked your photo.</p>
        <span class="text-gray-400 text-sm">1 hour ago</span>
      </div>
    </div>
  </div>
</div>

ダッシュボードコンポーネント

Tailwind CSSを使用して構築された、レスポンシブエフェクトとダークテーマのサポートを備えたフラットデザインを紹介するミニマリストのダッシュボードコンポーネント。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="container mx-auto px-4 py-8">
        <h2 class="text-3xl font-semibold text-gray-800 dark:text-white mb-6">Dashboard</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Users</h3>
                <p class="text-2xl font-bold text-gray-800 dark:text-white">1,234</p>
                <img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
            </div>
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Sales</h3>
                <p class="text-2xl font-bold text-gray-800 dark:text-white">567</p>
                <img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
            </div>
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Revenue</h3>
                <p class="text-2xl font-bold text-gray-800 dark:text-white">$12,345</p>
                <img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
            </div>
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">Sessions</h3>
                <p class="text-2xl font-bold text-gray-800 dark:text-white">1,890</p>
                <img src="https://picsum.photos/200" alt="Placeholder" class="mt-2 rounded-lg" />
            </div>
        </div>
        <div class="mt-8 bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white">Latest Users</h3>
            <ul class="divide-y divide-gray-200 dark:divide-gray-700">
                <li class="py-4 flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
                    <div>
                        <p class="text-gray-800 dark:text-white">John Doe</p>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
                    </div>
                </li>
                <li class="py-4 flex items-center">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
                    <div>
                        <p class="text-gray-800 dark:text-white">Jane Doe</p>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
                    </div>
                </li>
                <li class="py-4 flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4" />
                    <div>
                        <p class="text-gray-800 dark:text-white">Mike Smith</p>
                        <p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

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

レスポンシブエフェクトとダークテーマのサポートを備えたレトロなビンテージスタイルのギャラリーコンポーネント。

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Retro Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=4" alt="Gallery Image 4" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=5" alt="Gallery Image 5" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=6" alt="Gallery Image 6" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=7" alt="Gallery Image 7" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
        <div class="rounded-lg overflow-hidden shadow">
            <img src="https://picsum.photos/200/300?random=8" alt="Gallery Image 8" class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" />
        </div>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        .bg-white { background-color: #1a202c; }
        .text-gray-800 { color: #edf2f7; }
    }
</style>

フィードバックコンポーネント

魅力的なアニメーションにマイクロインタラクションを組み込んだレスポンシブフィードバックコンポーネント。ダークモードをサポートするように設計されており、プレースホルダー画像とアバターを使用してユーザーフィードバック用の要素を備えています。

開けるプレビュー

                <div class="flex flex-col items-center p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
  <h2 class="text-lg font-semibold dark:text-white mb-4">We Value Your Feedback!</h2>
  <div class="flex items-center mb-4">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
    <textarea class="ml-3 w-full h-24 p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-shadow duration-200 ease-in-out" placeholder="Share your thoughts..."></textarea>
  </div>
  <div class="flex justify-between w-full">
    <button class="bg-blue-600 text-white font-semibold py-2 px-4 rounded-md transition-transform transform hover:scale-105 duration-200 ease-in-out">Submit</button>
    <button class="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded-md hover:bg-gray-400 transition-colors duration-200 ease-in-out dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Cancel</button>
  </div>
  <p class="text-sm text-gray-500 dark:text-gray-400 mt-3">Your feedback helps us improve!</p>
</div>

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

奥行きとエンゲージメント、レスポンシブ効果、ダークモードのサポートのための3Dデザインスタイルを特徴とするメディア埋め込みコンポーネント。

開けるプレビュー

                <div class="max-w-sm mx-auto p-5 bg-white rounded-lg shadow-lg dark:bg-gray-800 transition-transform transform hover:scale-105 shadow-lg dark:shadow-2xl">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-lg" />
        <div class="ml-3">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">2 hours ago</p>
        </div>
    </div>
    <div class="mb-4">
        <iframe class="w-full h-64 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div>
        <p class="text-gray-700 dark:text-gray-300">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac neque euismod, scelerisque erat a, sollicitudin odio. Integer ac venenatis elit.
        </p>
    </div>
</div>

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

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

Tailwind CSS を使用した、レスポンシブ効果とダークテーマのサポートを備えた glassmorphism デザインスタイルを特徴とするコンポーネント。

開けるプレビュー

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg shadow-lg p-6 w-full max-w-md">
        <div class="flex flex-row items-center mb-4">
            <img class="w-16 h-16 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="ml-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-sm text-gray-600 dark:text-gray-300">Web Developer</p>
            </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">
            Passionate about building intuitive and dynamic user experiences. I love coding and design.
        </p>
        <img class="rounded-lg shadow-lg mb-4" src="https://picsum.photos/400/200" alt="Random Image" />
        <button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Contact Me</button>
    </div>
</div>
<style>
    /* Dark Mode CSS */
    @media (prefers-color-scheme: dark) {
        .bg-opacity-30 {
            background-color: rgba(255, 255, 255, 0.3);
        }
    }
</style>

認証コンポーネント

ダークモードUIで設計されたレスポンシブ認証コンポーネントで、プレースホルダー画像付きのログインフォームとサインアップフォームを備えています。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center bg-gray-900 p-4">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm w-full">
        <h2 class="text-white text-2xl mb-6 text-center">Welcome Back</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="email">Email</label>
                <input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="email" id="email" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-300 mb-2" for="password">Password</label>
                <input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="password" id="password" placeholder="********" required>
            </div>
            <button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 rounded focus:outline-none focus:ring focus:ring-indigo-400 transition duration-200">Login</button>
        </form>
        <div class="mt-4 text-center">
            <span class="text-gray-400">or</span>
        </div>
        <div class="mt-4">
            <p class="text-gray-400 text-center">Don't have an account? <a href="#" class="text-indigo-400 hover:underline">Sign up</a></p>
        </div>
    </div>
</div>

<div class="min-h-screen flex items-center justify-center bg-gray-900 p-4 mt-10">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm w-full">
        <h2 class="text-white text-2xl mb-6 text-center">Create Account</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="name">Name</label>
                <input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="text" id="name" placeholder="John Doe" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="email-signup">Email</label>
                <input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="email" id="email-signup" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-300 mb-2" for="password-signup">Password</label>
                <input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="password" id="password-signup" placeholder="********" required>
            </div>
            <button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 rounded focus:outline-none focus:ring focus:ring-indigo-400 transition duration-200">Sign Up</button>
        </form>
        <div class="mt-4 text-center">
            <span class="text-gray-400">or</span>
        </div>
        <div class="mt-4">
            <p class="text-gray-400 text-center">Already have an account? <a href="#" class="text-indigo-400 hover:underline">Login</a></p>
        </div>
    </div>
</div>

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

Tailwind CSSを使用したスキューモーフィックスタイルでデザインされたレスポンシブメガメニューコンポーネントで、ダークモードのサポートを備えています。

開けるプレビュー

                <div class="relative bg-white dark:bg-gray-800">
    <nav class="flex items-center justify-between p-4 shadow-lg">
        <div class="text-2xl font-bold text-gray-800 dark:text-white">My Website</div>
        <ul class="flex space-x-6">
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Home</a></li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">About</a></li>
            <li class="relative">
                <a href="#" class="text-gray-800 dark:text-white hover:underline">Services</a>
                <div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-700 shadow-lg rounded-lg transition duration-300 transform scale-95 hover:scale-100" id="menu">
                    <div class="p-4">
                        <h3 class="text-gray-800 dark:text-white font-semibold">Web Design</h3>
                        <img src="https://picsum.photos/200/100?random=1" alt="Web Design" class="my-2 rounded-lg shadow-lg">
                        <p class="text-gray-600 dark:text-gray-300">Creating visually appealing websites.</p>
                    </div>
                    <div class="border-t border-gray-200 dark:border-gray-600"></div>
                    <div class="p-4">
                        <h3 class="text-gray-800 dark:text-white font-semibold">SEO Services</h3>
                        <img src="https://picsum.photos/200/100?random=2" alt="SEO Services" class="my-2 rounded-lg shadow-lg">
                        <p class="text-gray-600 dark:text-gray-300">Optimizing search engine results.</p>
                    </div>
                    <div class="border-t border-gray-200 dark:border-gray-600"></div>
                    <div class="p-4">
                        <h3 class="text-gray-800 dark:text-white font-semibold">Marketing</h3>
                        <img src="https://picsum.photos/200/100?random=3" alt="Marketing" class="my-2 rounded-lg shadow-lg">
                        <p class="text-gray-600 dark:text-gray-300">Promoting your business effectively.</p>
                    </div>
                </div>
            </li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Contact</a></li>
        </ul>
    </nav>
    <div class="hidden md:block mt-4 p-4 bg-gray-100 dark:bg-gray-600 rounded-lg">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">Team Members</h2>
        <div class="flex space-x-4 mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
        </div>
    </div>
</div>
<style>
    /* Dark mode styles */
    .dark .bg-gray-800 {
        background-color: #333;
    }
    .dark .text-gray-800 {
        color: #f7fafc;
    }
</style>

チャットウィンドウコンポーネント

ブルータリズムスタイルでデザインされたチャットウィンドウコンポーネントで、ハイコントラスト、レスポンシブエフェクト、ダークテーマに対応しています。

開けるプレビュー

                <div class="max-w-lg mx-auto mt-10 p-4 bg-gray-100 rounded-lg shadow-lg dark:bg-gray-800 border-2 border-black dark:border-gray-600">
    <div class="flex items-center justify-between mb-4">
        <h2 class="text-xl font-bold text-black dark:text-white">Chat Room</h2>
        <button class="px-3 py-1 text-sm font-semibold text-white bg-blue-600 rounded hover:bg-blue-500 focus:outline-none">Join</button>
    </div>
    <div class="border-2 border-black dark:border-gray-600 h-64 overflow-y-scroll p-4">
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <span class="font-bold text-black dark:text-white">John Doe:</span>
                <p class="text-black dark:text-gray-200">Hello! How is everyone?</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <span class="font-bold text-black dark:text-white">Jane Smith:</span>
                <p class="text-black dark:text-gray-200">I'm doing great, thanks for asking!</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <span class="font-bold text-black dark:text-white">Mike Brown:</span>
                <p class="text-black dark:text-gray-200">Excited for the weekend!</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <span class="font-bold text-black dark:text-white">Emily White:</span>
                <p class="text-black dark:text-gray-200">Same here! Any plans?</p>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <textarea rows="3" class="w-full p-2 border-2 border-black dark:border-gray-600 rounded" placeholder="Type a message..."></textarea>
        <button class="mt-2 px-3 py-1 text-sm font-semibold text-white bg-green-600 rounded hover:bg-green-500 focus:outline-none">Send</button>
    </div>
</div>

ヘッダーコンポーネント

レスポンシブヘッダーコンポーネントで、小さくて魅力的なアニメーションとTailwind CSSを使用したダークテーマのサポートによるマイクロインタラクションが特徴です。

開けるプレビュー

                <header class="bg-white dark:bg-gray-800 shadow-md p-4 transition duration-500">
    <div class="flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/40" alt="Logo" class="h-10 w-10 rounded-full mr-2 transition-transform duration-300 transform hover:scale-110" />
            <h1 class="text-xl font-bold text-gray-800 dark:text-white transition-colors duration-500">My Website</h1>
        </div>
        <nav>
            <ul class="flex space-x-4">
                <li class="group">
                    <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-all duration-300">Home</a>
                </li>
                <li class="group">
                    <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-all duration-300">About</a>
                </li>
                <li class="group">
                    <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-all duration-300">Services</a>
                </li>
                <li class="group">
                    <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-all duration-300">Contact</a>
                </li>
            </ul>
        </nav>
        <div class="relative">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-600 transition-transform duration-300 transform hover:scale-110" />
        </div>
    </div>
</header>

1 ... 298 299 300 301 302 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント