検索コンポーネント

すべてのコンポーネント

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

ソーシャルログインコンポーネント - Neumorphism Vibrant Complex

Tailwind CSSを使用してNeumorphismと鮮やかなアクセントでスタイル設定された、複雑で応答性の高いソーシャルログインフォームコンポーネントで、ダークモードをサポートします。

                <!-- Main container simulating the page background -->
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">

  <!-- Neumorphic Login Form Card -->
  <div class="w-full max-w-sm p-8 bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-xl shadow-gray-300 dark:shadow-gray-950">

    <h2 class="text-3xl font-bold text-center mb-8 text-gray-800 dark:text-gray-100">Sign In</h2>

    <!-- Social Login Buttons -->
    <div class="grid grid-cols-1 gap-4 mb-6">

      <!-- Google Button -->
      <button class="w-full py-3 px-4 rounded-lg flex items-center justify-center
                     bg-gray-100 dark:bg-gray-700
                     shadow-md shadow-gray-300 dark:shadow-900
                     hover:shadow-lg hover:shadow-gray-400 dark:hover:shadow-950 dark:hover:bg-gray-600
                     active:shadow-inner active:shadow-gray-400 dark:active:shadow-950 dark:active:bg-gray-800
                     transition duration-200 ease-in-out">
        <!-- Placeholder for Google Icon -->
        <span class="font-bold mr-2">G</span>
        <span class="text-gray-800 dark:text-gray-100">Sign in with Google</span>
      </button>

      <!-- Facebook Button -->
      <button class="w-full py-3 px-4 rounded-lg flex items-center justify-center
                     bg-gray-100 dark:bg-gray-700
                     shadow-md shadow-gray-300 dark:shadow-900
                     hover:shadow-lg hover:shadow-gray-400 dark:hover:shadow-950 dark:hover:bg-gray-600
                     active:shadow-inner active:shadow-gray-400 dark:active:shadow-950 dark:active:bg-gray-800
                     transition duration-200 ease-in-out">
        <!-- Placeholder for Facebook Icon -->
        <span class="font-bold mr-2">f</span>
        <span class="text-gray-800 dark:text-gray-100">Sign in with Facebook</span>
      </button>

      <!-- Add more social buttons if needed for complexity -->
            <!-- Apple Button Example -->
            <button class="w-full py-3 px-4 rounded-lg flex items-center justify-center
                     bg-gray-100 dark:bg-gray-700
                     shadow-md shadow-gray-300 dark:shadow-900
                     hover:shadow-lg hover:shadow-gray-400 dark:hover:shadow-950 dark:hover:bg-gray-600
                     active:shadow-inner active:shadow-gray-400 dark:active:shadow-950 dark:active:bg-gray-800
                     transition duration-200 ease-in-out">
        <!-- Placeholder for Apple Icon -->
        <span class="font-bold mr-2"></span>
        <span class="text-gray-800 dark:text-gray-100">Sign in with Apple</span>
      </button>

    </div>

    <div class="text-center text-gray-500 dark:text-gray-400 mb-6">or</div>

    <!-- Email/Password Form -->
    <form>
      <div class="mb-4">
        <input type="email" placeholder="Email" class="w-full py-3 px-4 rounded-lg
               bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100
               shadow-inner shadow-gray-300 dark:shadow-900
               focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600
               placeholder-gray-500 dark:placeholder-gray-400
               transition duration-200 ease-in-out">
      </div>
      <div class="mb-6">
        <input type="password" placeholder="Password" class="w-full py-3 px-4 rounded-lg
               bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100
               shadow-inner shadow-gray-300 dark:shadow-900
               focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600
               placeholder-gray-500 dark:placeholder-gray-400
               transition duration-200 ease-in-out">
      </div>

      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
            <!-- Standard checkbox input -->
            <input id="remember-me" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
            <label for="remember-me" class="ml-2 block text-sm text-gray-800 dark:text-gray-200">
                Remember me
            </label>
        </div>
        <a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">Forgot Password?</a>
      </div>


      <!-- Login Button -->
      <button type="submit" class="w-full py-3 px-4 rounded-lg mb-6
              bg-blue-600 text-white font-bold
              shadow-md shadow-blue-500 dark:shadow-blue-900
              hover:bg-blue-700 dark:hover:bg-blue-700
              active:shadow-inner active:shadow-blue-700 dark:active:shadow-blue-950
              transition duration-200 ease-in-out">
        Login
      </button>
    </form>

    <div class="text-center text-sm text-gray-800 dark:text-gray-200">
      Don't have an account?
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-bold">Sign Up</a>
    </div>

  </div>
</div>

カートに入れるボタンコンポーネント

ソーシャルメディアインターフェース用に設計された3Dスタイルの「カートに追加」ボタンコンポーネント。深みのある魅力的なデザイン要素を備えた豊富なインターフェイスが特徴で、ダークテーマのサポートで応答性があります。

開けるプレビュー

                <div class="flex items-center justify-center p-4">
    <div class="relative group">
        <button class="relative z-10 block rounded-lg bg-blue-500 p-4 text-white text-lg font-semibold shadow-md transition-transform transform-gpu hover:scale-105 focus:outline-none dark:bg-blue-700">
            <span>Add to Cart</span>
            <span class="absolute top-0 left-0 w-full h-full bg-yellow-400 rounded-lg opacity-0 group-hover:opacity-40 transition-opacity duration-300"></span>
        </button>
        <div class="absolute -bottom-3 -right-3 w-12 h-12 rounded-full bg-red-500 shadow-lg flex items-center justify-center transform rotate-45 transition-transform duration-300 group-hover:scale-110">
            <img src="https://picsum.photos/40" alt="Product Image" class="rounded-full">
        </div>
        <div class="absolute -bottom-16 -left-16 w-10 h-10 rounded-full bg-green-500 shadow-lg">
            <img src="https://picsum.photos/30" alt="Decorative Element" class="rounded-full">
        </div>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        .bg-blue-500 { background-color: #3b82f6; }
        .bg-blue-700 { background-color: #1d4ed8; }
        .bg-yellow-400 { background-color: #f59e0b; }
        .bg-red-500 { background-color: #ef4444; }
        .bg-green-500 { background-color: #22c55e; }
        .text-white { color: #ffffff; }
    }
</style>

ポートフォリオの 3D グリッドレイアウトコンポーネント

複雑でレスポンシブな 3D スタイルのグリッドレイアウトコンポーネントで、補色を使用したポートフォリオ用で、ダークモードと picsum.photos の画像がサポートされています。

開けるプレビュー

                <div class="p-8 dark:bg-gray-900 min-h-screen">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-2xl perspective-1000">
      <div class="relative group">
        <img src="https://picsum.photos/seed/picsum1/600/400" alt="Project 1" class="w-full h-64 object-cover">
        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500">
          <a href="#" class="text-white text-xl font-bold">View Project</a>
        </div>
      </div>
      <div class="p-6">
        <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Project Alpha</h3>
        <p class="text-gray-600 dark:text-gray-300">A brief description of Project Alpha, highlighting its key features and technologies used. This is a placeholder.</p>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-2xl perspective-1000">
      <div class="relative group">
        <img src="https://picsum.photos/seed/picsum2/600/400" alt="Project 2" class="w-full h-64 object-cover">
        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500">
          <a href="#" class="text-white text-xl font-bold">View Project</a>
        </div>
      </div>
      <div class="p-6">
        <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Project Beta</h3>
        <p class="text-gray-600 dark:text-gray-300">A brief description of Project Beta, highlighting its key features and technologies used. This is a placeholder.</p>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-2xl perspective-1000">
      <div class="relative group">
        <img src="https://picsum.photos/seed/picsum3/600/400" alt="Project 3" class="w-full h-64 object-cover">
        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500">
          <a href="#" class="text-white text-xl font-bold">View Project</a>
        </div>
      </div>
      <div class="p-6">
        <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Project Gamma</h3>
        <p class="text-gray-600 dark:text-gray-300">A brief description of Project Gamma, highlighting its key features and technologies used. This is a placeholder.</p>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-2xl perspective-1000">
      <div class="relative group">
        <img src="https://picsum.photos/seed/picsum4/600/400" alt="Project 4" class="w-full h-64 object-cover">
        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500">
          <a href="#" class="text-white text-xl font-bold">View Project</a>
        </div>
      </div>
      <div class="p-6">
        <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Project Delta</h3>
        <p class="text-gray-600 dark:text-gray-300">A brief description of Project Delta, highlighting its key features and technologies used. This is a placeholder.</p>
      </div>
    </div>
  </div>
</div>

オーディオプレーヤーコンポーネント

スキューモーフィックスタイルでデザインされたシンプルなオーディオプレーヤーコンポーネントで、グレースケールの配色を使用し、ダークモードをサポートします。

開けるプレビュー

                <div class="bg-gray-900 text-white p-4 rounded-lg shadow-lg max-w-xs mx-auto dark:bg-gray-800">
    <div class="flex items-center justify-between mb-2">
        <img src="https://picsum.photos/80/80" alt="Album Cover" class="rounded-lg shadow-md"/>
        <div class="flex flex-col">
            <h4 class="text-xl font-semibold">Track Title</h4>
            <p class="text-gray-400">Artist Name</p>
        </div>
    </div>
    <audio controls class="w-full">
        <source src="audio-file.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    <div class="flex justify-between mt-2">
        <button class="bg-gray-700 hover:bg-gray-600 text-white rounded-full p-2">
            ⏮
        </button>
        <button class="bg-gray-700 hover:bg-gray-600 text-white rounded-full p-2">
            Play
        </button>
        <button class="bg-gray-700 hover:bg-gray-600 text-white rounded-full p-2">
            ⏭
        </button>
    </div>
</div>

セッションタイムアウトアラート

3Dデザイン、トライアドカラースキーム、Tailwind CSSを使用したダークモードをサポートするレスポンシブセッションタイムアウトアラートコンポーネント。

開けるプレビュー

                <div class="fixed inset-0 bg-gray-900 bg-opacity-50 dark:bg-opacity-75 flex items-center justify-center p-4">
  <div class="relative bg-gradient-to-br from-blue-500 to-purple-600 dark:from-gray-700 dark:to-gray-900 text-white rounded-lg shadow-lg p-6 max-w-sm w-full transform transition-all duration-300 scale-100 hover:scale-105">
    <div class="absolute inset-0 bg-white bg-opacity-10 dark:bg-opacity-5 rounded-lg pointer-events-none"></div>
    <div class="relative">
      <h2 class="text-2xl font-bold mb-4 text-shadow">Session Timeout</h2>
      <p class="mb-6 text-shadow-sm">Your session is about to expire. Please save any unsaved work.</p>
      <div class="flex justify-end space-x-4">
        <button class="bg-white text-blue-600 dark:text-gray-800 px-4 py-2 rounded-md font-semibold shadow hover:bg-gray-200 dark:hover:bg-gray-300 transition duration-300">Stay Logged In</button>
        <button class="bg-red-500 text-white px-4 py-2 rounded-md font-semibold shadow hover:bg-red-600 transition duration-300">Log Out</button>
      </div>
    </div>
  </div>
</div>

<style>
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.text-shadow-sm {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
</style>

ヒートマップコンポーネント

3Dデザインスタイルと補色配色を備えたシンプルなレスポンシブヒートマップコンポーネントで、ダークテーマをサポートする作品や製品を紹介するために設計されています。

開けるプレビュー

                <div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg dark:bg-gray-800">
    <h2 class="text-2xl font-bold mb-4 text-center">Portfolio Heat Maps</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-blue-500 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
            <img src="https://picsum.photos/200?random=1" alt="Project 1" class="w-full h-40 object-cover" />
            <div class="p-4">
                <h3 class="font-semibold text-lg">Project Title 1</h3>
                <p class="text-sm text-gray-200">Short description of the project.</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2" />
                    <span class="text-gray-300">Designer Name</span>
                </div>
            </div>
        </div>
        <div class="bg-red-500 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
            <img src="https://picsum.photos/200?random=2" alt="Project 2" class="w-full h-40 object-cover" />
            <div class="p-4">
                <h3 class="font-semibold text-lg">Project Title 2</h3>
                <p class="text-sm text-gray-200">Short description of the project.</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2" />
                    <span class="text-gray-300">Designer Name</span>
                </div>
            </div>
        </div>
        <div class="bg-green-500 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
            <img src="https://picsum.photos/200?random=3" alt="Project 3" class="w-full h-40 object-cover" />
            <div class="p-4">
                <h3 class="font-semibold text-lg">Project Title 3</h3>
                <p class="text-sm text-gray-200">Short description of the project.</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2" />
                    <span class="text-gray-300">Designer Name</span>
                </div>
            </div>
        </div>
        <div class="bg-yellow-500 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
            <img src="https://picsum.photos/200?random=4" alt="Project 4" class="w-full h-40 object-cover" />
            <div class="p-4">
                <h3 class="font-semibold text-lg">Project Title 4</h3>
                <p class="text-sm text-gray-200">Short description of the project.</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2" />
                    <span class="text-gray-300">Designer Name</span>
                </div>
            </div>
        </div>
    </div>
</div>

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

ブルータリズムスタイルとパステルカラーでデザインされたソーシャルメディアコンポーネントで、インタラクション用の複雑なインターフェイスが特徴で、ダークモードがサポートされています。

開けるプレビュー

                <div class="max-w-3xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700">
    <header class="flex items-center space-x-4 border-b border-gray-300 dark:border-gray-700 pb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full">
        <div>
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
        </div>
    </header>
    <div class="my-4">
        <p class="text-gray-800 dark:text-gray-200">
            This is a sample post showcasing Brutalism in design. 
            The layout is raw and bold, inviting interactions with its visually striking style!
        </p>
        <img src="https://picsum.photos/800/400?random=1" alt="Random Image" class="mt-4 w-full rounded-lg shadow-md">
    </div>
    <footer class="flex justify-between border-t border-gray-300 dark:border-gray-700 pt-4 mt-4">
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none">❤️ Like</button>
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none">💬 Comment</button>
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none">🔗 Share</button>
    </footer>
</div>

Table of Contents コンポーネント

glassmorphism デザインとパステル調の配色を備えたレスポンシブな目次コンポーネントで、データの視覚化とコントロールパネルを備えたダッシュボードに適しています。

開けるプレビュー

                <div class="flex flex-col items-center p-5 bg-white rounded-lg shadow-lg glassmorphism dark:bg-gray-800">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
    <ul class="w-full space-y-3">
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200"> 
            <a href="#section1">Section 1</a>
        </li>
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
            <a href="#section2">Section 2</a>
        </li>
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
            <a href="#section3">Section 3</a>
        </li>
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
            <a href="#section4">Section 4</a>
        </li>
        <li class="p-4 rounded-lg bg-white text-gray-700 shadow-md transition-transform duration-300 hover:scale-105 dark:bg-gray-700 dark:text-gray-200">
            <a href="#section5">Section 5</a>
        </li>
    </ul>
    <div class="mt-6 w-full">
        <img src="https://picsum.photos/300/200" alt="Sample Image" class="w-full h-auto rounded-lg shadow-lg">
    </div>
    <div class="mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow-lg">
        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">User Name</p>
    </div>
</div>

Table of Contents コンポーネント

Tailwind CSS を使用したダークモードをサポートするレスポンシブ目次コンポーネント。このコンポーネントはポートフォリオ用に設計されており、単色の配色とJavaScriptを使用しない適度な複雑さのレベルを特徴としています。

開けるプレビュー

                <div class="bg-gray-900 text-gray-300 p-8 min-h-screen">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold text-white mb-8">Table of Contents</h1>
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
      <ul class="space-y-4">
        <li>
          <a href="#section-1" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
            <span class="font-semibold text-gray-300">Section 1:</span> Introduction
          </a>
        </li>
        <li>
          <a href="#section-2" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
            <span class="font-semibold text-gray-300">Section 2:</span> About Me
          </a>
          <ul class="ml-6 mt-2 space-y-2">
            <li>
              <a href="#section-2-1" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
                2.1 My Background
              </a>
            </li>
            <li>
              <a href="#section-2-2" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
                2.2 Skills
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#section-3" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
            <span class="font-semibold text-gray-300">Section 3:</span> My Work
          </a>
          <ul class="ml-6 mt-2 space-y-2">
            <li>
              <a href="#section-3-1" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
                3.1 Project Alpha
              </a>
            </li>
            <li>
              <a href="#section-3-2" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
                3.2 Project Beta
              </a>
            </li>
            <li>
              <a href="#section-3-3" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
                3.3 Project Gamma
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#section-4" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
            <span class="font-semibold text-gray-300">Section 4:</span> Contact
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

レトロナビ

レトロ/ビンテージデザイン、鮮やかな配色、最小限の要素を備えた、シンプルでレスポンシブなダークモード互換のナビゲーションコンポーネントで、eコマースWebサイトに適しています。

開けるプレビュー

                <nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-white text-2xl font-bold">RetroShop</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white hover:text-gray-200">Home</a>
      <a href="#" class="text-white hover:text-gray-200">Products</a>
      <a href="#" class="text-white hover:text-gray-200">About</a>
      <a href="#" class="text-white hover:text-gray-200">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>
</nav>

1 ... 225 226 227 228 229 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント