検索コンポーネント

すべてのコンポーネント

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

スキューモーフィックログインフォーム

Skeuomorphismデザイン、単色の配色、適度な複雑さを備えたレスポンシブログインフォームで、ソーシャルメディアプラットフォーム向けに設計されています。Tailwind CSS を使用したダークモードのサポートが含まれています。

                <form class="max-w-sm mx-auto p-8 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark">
  <div class="mb-6">
    <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
    <input type="email" id="email" class="shadow-inner appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="Enter your email">
  </div>
  <div class="mb-6">
    <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
    <input type="password" id="password" class="shadow-inner appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="Enter your password">
  </div>
  <div class="flex items-center justify-between">
    <button class="bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold py-3 px-6 rounded focus:outline-none focus:shadow-outline transform transition duration-300 ease-in-out hover:scale-105" type="button">
      Sign In
    </button>
    <a class="inline-block align-baseline font-bold text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-500" href="#">
      Forgot Password?
    </a>
  </div>
  <div class="mt-6 text-center">
    <p class="text-gray-600 dark:text-gray-400 text-sm">Or sign in with:</p>
    <div class="flex justify-center gap-4 mt-2">
      <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        <i class="fab fa-google text-xl"></i>
      </button>
      <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        <i class="fab fa-facebook text-xl"></i>
      </button>
      <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        <i class="fab fa-twitter text-xl"></i>
      </button>
    </div>
  </div>
</form>

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

3Dデザイン要素、グレースケールの配色、ビジネス/企業Webサイト向けのダークテーマサポートを備えたレスポンシブユーザーメンションコンポーネント。Tailwind CSSを使用し、プレースホルダー画像/アバターが含まれています。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden relative">
      <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 opacity-50"></div>
      <div class="relative p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">User Mentions</h2>
        <div class="space-y-4">
          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.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 text-sm">Mentioned you in a comment.</p>
            </div>
          </div>

          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.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 text-sm">Replied to your thread.</p>
            </div>
          </div>

          <div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
            <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
            <div>
              <p class="text-gray-800 dark:text-gray-200 font-semibold">Peter Jones</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

3D類似のシンプルなブログフッター

Tailwind CSS を使用したダークテーマをサポートするレスポンシブフッターコンポーネント。フッターは、類似の色を使用したシンプルな3Dデザインです。ブログ/コンテンツWebサイト用に最適化されています。

開けるプレビュー

                <footer class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 text-white py-8 px-4 transform perspective-1000 rotateX-6 translateZ-10 hover:rotateX-0 hover:translateZ-0 transition-all duration-500">
  <div class="container mx-auto flex flex-wrap justify-between items-center">
    <div class="w-full md:w-1/3 text-center md:text-left mb-4 md:mb-0">
      <h3 class="text-xl font-bold mb-2">My Blog</h3>
      <p>&copy; 2023 My Blog. All rights reserved.</p>
    </div>
    <div class="w-full md:w-1/3 text-center mb-4 md:mb-0">
      <h3 class="text-xl font-bold mb-2">Quick Links</h3>
      <ul>
        <li><a href="#" class="hover:underline">Home</a></li>
        <li><a href="#" class="hover:underline">Blog</a></li>
        <li><a href="#" class="hover:underline">About</a></li>
        <li><a href="#" class="hover:underline">Contact</a></li>
      </ul>
    </div>
    <div class="w-full md:w-1/3 text-center md:text-right">
      <h3 class="text-xl font-bold mb-2">Follow Me</h3>
      <div class="flex justify-center md:justify-end space-x-4">
        <a href="#" class="hover:text-gray-300"><i class="fab fa-twitter"></i></a>
        <a href="#" class="hover:text-gray-300"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="hover:text-gray-300"><i class="fab fa-instagram"></i></a>
      </div>
    </div>
  </div>
</footer>

Retro Maps コンポーネント

レトロ/ビンテージの美学、鮮やかな配色、ビジネス/企業目的を備えた、シンプルでレスポンシブなダークモード互換のマップコンポーネントで、Tailwind CSSで構築されています。

開けるプレビュー

                <section class="bg-gray-100 dark:bg-gray-900 py-12">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Our Location</h2>
    <div class="relative">
      <img src="https://picsum.photos/seed/maps/800/400" alt="Map of our location" class="w-full h-96 object-cover rounded-lg shadow-lg">
      <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-50 rounded-lg"></div>
      <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
        <h3 class="text-2xl font-semibold mb-2">Find Us Here</h3>
        <p class="text-gray-300">123 Main Street, Anytown, USA</p>
      </div>
    </div>
  </div>
</section>

コンテンツリンクにスキップする

Glassmorphismでスタイル設定されたレスポンシブな「コンテンツへスキップ」リンクコンポーネントで、補完的な配色、適度な複雑さ、およびビジネス/企業のWebサイトに適したダークモードのサポートを実装しています。このコンポーネントは、Tailwind CSSクラスを使用して純粋にHTMLで実装され、JavaScriptは必要ありません。

開けるプレビュー

                <a href="#content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:rounded-md focus:text-white focus:bg-black focus:bg-opacity-30 focus:backdrop-filter focus:backdrop-blur-lg focus:shadow-lg dark:focus:text-black dark:focus:bg-white dark:focus:bg-opacity-30 dark:focus:backdrop-filter dark:focus:backdrop-blur-lg dark:focus:shadow-lg">Skip to content</a>

ブルータリストハンバーガーメニュー

鮮やかな色とダークモードをサポートするブルータリストスタイルのハンバーガーメニューは、ブログやコンテンツサイト向けに設計されています。

開けるプレビュー

                <div class="bg-yellow-400 dark:bg-purple-700 p-4 flex justify-between items-center">
  <h1 class="text-2xl font-bold text-black dark:text-white">Brutal Blog</h1>
  <button class="text-black dark:text-white focus:outline-none">
    <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M4 5h16v2H4V5zm0 6h16v2H4v-2zm0 6h16v2H4v-2z"/>
    </svg>
  </button>
</div>

Eコマースレトロコンポーネント

レトロ/ビンテージスタイルでデザインされた複雑なEコマースコンポーネントで、トライアドカラースキームとレスポンシブデザインが特徴で、ダークモードをサポートするビジネス/企業のWebサイトに適しています。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
    <div class="mb-4">
        <h2 class="text-3xl font-bold text-center text-red-600 dark:text-red-400">Vintage E-commerce Store</h2>
        <p class="text-center text-lg text-gray-700 dark:text-gray-300">Explore our curated collection of retro-inspired products</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product 1">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Retro Gadget</h3>
                <p class="text-gray-600 dark:text-gray-400">Classic retro gadget from the 90s, perfect for nostalgia lovers!</p>
                <span class="block text-lg font-bold text-red-600 dark:text-red-400">$29.99</span>
                <button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product 2">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Vintage Vinyl</h3>
                <p class="text-gray-600 dark:text-gray-400">Experience music like it's the 80s with our vintage vinyl collection.</p>
                <span class="block text-lg font-bold text-red-600 dark:text-red-400">$19.99</span>
                <button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product 3">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Classic Arcade Game</h3>
                <p class="text-gray-600 dark:text-gray-400">Relive the golden age of gaming with our classic arcade machines!</p>
                <span class="block text-lg font-bold text-red-600 dark:text-red-400">$99.99</span>
                <button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="mt-8">
        <h2 class="text-2xl font-bold text-center text-red-600 dark:text-red-400">Meet Our Team</h2>
        <div class="flex flex-wrap justify-center space-x-4 mt-4">
            <div class="flex flex-col items-center">
                <img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member 1">
                <h4 class="mt-2 text-gray-800 dark:text-gray-200">John Doe</h4>
            </div>
            <div class="flex flex-col items-center">
                <img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Team Member 2">
                <h4 class="mt-2 text-gray-800 dark:text-gray-200">Jane Smith</h4>
            </div>
            <div class="flex flex-col items-center">
                <img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Team Member 3">
                <h4 class="mt-2 text-gray-800 dark:text-gray-200">Bob Johnson</h4>
            </div>
        </div>
    </div>
</div>

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

マテリアルデザインの原則に基づいて設計されたシンプルなレスポンシブ製品ギャラリーコンポーネントで、鮮やかな色とダークモードのサポートが特徴で、ダッシュボードに適しています。このコンポーネントは、スタイル設定に Tailwind CSS を使用します。

開けるプレビュー

                <div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Product Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full mt-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 4</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 5</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-48 object-cover rounded-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 6</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
        </div>
    </div>
</div>

インフォグラフィックコンポーネント

インフォグラフィックコンポーネント - グレースケールと複雑なデザインのダークモードUI。ダークテーマのサポートによるレスポンシブ。

開けるプレビュー

                <div class="bg-gray-900 text-gray-200 p-8 min-h-screen">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold text-center text-white mb-12">My Portfolio Infographics</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Project Stats Card -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-semibold text-white mb-4">Project Statistics</h2>
        <div class="flex items-center mb-4">
          <div class="text-gray-400 mr-2">Completed Projects:</div>
          <div class="text-white font-bold">50+</div>
        </div>
        <div class="flex items-center mb-4">
          <div class="text-gray-400 mr-2">Client Satisfaction:</div>
          <div class="text-white font-bold">100%</div>
        </div>
        <div class="flex items-center">
          <div class="text-gray-400 mr-2">Years of Experience:</div>
          <div class="text-white font-bold">10+</div>
        </div>
      </div>

      <!-- Skills Distribution Card -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-semibold text-white mb-4">Skills Distribution</h2>
        <div class="mb-4">
          <div class="flex justify-between text-gray-400 mb-1"><span>HTML/CSS</span><span>95%</span></div>
          <div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
            <div class="bg-gray-400 h-2 rounded-full" style="width: 95%"></div>
          </div>
        </div>
        <div class="mb-4">
          <div class="flex justify-between text-gray-400 mb-1"><span>JavaScript</span><span>85%</span></div>
          <div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
            <div class="bg-gray-400 h-2 rounded-full" style="width: 85%"></div>
          </div>
        </div>
        <div class="mb-4">
          <div class="flex justify-between text-gray-400 mb-1"><span>Tailwind CSS</span><span>90%</span></div>
          <div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
            <div class="bg-gray-400 h-2 rounded-full" style="width: 90%"></div>
          </div>
        </div>
        <div>
          <div class="flex justify-between text-gray-400 mb-1"><span>Python</span><span>70%</span></div>
          <div class="w-full bg-gray-700 rounded-full h-2 dark:bg-gray-700">
            <div class="bg-gray-400 h-2 rounded-full" style="width: 70%"></div>
          </div>
        </div>
      </div>

      <!-- Testimonials Card -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-semibold text-white mb-4">Client Testimonials</h2>
        <div class="mb-4 border-b border-gray-700 pb-4">
          <p class="text-gray-400 italic mb-2">"Outstanding work! Exceeded expectations and delivered on time."</p>
          <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client Avatar">
            <div class="text-white font-semibold">John Smith</div>
          </div>
        </div>
        <div>
          <p class="text-gray-400 italic mb-2">"Highly recommend for any web development project. Great communication."</p>
          <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client Avatar">
            <div class="text-white font-semibold">Jane Doe</div>
          </div>
        </div>
      </div>

      <!-- Project Showcase Card -->
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 md:col-span-2 lg:col-span-3">
        <h2 class="text-2xl font-semibold text-white mb-4">Featured Projects</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <div class="relative overflow-hidden rounded-lg">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project1/400/300" alt="Project Image 1">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <p class="text-white text-xl font-bold">Project Alpha</p>
            </div>
          </div>
          <div class="relative overflow-hidden rounded-lg">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project2/400/300" alt="Project Image 2">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <p class="text-white text-xl font-bold">Project Beta</p>
            </div>
          </div>
          <div class="relative overflow-hidden rounded-lg">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/project3/400/300" alt="Project Image 3">
            <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <p class="text-white text-xl font-bold">Project Gamma</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

3Dログインフォームコンポーネント

ビジネス/企業のWebサイト向けに設計されたレスポンシブ3Dログインフォームコンポーネントで、アースカラーとダークモードのサポートが組み込まれています。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-8 max-w-md w-full">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Login to Your Account</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
        <input type="email" id="email" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400" placeholder="[email protected]" required>
      </div>
      <div class="mb-6">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
        <input type="password" id="password" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400" placeholder="••••••••" required>
      </div>
      <div class="mb-4 flex items-center justify-between">
        <div>
          <input type="checkbox" class="text-green-600 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400">
          <span class="text-gray-700 dark:text-gray-300 ml-2">Remember me</span>
        </div>
        <a href="#" class="text-green-600 dark:text-green-400 text-sm">Forgot Password?</a>
      </div>
      <button type="submit" class="w-full bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-400 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 transition duration-200">Login</button>
    </form>
    <p class="mt-4 text-center text-gray-600 dark:text-gray-400 text-sm">
      Don't have an account? <a href="#" class="text-green-600 dark:text-green-400">Sign Up</a>
    </p>
  </div>
</div>

1 ... 163 164 165 166 167 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント