検索コンポーネント

すべてのコンポーネント

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

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

インタラクティブな機能、レスポンシブデザイン、Tailwind CSSを使用したダークテーマのサポートを備えたポートフォリオを紹介するミニマリストのヒートマップコンポーネント。

                <div class="max-w-4xl mx-auto p-5">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Portfolio Heat Maps</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- Example Heat Map Item -->
        <div class="bg-red-300 dark:bg-red-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=1" alt="Project 1" class="rounded mb-2" />
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 1</h3>
            <p class="text-gray-700 dark:text-gray-300">Description of project 1 goes here.</p>
        </div>
        <div class="bg-blue-300 dark:bg-blue-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=2" alt="Project 2" class="rounded mb-2" />
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 2</h3>
            <p class="text-gray-700 dark:text-gray-300">Description of project 2 goes here.</p>
        </div>
        <div class="bg-green-300 dark:bg-green-800 p-4 rounded-lg hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=3" alt="Project 3" class="rounded mb-2" />
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Project Title 3</h3>
            <p class="text-gray-700 dark:text-gray-300">Description of project 3 goes here.</p>
        </div>
        <!-- Add more items as needed -->
    </div>
</div>

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

ポートフォリオ内の作品や製品を紹介するためのレトロ/ビンテージスタイルの360°ビューアコンポーネントで、Tailwind CSSを使用して設計されており、複数のインタラクティブ要素を備え、ダークモードをサポートする複雑なインターフェイスを備えています。

開けるプレビュー

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold text-white mb-4 text-center">360° Viewer</h2>
    <div class="relative w-full h-64 overflow-hidden rounded-lg shadow-lg">
        <img src="https://picsum.photos/600/400" alt="360 Product View" class="w-full h-full object-cover transition-transform transform hover:scale-105" />
    </div>
    <div class="mt-6 flex justify-center space-x-4">
        <button class="bg-purple-500 dark:bg-purple-700 text-white py-2 px-4 rounded-md hover:bg-purple-600 dark:hover:bg-purple-600">Rotate Left</button>
        <button class="bg-purple-500 dark:bg-purple-700 text-white py-2 px-4 rounded-md hover:bg-purple-600 dark:hover:bg-purple-600">Rotate Right</button>
    </div>
    <div class="mt-8 bg-gray-700 dark:bg-gray-800 p-4 rounded-md">
        <h3 class="text-lg font-semibold text-white">Product Details:</h3>
        <p class="text-gray-300 dark:text-gray-200 mt-2">Explore this item and check out its unique features and craftsmanship.</p>
    </div>
    <div class="mt-6 bg-gray-700 dark:bg-gray-800 p-4 rounded-md">
        <h3 class="text-lg font-semibold text-white">Team Members:</h3>
        <div class="flex space-x-4">
            <img src="https://randomuser.me/api/portraits/men/31.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
            <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
        </div>
    </div>
</div>

スティッキーナビゲーションコンポーネント

eコマース用のダークモードスティッキーナビゲーションコンポーネントで、補色の配色と基本的なレイアウトを使用します。

開けるプレビュー

                <nav class="bg-gray-900 sticky top-0 shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0">
          <img class="h-8" src="https://picsum.photos/50/50" alt="Logo">
        </div>
        <div class="hidden md:flex md:space-x-8 ml-10">
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Shop</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
        </div>
      </div>
      <div class="flex items-center">
        <button class="text-gray-300 hover:bg-gray-700 hover:text-white p-1 rounded-full">
          <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Profile">
        </button>
      </div>
    </div>
  </div>
</nav>

ソーシャルログインコンポーネント

パステルカラーの配色とダークモードをサポートするeコマースプラットフォーム用に設計されたレトロ/ビンテージソーシャルログインコンポーネント。

開けるプレビュー

                <div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900 p-6">
    <div class="bg-pastel-pink rounded-lg shadow-lg p-8 w-80">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Welcome Back!</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6 text-center">Log in using your favorite social media account</p>
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center justify-center bg-blue-400 dark:bg-blue-700 text-white rounded-lg p-2 hover:bg-blue-500 dark:hover:bg-blue-600 transition duration-200 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
                Login with Facebook
            </a>
            <a href="#" class="flex items-center justify-center bg-red-400 dark:bg-red-700 text-white rounded-lg p-2 hover:bg-red-500 dark:hover:bg-red-600 transition duration-200 ease-in-out">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
                Login with Google
            </a>
            <a href="#" class="flex items-center justify-center bg-green-400 dark:bg-green-700 text-white rounded-lg p-2 hover:bg-green-500 dark:hover:bg-green-600 transition duration-200 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
                Login with Twitter
            </a>
        </div>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-400 dark:text-blue-300 hover:underline">Sign up</a></p>
        </div>
    </div>
</div>

トップに戻るボタン

Tailwind CSSを使用した、3Dデザイン、鮮やかな配色、ソーシャルメディアインターフェイス用の複雑なインタラクティブ要素を備えたトップに戻るボタンコンポーネント。レスポンシブデザインとダークテーマのサポートが含まれています。

開けるプレビュー

                <div class="fixed bottom-5 right-5 z-50">
  <button
    class="back-to-top-btn bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 text-white p-4 rounded-full shadow-lg transform transition-transform duration-300 hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800"
    aria-label="Back to top"
  >
    <svg
      class="w-6 h-6"
      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="M5 10l7-7m0 0l7 7m-7-7v18"
      ></path>
    </svg>
  </button>
</div>

<style>
  .back-to-top-btn {
    /* Adding basic 3D effect with box-shadow */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2),
                0 6px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-in-out;
  }

  .back-to-top-btn:hover {
      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
                  0 10px 10px rgba(0, 0, 0, 0.22);
  }

  .back-to-top-btn:active {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
                  0 1px 2px rgba(0, 0, 0, 0.24);
  }
</style>

Product Reviews コンポーネント

ダッシュボード用に設計された複雑な製品レビューコンポーネントで、3Dデザイン要素、アースカラー、ダークモードのサポートが特徴です。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Product Reviews</h2>
    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/50?random=1" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">12th October, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">Great product! Really helped me in my work.</p>
            <div class="flex items-center">
                <span class="text-yellow-500 font-bold">4.5</span>
                <svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
                </svg>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/50?random=2" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">10th October, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">I found it very useful, but it has some minor bugs.</p>
            <div class="flex items-center">
                <span class="text-yellow-500 font-bold">3.8</span>
                <svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
                </svg>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/50?random=3" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-gray-800 dark:text-gray-200">Mike Johnson</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">5th October, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">A bit expensive, but the quality is top-notch.</p>
            <div class="flex items-center">
                <span class="text-yellow-500 font-bold">4.0</span>
                <svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
                </svg>
            </div>
        </div>
    </div>
</div>

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

3D要素で奥行きを出すために設計されたシンプルな製品ギャラリーコンポーネントで、トライアドカラースキームを使用しています。レスポンシブでダークテーマをサポートしており、作品や製品の展示に適しています。

開けるプレビュー

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

ソーシャルコンポーネントコンポーネント

単色の配色のダークモードで設計されたポートフォリオコンポーネント。シンプルなレイアウトで作品や製品を展示しています。

開けるプレビュー

                <div class="bg-gray-900 text-gray-100 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold mb-4">My Portfolio</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=1" alt="Project 1" />
            <h3 class="text-xl font-semibold mt-2">Project Title 1</h3>
            <p class="text-gray-400">Short description of the project goes here.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=2" alt="Project 2" />
            <h3 class="text-xl font-semibold mt-2">Project Title 2</h3>
            <p class="text-gray-400">Short description of the project goes here.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=3" alt="Project 3" />
            <h3 class="text-xl font-semibold mt-2">Project Title 3</h3>
            <p class="text-gray-400">Short description of the project goes here.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=4" alt="Project 4" />
            <h3 class="text-xl font-semibold mt-2">Project Title 4</h3>
            <p class="text-gray-400">Short description of the project goes here.</p>
        </div>
    </div>
    <hr class="my-6 border-gray-700" />
    <div class="flex items-center justify-between">
        <div class="flex items-center">
            <img class="h-10 w-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar" />
            <div>
                <h4 class="text-lg font-semibold">Your Name</h4>
                <p class="text-gray-400">Your Title or Profession</p>
            </div>
        </div>
        <a href="#" class="bg-blue-600 text-gray-100 py-2 px-4 rounded hover:bg-blue-700 transition duration-300">Contact Me</a>
    </div>
</div>

ブルータリスト製品の比較

モノクロの配色とダークモードをサポートするソーシャルメディア用のブルータリスト製品比較コンポーネント

開けるプレビュー

                <div class="bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white p-4">
  <h2 class="text-2xl font-bold mb-4 border-b-2 border-zinc-900 dark:border-white pb-2">Compare Products</h2>
  <div class="grid grid-cols-2 gap-4">
    <div class="border-2 border-zinc-900 dark:border-white p-4">
      <h3 class="text-xl font-semibold mb-2">Product A</h3>
      <img src="https://picsum.photos/seed/producta/200/150" alt="Product A" class="mb-2 w-full h-auto">
      <ul class="list-disc list-inside">
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
      </ul>
    </div>
    <div class="border-2 border-zinc-900 dark:border-white p-4">
      <h3 class="text-xl font-semibold mb-2">Product B</h3>
      <img src="https://picsum.photos/seed/productb/200/150" alt="Product B" class="mb-2 w-full h-auto">
      <ul class="list-disc list-inside">
        <li>Feature X</li>
        <li>Feature Y</li>
        <li>Feature Z</li>
      </ul>
    </div>
  </div>
</div>

スキューモーフィックバッジ

スキューモーフィックなデザイン、補色配色、シンプルなレイアウトのバッジのセットで、ブログやコンテンツサイトに適しています。ダークモードのサポートによるレスポンシブ。

開けるプレビュー

                <div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-800">
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-blue-800 bg-blue-200 border border-blue-400 shadow-lg dark:text-blue-200 dark:bg-blue-800 dark:border-blue-600">
    Skeuomorphism
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-green-800 bg-green-200 border border-green-400 shadow-lg dark:text-green-200 dark:bg-green-800 dark:border-green-600">
    Complementary
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-yellow-800 bg-yellow-200 border border-yellow-400 shadow-lg dark:text-yellow-200 dark:bg-yellow-800 dark:border-yellow-600">
    Simple
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-red-800 bg-red-200 border border-red-400 shadow-lg dark:text-red-200 dark:bg-red-800 dark:border-red-600">
    Blog
  </span>
</div>

1 ... 235 236 237 238 239 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント