検索コンポーネント

すべてのコンポーネント

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

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

ビジネス/企業での使用に適した単色の配色を備えたダークモード用に設計された複雑なダッシュボードコンポーネント。豊富なインタラクティブ要素を備えており、応答性に優れています。

                <div class="min-h-screen bg-gray-900 text-gray-100 flex flex-col">
    <header class="bg-gray-800 p-4 flex justify-between items-center">
        <h1 class="text-2xl font-bold">Dashboard</h1>
        <nav class="flex space-x-4">
            <a href="#" class="hover:underline">Home</a>
            <a href="#" class="hover:underline">Reports</a>
            <a href="#" class="hover:underline">Settings</a>
        </nav>
    </header>

    <main class="flex-1 p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Overview</h2>
            <img src="https://picsum.photos/400/200" alt="Overview Image" class="rounded-lg mb-2" />
            <p class="text-sm">Quick insights into the company metrics.</p>
        </div>

        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Stats</h2>
            <img src="https://picsum.photos/400/200?random=1" alt="Stats Image" class="rounded-lg mb-2" />
            <p class="text-sm">Detailed statistics overview.</p>
        </div>

        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Team</h2>
            <div class="flex flex-wrap">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-700 mr-2 mb-2" />
                <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-700 mr-2 mb-2" />
                <img src="https://randomuser.me/api/portraits/men/34.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-700 mr-2 mb-2" />
             </div>
        </div>

        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Sales</h2>
            <img src="https://picsum.photos/400/200?random=2" alt="Sales Image" class="rounded-lg mb-2" />
            <p class="text-sm">Current sales metrics and trends.</p>
        </div>

        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Notifications</h2>
            <ul class="list-disc pl-5">
                <li class="text-sm">New project updates</li>
                <li class="text-sm">User feedback received</li>
                <li class="text-sm">System maintenance scheduled</li>
            </ul>
        </div>

        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <h2 class="font-semibold text-xl mb-2">Activities</h2>
            <p class="text-sm">Recent team activities will be displayed here.</p>
        </div>
    </main>

    <footer class="bg-gray-800 p-4 text-center">
        <p class="text-sm">&copy; 2023 Your Company. All Rights Reserved.</p>
    </footer>
</div>

製品カードコンポーネント

スキューモーフィズムスタイル、アースカラーの配色、ダークテーマのサポートで設計されたレスポンシブ製品カードコンポーネント。ダッシュボードに最適です。

開けるプレビュー

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
        <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/300/200?random=1" alt="Product Image">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Product Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">This is a short description of the product.</p>
        <div class="flex items-center mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <p class="ml-2 text-gray-800 dark:text-gray-200">User Name</p>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
        <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/300/200?random=2" alt="Product Image">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Product Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">This is a short description of the product.</p>
        <div class="flex items-center mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
            <p class="ml-2 text-gray-800 dark:text-gray-200">User Name</p>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
        <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/300/200?random=3" alt="Product Image">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Product Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">This is a short description of the product.</p>
        <div class="flex items-center mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
            <p class="ml-2 text-gray-800 dark:text-gray-200">User Name</p>
        </div>
    </div>
</div>

360°ビューアコンポーネント

3Dデザインスタイルとダークモードのサポートを備えたダッシュボード用に設計されたレスポンシブ360°ビューアコンポーネント。

開けるプレビュー

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-white mb-8">360° Viewer</h1>
    <div class="relative w-full max-w-lg bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img src="https://picsum.photos/600/400" alt="360° View" class="w-full h-full object-cover rounded-lg">
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="bg-white dark:bg-gray-850 p-4 rounded-lg shadow text-center">
                <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Explore Data</h2>
                <p class="text-gray-600 dark:text-gray-300">Interact with the 3D model to visualize data points.</p>
            </div>
        </div>
    </div>
    <div class="grid grid-cols-3 gap-4 mt-8 w-full max-w-lg">
        <div class="bg-indigo-500 dark:bg-indigo-700 text-white p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-semibold">Data Point 1</h3>
            <p class="text-sm">Details about this data point.</p>
        </div>
        <div class="bg-orange-500 dark:bg-orange-700 text-white p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-semibold">Data Point 2</h3>
            <p class="text-sm">Details about this data point.</p>
        </div>
        <div class="bg-teal-500 dark:bg-teal-700 text-white p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-semibold">Data Point 3</h3>
            <p class="text-sm">Details about this data point.</p>
        </div>
    </div>
    <div class="mt-8 flex items-center justify-center">
        <a href="#" class="bg-indigo-500 dark:bg-indigo-700 text-white py-2 px-4 rounded-lg shadow hover:bg-indigo-600 dark:hover:bg-indigo-800">Explore More</a>
    </div>
</div>

2要素認証コンポーネント

ダークテーマをサポートするTailwind CSSを使用したレスポンシブな2要素認証コンポーネント。ミニマリスト/フラットなデザイン、単色の配色、電子商取引に適した複数のインタラクティブ要素を備えた複雑なレイアウトが特徴です。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Two-Factor Authentication</h2>
    <p class="text-center text-gray-600 dark:text-gray-400 mb-6">Please enter the 6-digit code sent to your phone number.</p>
    <div class="flex justify-center space-x-2 mb-6">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
    </div>
    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded focus:outline-none focus:shadow-outline transition duration-200 dark:bg-blue-700 dark:hover:bg-blue-800">
      Verify Code
    </button>
    <div class="mt-6 text-center">
      <a href="#" class="text-blue-600 hover:underline dark:text-blue-500 text-sm">Resend Code</a>
      <span class="mx-2 text-gray-400 dark:text-gray-600">|</span>
      <a href="#" class="text-blue-600 hover:underline dark:text-blue-500 text-sm">Use another method</a>
    </div>
  </div>
</div>

ニューモーフィズムナビゲーション

eコマース用のNeumorphismスタイルを備えたシンプルなレスポンシブナビゲーションコンポーネント。

開けるプレビュー

                <nav class="p-4 bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <ul class="flex justify-center space-x-4">
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Home</a></li>
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Shop</a></li>
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Categories</a></li>
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Cart</a></li>
  </ul>
</nav>

Glassmorphismカルーセルスライダー

glassmorphismスタイルのレスポンシブカルーセルスライダーコンポーネントで、ブログやコンテンツの消費に適しています。複数のコンテンツスライド、すりガラスのような要素が特徴で、明るいテーマと暗いテーマの両方に対応するように設計されています。

開けるプレビュー

                <div class="relative w-full max-w-4xl mx-auto mt-10">
  <div class="flex overflow-hidden rounded-lg shadow-lg">
    <div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=1" alt="Carousel Slide 1">
      <div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 1</div>
    </div>
    <div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=2" alt="Carousel Slide 2">
      <div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 2</div>
    </div>
    <div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=3" alt="Carousel Slide 3">
      <div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 3</div>
    </div>
  </div>
  <div class="flex justify-center mt-4">
    <button class="px-4 py-2 mx-1 text-sm font-semibold text-white bg-blue-500 rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Previous</button>
    <button class="px-4 py-2 mx-1 text-sm font-semibold text-white bg-blue-500 rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Next</button>
  </div>
  <div class="mt-4 flex justify-around">
    <div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1">
      <p class="text-center text-white mt-2">Author 1</p>
    </div>
    <div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar 2">
      <p class="text-center text-white mt-2">Author 2</p>
    </div>
    <div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar 3">
      <p class="text-center text-white mt-2">Author 3</p>
    </div>
  </div>
</div>

ログイン/サインアップコンポーネント

マテリアルデザインスタイルでデザインされたレスポンシブログイン/サインアップコンポーネントで、ダークテーマのサポートと補色スキームを備え、ソーシャルメディアインターフェースに合わせて調整されています。

開けるプレビュー

                <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 shadow-md rounded-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Welcome</h2>
        <p class="text-center text-gray-600 dark:text-gray-400 mb-4">Sign in to continue or create a new account.</p>
        <div class="space-y-4">
            <form>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="email">Email</label>
                    <input type="email" id="email" class="input-class" placeholder="[email protected]" required />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="password">Password</label>
                    <input type="password" id="password" class="input-class" placeholder="********" required />
                </div>
                <div>
                    <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400">Login</button>
                </div>
                <div class="text-center text-gray-600 dark:text-gray-400">
                    <p>Or</p>
                </div>
                <div>
                    <button type="button" class="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-green-500 dark:hover:bg-green-400">Sign Up</button>
                </div>
            </form>
            <div class="flex items-center justify-center space-x-4">
                <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-700 shadow-sm hover:shadow-lg transform transition duration-300">
                    <img src="https://picsum.photos/50" alt="Google" class="rounded-full" />
                </a>
                <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-700 shadow-sm hover:shadow-lg transform transition duration-300">
                    <img src="https://picsum.photos/50" alt="Facebook" class="rounded-full" />
                </a>
                <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-700 shadow-sm hover:shadow-lg transform transition duration-300">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Twitter" class="rounded-full" />
                </a>
            </div>
        </div>
    </div>
</div>

<style>
    .input-class {
        display: block;
        width: 100%;
        padding: 0.5rem;
        margin-top: 0.25rem;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        transition: border-color 0.2s;
        color: #4b5563;
    }
    .input-class:focus {
        outline: none;
        border-color: #3b82f6;
    }
</style>

ブログ機能コンポーネント

3Dデザイン、補色配色、ブログの適度な複雑さ、ダークテーマのサポートによるレスポンシブを備えた機能コンポーネント。JSはなく、HTMLとTailwindだけです。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
        <div class="text-center">
            <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl">
                From the Blog
            </h2>
            <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 dark:text-gray-400 sm:mt-4">
                Explore our latest articles and insights.
            </p>
        </div>

        <div class="mt-12 grid gap-5 lg:grid-cols-3 lg:max-w-none">
            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog1/400/300" alt="">
                </div>
                <div class="flex-1 p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
                            <a href="#" class="hover:underline">
                                Article
                            </a>
                        </p>
                        <a href="#" class="block mt-2">
                            <p class="text-xl font-semibold text-gray-900 dark:text-white">
                                Boost your conversion rate
                            </p>
                            <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
                            </p>
                        </a>
                    </div>
                    <div class="mt-6 flex items-center">
                        <div class="flex-shrink-0">
                            <a href="#">
                                <span class="sr-only">Roel Aufderhar</span>
                                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                            </a>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                <a href="#" class="hover:underline">
                                    Roel Aufderhar
                                </a>
                            </p>
                            <div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
                                <time datetime="2020-03-16">Mar 16, 2020</time>
                                <span aria-hidden="true">
                                    &middot;
                                </span>
                                <span>
                                    6 min read
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog2/400/300" alt="">
                </div>
                <div class="flex-1 p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
                            <a href="#" class="hover:underline">
                                Video
                            </a>
                        </p>
                        <a href="#" class="block mt-2">
                            <p class="text-xl font-semibold text-gray-900 dark:text-white">
                                How to use search engine optimization to drive traffic to your site
                            </p>
                            <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
                            </p>
                        </a>
                    </div>
                    <div class="mt-6 flex items-center">
                        <div class="flex-shrink-0">
                            <a href="#">
                                <span class="sr-only">Brenna Goyette</span>
                                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
                            </a>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                <a href="#" class="hover:underline">
                                    Brenna Goyette
                                </a>
                            </p>
                            <div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
                                <time datetime="2020-03-16">Mar 16, 2020</time>
                                <span aria-hidden="true">
                                    &middot;
                                </span>
                                <span>
                                    6 min read
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog3/400/300" alt="">
                </div>
                <div class="flex-1 p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
                            <a href="#" class="hover:underline">
                                Case Study
                            </a>
                        </p>
                        <a href="#" class="block mt-2">
                            <p class="text-xl font-semibold text-gray-900 dark:text-white">
                                Improve your customer experience
                            </p>
                            <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
                            </p>
                        </a>
                    </div>
                    <div class="mt-6 flex items-center">
                        <div class="flex-shrink-0">
                            <a href="#">
                                <span class="sr-only">Daniela Metz</span>
                                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/56.jpg" alt="">
                            </a>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                <a href="#" class="hover:underline">
                                    Daniela Metz
                                </a>
                            </p>
                            <div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
                                <time datetime="2020-03-16">Mar 16, 2020</time>
                                <span aria-hidden="true">
                                    &middot;
                                </span>
                                <span>
                                    6 min read
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CAPTCHAコンポーネント

マテリアルデザインの原則とパステルカラーの配色でデザインされたシンプルなCAPTCHAコンポーネントで、ビジネス/企業のWebサイトに適しています。

開けるプレビュー

                <div class="max-w-md mx-auto p-5 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center">CAPTCHA Verification</h2>
    <div class="mt-4 flex flex-col items-center">
        <img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="w-full h-auto rounded-lg shadow">
        <div class="mt-3 flex items-center">
            <label class="text-gray-600 dark:text-gray-400 mr-2" for="captchaInput">Please type the text above:</label>
            <input type="text" id="captchaInput" class="border border-gray-300 rounded-lg p-2 dark:bg-gray-700 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Enter CAPTCHA">
        </div>
        <button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-600">Verify</button>
    </div>
</div>

パスワードリセットコンポーネント

ダークモードをサポートするレスポンシブパスワードリセットコンポーネント

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-400 to-purple-600 dark:from-gray-800 dark:to-gray-900">
  <div class="w-full max-w-md p-8 space-y-6 bg-white rounded shadow-lg dark:bg-gray-700">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Reset Password</h2>
    <form class="space-y-4">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email Address</label>
        <input type="email" id="email" name="email" required class="w-full px-3 py-2 mt-1 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-600 dark:text-white dark:border-gray-500">
      </div>
      <div>
        <button type="submit" class="w-full px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800">Send Reset Link</button>
      </div>
    </form>
  </div>
</div>

1 ... 214 215 216 217 218 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント