検索コンポーネント

すべてのコンポーネント

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

LoginSignupコンポーネント

ソーシャルメディアインターフェース用のNeumorphismスタイルとパステルカラースキームで設計されたレスポンシブログイン/サインアップコンポーネント。

                <div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-800 p-6">
  <div class="bg-white dark:bg-gray-900 rounded-3xl shadow-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">Join Us</h2>
    <form>
      <div class="mb-4">
        <input type="text" placeholder="Username" class="w-full p-4 text-gray-700 dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 shadow-inner" />
      </div>
      <div class="mb-6">
        <input type="email" placeholder="Email Address" class="w-full p-4 text-gray-700 dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 shadow-inner" />
      </div>
      <div class="mb-6">
        <input type="password" placeholder="Password" class="w-full p-4 text-gray-700 dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 shadow-inner" />
      </div>
      <button type="submit" class="w-full bg-blue-500 text-white rounded-md p-4 hover:bg-blue-600 shadow-xl transition duration-200">Sign Up</button>
    </form>
    <div class="text-center mt-4">
      <span class="text-gray-600 dark:text-gray-400">or</span>
    </div>
    <button class="w-full mt-4 bg-gray-200 rounded-md p-4 flex items-center justify-around hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 shadow-md transition duration-200">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Google" class="w-6 h-6 rounded-full">
      <span class="text-gray-800 dark:text-gray-200">Continue with Google</span>
    </button>
    <div class="text-center mt-4">
      <p class="text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-blue-500 hover:underline">Log In</a></p>
    </div>
  </div>
</div>

Minimalist_Tooltip

レスポンシブデザインとダークテーマをサポートするEコマース用のミニマリスト/フラットデザインツールチップコンポーネント。補色スキームを使用し、複雑さは中程度です。

開けるプレビュー

                <div class="relative group">
  <button class="text-blue-700 hover:text-blue-800 dark:text-red-400 dark:hover:text-red-500 font-bold py-2 px-4 rounded">Hover Me</button>
  <div class="absolute bottom-full mb-2 hidden group-hover:block w-48 bg-blue-100 text-blue-800 text-sm rounded py-1 px-2 dark:bg-red-900 dark:text-red-100">
    Product information or details here.
  </div>
</div>

3Dデザインによるeコマースレイアウト

3Dデザイン要素を使用したeコマース向けのレスポンシブWebコンポーネントレイアウトで、補色の配色とダークテーマのサポートが組み込まれています。製品カード、ナビゲーションバー、フッターがあり、すべてTailwind CSSでスタイル設定されています。

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
  <nav class="flex justify-between items-center py-4">
    <div class="text-2xl font-bold text-gray-900 dark:text-white">ShopLogo</div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-800 dark:text-gray-300 hover:text-blue-500">Home</a></li>
      <li><a href="#" class="text-gray-800 dark:text-gray-300 hover:text-blue-500">Products</a></li>
      <li><a href="#" class="text-gray-800 dark:text-gray-300 hover:text-blue-500">Contact</a></li>
      <li><a href="#" class="text-gray-800 dark:text-gray-300 hover:text-blue-500">Cart</a></li>
    </ul>
  </nav>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-200">
      <img src="https://picsum.photos/200/200?random=1" alt="Product 1" class="rounded-t-lg w-full">
      <div class="p-4">
        <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product 1</h2>
        <p class="text-gray-700 dark:text-gray-300">$19.99</p>
        <button class="mt-2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">Add to Cart</button>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-200">
      <img src="https://picsum.photos/200/200?random=2" alt="Product 2" class="rounded-t-lg w-full">
      <div class="p-4">
        <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product 2</h2>
        <p class="text-gray-700 dark:text-gray-300">$29.99</p>
        <button class="mt-2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">Add to Cart</button>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-200">
      <img src="https://picsum.photos/200/200?random=3" alt="Product 3" class="rounded-t-lg w-full">
      <div class="p-4">
        <h2 class="font-bold text-xl text-gray-900 dark:text-white">Product 3</h2>
        <p class="text-gray-700 dark:text-gray-300">$39.99</p>
        <button class="mt-2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">Add to Cart</button>
      </div>
    </div>
  </div>
  <footer class="mt-6 p-4 bg-gray-200 dark:bg-gray-600 rounded-lg text-center text-gray-800 dark:text-gray-300">
    <p>© 2023 E-commerce Store. All rights reserved.</p>
  </footer>
</div>

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

スキューモーフィックデザイン、トライアドカラースキーム、ダークテーマをサポートするレスポンシブ360°ビューアコンポーネント。ダッシュボードデータの視覚化とコントロールパネル用に設計されています。

開けるプレビュー

                <div class="flex flex-col items-center justify-center dark:bg-gray-800 bg-gray-200 min-h-screen p-5">
    <h2 class="text-3xl font-bold mb-5 text-gray-900 dark:text-white">360° Viewer</h2>
    <div class="relative w-full max-w-xl">
        <div class="overflow-hidden rounded-lg shadow-lg border border-gray-300 dark:border-gray-700">
            <img src="https://picsum.photos/600/400" alt="360° View" class="w-full h-auto transition-transform duration-500 ease-in-out transform hover:scale-105" />
            <div class="absolute inset-0 flex items-center justify-center">
                <button class="bg-blue-500 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-500 text-white font-bold py-2 px-4 rounded-full transition-all duration-200">Rotate Left</button>
                <button class="bg-green-500 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-500 text-white font-bold py-2 px-4 rounded-full transition-all duration-200 ml-4">Rotate Right</button>
            </div>
        </div>
    </div>
    <div class="flex justify-between w-full max-w-xl mt-4">
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-700 mb-2" />
            <p class="text-xl font-semibold text-gray-900 dark:text-white">User Name</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-700 mb-2" />
            <p class="text-xl font-semibold text-gray-900 dark:text-white">User Name</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-700 mb-2" />
            <p class="text-xl font-semibold text-gray-900 dark:text-white">User Name</p>
        </div>
    </div>
</div>

レトロなパステルカラーのチャットウィンドウ

パステルカラー、レスポンシブデザイン、Tailwind CSSを使用したダークモードのサポートを備えたレトロなテーマのチャットウィンドウコンポーネント。

開けるプレビュー

                <div class="flex flex-col h-screen antialiased bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  <div class="flex flex-row h-full w-full overflow-x-hidden">
    <div class="flex flex-col flex-auto h-full p-6">
      <div class="flex flex-col flex-auto flex-shrink-0 rounded-lg bg-gray-200 dark:bg-gray-800 h-full p-4">
        <div class="flex flex-col h-full overflow-x-auto mb-4">
          <div class="flex flex-col h-full">
            <div class="grid grid-cols-12 gap-y-2">
              <div class="col-start-1 col-end-8 p-3 rounded-lg">
                <div class="flex flex-row items-center">
                  <div
                    class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
                  >
                    A
                  </div>
                  <div
                    class="relative ml-3 text-sm bg-white dark:bg-gray-700 py-2 px-4 shadow rounded-xl"
                  >
                    <div>Hey How are you doing today?</div>
                  </div>
                </div>
              </div>
              <div class="col-start-1 col-end-8 p-3 rounded-lg">
                <div class="flex flex-row items-center">
                  <div
                    class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
                  >
                    A
                  </div>
                  <div
                    class="relative ml-3 text-sm bg-white dark:bg-gray-700 py-2 px-4 shadow rounded-xl"
                  >
                    <div>
                      Wow, I'm loving this retro chat window design! The pastel colors are so calming.
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-start-6 col-end-13 p-3 rounded-lg">
                <div class="flex items-center justify-start flex-row-reverse">
                  <div
                    class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
                  >
                    B
                  </div>
                  <div
                    class="relative mr-3 text-sm bg-indigo-100 dark:bg-indigo-900 py-2 px-4 shadow rounded-xl"
                  >
                    <div>I'm fine living large</div>
                  </div>
                </div>
              </div>
              <div class="col-start-6 col-end-13 p-3 rounded-lg">
                <div class="flex items-center justify-start flex-row-reverse">
                  <div
                    class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
                  >
                    B
                  </div>
                  <div
                    class="relative mr-3 text-sm bg-indigo-100 dark:bg-indigo-900 py-2 px-4 shadow rounded-xl"
                  >
                    <div>Looks like something out of a late 80s computer interface. Totally tubular!</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="flex flex-row items-center h-16 rounded-xl bg-white dark:bg-gray-700 w-full px-4"
        >
          <div class="flex-grow ml-4">
            <div class="relative w-full">
              <input
                type="text"
                class="flex w-full border rounded-xl focus:outline-none focus:border-indigo-300 pl-4 h-10 dark:bg-gray-800 dark:text-white"
              />
            </div>
          </div>
          <div class="ml-4">
            <button
              class="flex items-center justify-center bg-indigo-500 hover:bg-indigo-600 rounded-xl text-white px-4 py-1 flex-shrink-0"
            >
              <span>Send</span>
              <span class="ml-2">
                <svg
                  class="w-4 h-4 transform rotate-45 -mt-px"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
                  ></path>
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

レスポンシブデザインとダークテーマをサポートするミニマリストダッシュボード機能コンポーネント。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white p-4 sm:p-6 lg:p-8">
    <div class="container mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <!-- Card 1 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4">Total Users</h2>
                <p class="text-3xl font-bold">1500</p>
            </div>
            <!-- Card 2 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4">Revenue</h2>
                <p class="text-3xl font-bold">$5000</p>
            </div>
            <!-- Card 3 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4">Orders</h2>
                <p class="text-3xl font-bold">300</p>
            </div>
        </div>
    </div>
</div>

ブルータリストグレースケールプログレスバー

ブログコンテンツ用のブルータリズムスタイルのグレースケールプログレスバーで、シンプルなデザイン、ダークモードのサポート、応答性を備えています。

開けるプレビュー

                <div class="w-full bg-gray-800 h-4 dark:bg-gray-200">
  <div class="bg-gray-400 h-4 dark:bg-gray-600" style="width: 50%;"></div>
</div>

ミニマリスト/フラットデザイン、鮮やかな配色、複雑な複雑さのレベルを備えたメガメニューコンポーネント、ダッシュボードの目的、Tailwind CSSを使用。ダークテーマをサポートするレスポンシブデザイン。JavaScript コードは不要で、Tailwind クラスを含む HTML のみ。ダークモードでは、スタイリングにTailwindのdark:プレフィックスを使用します。画像は picsum.photos を使用し、アバターには randomuser.me を使用します。

開けるプレビュー

                <nav class="bg-white shadow-lg dark:bg-gray-800">
    <div class="container mx-auto px-4">
        <div class="flex justify-between items-center py-4">
            <div>
                <a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">Dashboard</a>
            </div>
            <div class="hidden md:flex items-center space-x-1">
                <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Home</a>
                <div class="relative group">
                    <button class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Products</button>
                    <div class="absolute z-30 top-full left-0 w-64 rounded-md shadow-lg bg-white dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 1</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 2</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 3</a>
                    </div>
                </div>
                <div class="relative group">
                    <button class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Services</button>
                    <div class="absolute z-30 top-full left-0 w-64 rounded-md shadow-lg bg-white dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 1</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 2</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 3</a>
                    </div>
                </div>
                <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">About</a>
                <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Contact</a>
            </div>
            <div class="md:hidden flex items-center">
                <button class="mobile-menu-button">
                    <svg class="w-6 h-6 text-gray-500 hover:text-green-500 dark:text-gray-200 dark:hover:text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <div class="mobile-menu hidden md:hidden bg-white dark:bg-gray-800">
        <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Home</a>
        <div class="relative group">
            <button class="block w-full text-left py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Products</button>
            <div class="relative bg-white dark:bg-gray-700">
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 1</a>
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 2</a>
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 3</a>
            </div>
        </div>
        <div class="relative group">
            <button class="block w-full text-left py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Services</button>
            <div class="relative bg-white dark:bg-gray-700">
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 1</a>
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 2</a>
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 3</a>
            </div>
        </div>
        <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">About</a>
        <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Contact</a>
    </div>
</nav>

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

鮮やかな色と適度な複雑さで設計されたスキューモーフィックログインフォームコンポーネントで、ポートフォリオに適しています。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 max-w-md w-full">
        <h2 class="text-3xl font-bold text-center text-vibrant-600 dark:text-vibrant-300 mb-6">Login</h2>
        <img src="https://picsum.photos/200/100" alt="Decorative Header Image" class="rounded-lg w-full mb-4" />
        <form>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input type="email" id="email" name="email" class="border border-gray-300 dark:border-gray-700 rounded-lg p-2 focus:outline-none focus:ring focus:ring-vibrant-300 dark:focus:ring-vibrant-500 w-full" required />
            </div>
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input type="password" id="password" name="password" class="border border-gray-300 dark:border-gray-700 rounded-lg p-2 focus:outline-none focus:ring focus:ring-vibrant-300 dark:focus:ring-vibrant-500 w-full" required />
            </div>
            <button type="submit" class="bg-vibrant-600 dark:bg-vibrant-500 text-white font-bold py-2 rounded-lg w-full hover:bg-vibrant-700 dark:hover:bg-vibrant-400 transition duration-300 ease-in-out">Log In</button>
        </form>
        <div class="flex items-center justify-between mt-4">
            <a href="#" class="text-sm text-vibrant-600 dark:text-vibrant-300 hover:underline">Forgot Password?</a>
            <a href="#" class="text-sm text-vibrant-600 dark:text-vibrant-300 hover:underline">Sign Up</a>
        </div>
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-16 h-16 mx-auto mt-4" />
    </div>
</div>

Table of Contents コンポーネント

Skeuomorphism デザイン、パステルカラースキーム、ダークモードをサポートするレスポンシブ目次コンポーネントで、ポートフォリオに適しています。

開けるプレビュー

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg dark:shadow-xl">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Table of Contents</h2>
  <ul class="space-y-2">
    <li>
      <a href="#section1" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 1: Introduction</span>
      </a>
    </li>
    <li>
      <a href="#section2" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 2: Projects</span>
      </a>
    </li>
    <li>
      <a href="#section3" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 3: Skills</span>
      </a>
    </li>
    <li>
      <a href="#section4" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
        <span class="font-semibold">Section 4: Contact</span>
      </a>
    </li>
  </ul>
</div>

1 ... 138 139 140 141 142 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント