検索コンポーネント

すべてのコンポーネント

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

レイアウトコンポーネント

ブログやコンテンツの消費用に設計された複雑なレイアウトコンポーネントで、マイクロインタラクションと補色スキームが特徴です。さまざまなインタラクティブ要素が含まれており、ダークモードをサポートしています。

                <div class="bg-gray-100 dark:bg-gray-800 min-h-screen">
    <header class="bg-blue-500 dark:bg-blue-700 p-4 shadow-md transition-colors duration-300">
        <h1 class="text-white text-2xl font-bold">My Blog</h1>
        <nav class="mt-2">
            <ul class="flex space-x-4">
                <li><a href="#" class="text-white hover:text-blue-300 transition duration-200">Home</a></li>
                <li><a href="#" class="text-white hover:text-blue-300 transition duration-200">About</a></li>
                <li><a href="#" class="text-white hover:text-blue-300 transition duration-200">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main class="py-10 px-4 sm:px-8 lg:px-16">
        <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
                <img src="https://picsum.photos/400/200" alt="Blog Post" class="rounded-t-lg w-full">
                <h2 class="text-xl font-semibold mt-3">Blog Post Title</h2>
                <p class="text-gray-700 dark:text-gray-300 mt-2">This is a brief description of the blog post. Click to read more...</p>
                <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
            </article>
            <article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
                <img src="https://picsum.photos/400/200?2" alt="Blog Post" class="rounded-t-lg w-full">
                <h2 class="text-xl font-semibold mt-3">Another Blog Post Title</h2>
                <p class="text-gray-700 dark:text-gray-300 mt-2">This is another brief description. Click to read more...</p>
                <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
            </article>
            <article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
                <img src="https://picsum.photos/400/200?3" alt="Blog Post" class="rounded-t-lg w-full">
                <h2 class="text-xl font-semibold mt-3">Yet Another Blog Post Title</h2>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of yet another blog post. Click to read more...</p>
                <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
            </article>
        </section>
    </main>

    <footer class="bg-blue-500 dark:bg-blue-700 p-4 text-center text-white">
        <p>&copy; 2023 My Blog</p>
    </footer>
</div>

バッジコンポーネント

マイクロインタラクションで設計されたレスポンシブバッジコンポーネントで、補色の配色とダークテーマのサポートが特徴です。ビジネスや企業のWebサイトに最適なこのコンポーネントには、ユーザーのアクションに応答する魅力的なアニメーションが含まれています。ホバー効果などの前述の視覚的な手がかりは、ユーザーエクスペリエンスを向上させます。

開けるプレビュー

                <div class="flex flex-wrap justify-center p-4 bg-white dark:bg-gray-800">
    <div class="m-2 p-4 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <span class="font-semibold">Marketing Team</span>
        </div>
        <p class="text-sm mt-2">Achieved a 20% increase in engagement through targeted campaigns.</p>
    </div>
    <div class="m-2 p-4 bg-green-500 text-white rounded-lg shadow-lg hover:bg-green-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
            <span class="font-semibold">Sales Team</span>
        </div>
        <p class="text-sm mt-2">Closed $500k in new contracts this quarter.</p>
    </div>
    <div class="m-2 p-4 bg-red-500 text-white rounded-lg shadow-lg hover:bg-red-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
            <span class="font-semibold">Product Team</span>
        </div>
        <p class="text-sm mt-2">Launched a new product that increased market share by 15%.</p>
    </div>
    <div class="m-2 p-4 bg-purple-500 text-white rounded-lg shadow-lg hover:bg-purple-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
            <span class="font-semibold">Development Team</span>
        </div>
        <p class="text-sm mt-2">Implemented new system improvements for better performance.</p>
    </div>
</div>

認証コンポーネント

ビジネス/企業のWebサイトに適したグレースケールの配色を備えたスキューモーフィックスタイルで設計されたレスポンシブ認証コンポーネント。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md p-8 space-y-6 bg-white shadow-md rounded-xl dark:bg-gray-800">
        <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-300 text-center">Please sign in to your account</p>
        <form class="space-y-4">
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email Address</label>
                <input type="email" id="email" class="block w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-gray-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="[email protected]" required />
            </div>
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="block w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-gray-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your password" required />
            </div>
            <button type="submit" class="w-full px-4 py-2 font-bold text-white transition-colors duration-200 bg-gray-700 rounded-md hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Sign In</button>
        </form>
        <p class="mt-4 text-sm text-center text-gray-600 dark:text-gray-300">Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></p>
        <div class="mt-4 text-center">
            <img src="https://picsum.photos/100/100" alt="User Avatar" class="inline-block rounded-full" />
            <p class="mt-2 text-gray-600 dark:text-gray-300">Username</p>
        </div>
    </div>
</div>

ツールチップコンポーネント

マイクロインタラクション、トライアドカラースキームで設計されたレスポンシブツールチップコンポーネントで、プロフェッショナルなビジネス/企業Webサイトのダークモードをサポートします。これには、魅力的なアニメーション、インタラクティブな要素を備えた豊富なインターフェイスが含まれ、スタイリングにはTailwind CSSを使用します。

開けるプレビュー

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500 dark:focus:ring-blue-300" aria-expanded="true" aria-haspopup="true">
      Hover over me
    </button>
  </div>

  <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-lg transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100">
    <div class="p-3">
      <div class="flex items-center space-x-3">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover">
        <div>
          <p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">John Doe</p>
          <p class="text-sm leading-5 text-gray-500 dark:text-gray-400">Senior Developer</p>
        </div>
      </div>
      <div class="mt-2 text-gray-600 dark:text-gray-300">
        <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.</p>
      </div>
      <div class="mt-2 flex justify-end">
        <button class="px-3 py-1 bg-blue-500 dark:bg-blue-300 text-white dark:text-gray-800 rounded-md hover:bg-blue-600 dark:hover:bg-blue-400 transform transition-transform duration-300 hover:scale-105">Action</button>
      </div>
    </div>
  </div>
</div>

<style>
@media (prefers-reduced-motion: no-preference) {
  .transition-opacity {
    transition: opacity 0.5s ease-in-out;
  }
}
</style>

トップに戻るボタン

glassmorphism効果で設計されたレスポンシブなBack to Topボタンコンポーネントで、プロフェッショナルなビジネスWebサイトに適しています。最小限の要素を備えたシンプルなレイアウトが特徴で、明るいテーマと暗いテーマの両方でうまく機能します。

開けるプレビュー

                <div class="fixed bottom-5 right-5">
    <a href="#" class="bg-white bg-opacity-30 backdrop-blur-md border border-gray-200 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-600 text-gray-800 dark:text-gray-200 rounded-full p-3 shadow-lg hover:shadow-2xl transition-transform transform hover:scale-110">
        <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="M12 4v16m8-8H4" />
        </svg>
    </a>
</div>

ソーシャル共有ボタンコンポーネント

レトロ/ビンテージデザインとパステルカラーの配色でスタイル化されたレスポンシブソーシャルシェアボタンコンポーネントで、ダークモードをサポートし、ソーシャルメディアインターフェイスに適しています。

開けるプレビュー

                <div class="container mx-auto p-6">
    <h2 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-4">Share This!</h2>
    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
        <div class="bg-pink-200 dark:bg-pink-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://facebook.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Facebook</a>
        </div>
        <div class="bg-blue-200 dark:bg-blue-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40?random=1" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://twitter.com" class="font-semibold text-gray-800 dark:text-gray-200">Tweet This</a>
        </div>
        <div class="bg-green-200 dark:bg-green-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40?random=2" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://instagram.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Instagram</a>
        </div>
        <div class="bg-yellow-200 dark:bg-yellow-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40?random=3" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://linkedin.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on LinkedIn</a>
        </div>
        <div class="bg-purple-200 dark:bg-purple-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40?random=4" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://pinterest.com" class="font-semibold text-gray-800 dark:text-gray-200">Pin It</a>
        </div>
        <div class="bg-red-200 dark:bg-red-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40?random=5" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://tumblr.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Tumblr</a>
        </div>
    </div>
</div>

メディア埋め込みコンポーネント

ニューモーフィズムスタイルで設計されたレスポンシブメディア埋め込みコンポーネントで、鮮やかな色とダッシュボードアプリケーションに適したインタラクティブインターフェイスが特徴です。

開けるプレビュー

                <div class="flex flex-col items-center p-6 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-xl transition-shadow duration-300"><h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Media Embed</h2><div class="flex flex-col items-center w-full mb-4"><img src="https://picsum.photos/400/200" alt="Media" class="rounded-lg shadow-lg transition-transform duration-300 transform hover:scale-105"/><p class="text-gray-600 dark:text-gray-300 mt-2">Watch our latest video to stay updated!</p></div><div class="flex w-full justify-between items-center mb-2"><button class="bg-blue-500 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Play</button><button class="bg-red-500 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Like</button><button class="bg-yellow-500 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Share</button></div><div class="flex items-center mt-4"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-md"/><p class="text-gray-800 dark:text-white ml-2">User Name</p></div></div>

メディアコンポーネントコンポーネント

マテリアルデザインと単色の配色を備えたeコマース用のレスポンシブメディアコンポーネント。

開けるプレビュー

                <div class="max-w-xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border border-gray-300 dark:border-gray-700" />
        <div>
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400">Product description goes here. This is a brief introduction to the product.</p>
        </div>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-72 object-cover rounded-md shadow-sm dark:shadow-lg" />
    </div>
    <div class="mt-4 flex justify-between items-center">
        <span class="text-lg font-bold text-gray-800 dark:text-gray-200">$49.99</span>
        <button class="px-4 py-2 bg-blue-600 text-white rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-500 dark:focus:ring-blue-400 transition duration-300 ease-in-out">Add to Cart</button>
    </div>
</div>

ナビゲーション拡張コンポーネントコンポーネント

類似の配色、レスポンシブデザイン、ダークモードのサポートを備えた、企業のWebサイト向けの複雑なブルータリズムスタイルのナビゲーションコンポーネント。珍しいレイアウトとハイコントラストが特徴です。

開けるプレビュー

                <nav class="bg-blue-200 dark:bg-gray-900 p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center flex-wrap">
    <div class="text-xl font-bold text-blue-800 dark:text-blue-200 uppercase tracking-widest">Company Name</div>
    <div class="block lg:hidden">
      <button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-blue-800 border-blue-800 dark:text-blue-200 dark:border-blue-200">
        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/></svg>
      </button>
    </div>
    <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block" id="nav-content">
      <ul class="lg:flex items-center justify-end flex-1">
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Home</a>
        </li>
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">About</a>
        </li>
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Services</a>
        </li>
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Contact</a>
        </li>
         <li class="my-2 lg:my-0">
          <div class="relative">
            <button class="bg-blue-800 dark:bg-blue-200 text-blue-200 dark:text-blue-800 font-bold uppercase py-2 px-4 border border-blue-800 dark:border-blue-200 rounded">
              Dropdown
            </button>
            <div class="absolute right-0 mt-2 w-48 bg-blue-200 dark:bg-gray-700 rounded shadow-lg py-2 z-10 hidden">
              <a href="#" class="block px-4 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-300 dark:hover:bg-gray-600">Link 1</a>
              <a href="#" class="block px-4 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-300 dark:hover:bg-gray-600">Link 2</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

価格表示コンポーネント

レトロ/ビンテージの美学と鮮やかな色でスタイリングされたレスポンシブな価格表示コンポーネントで、ソーシャルメディアインターフェイスに適しており、ダークモードをサポートしています。

開けるプレビュー

                <div class="max-w-xs mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-5">
        <img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-40 object-cover rounded-md mb-4">
        <div class="flex items-center mb-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
            <div class="ml-3">
                <h2 class="text-lg text-violet-600 dark:text-violet-400 font-bold">John Doe</h2>
                <span class="text-sm text-gray-600 dark:text-gray-300">@johndoe</span>
            </div>
        </div>
        <h3 class="text-2xl text-red-600 dark:text-red-400 font-semibold mb-2">$49.99</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4">Original Vintage T-Shirt from the 80s.</p>
        <button class="w-full bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-200">Add to Cart</button>
    </div>
</div>

1 ... 226 227 228 229 230 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント