検索コンポーネント

すべてのコンポーネント

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

ハンバーガーメニューコンポーネント

ガラスモルフィズムデザインの複雑なレスポンシブハンバーガーメニューコンポーネントで、すりガラスのような半透明の効果が特徴で、作品や製品を展示するポートフォリオに適しています。ダークテーマのサポートが含まれており、スタイリングにはTailwind CSSを利用しています。

開けるプレビュー

                <div class="relative flex flex-col items-center bg-gray-800 min-h-screen p-4 dark:bg-gray-900">
    <button class="hamburger flex items-center justify-center w-10 h-10 bg-white bg-opacity-30 backdrop-blur-md rounded-full shadow-lg hover:bg-opacity-50 dark:bg-gray-700 dark:hover:bg-opacity-50">
        <span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
        <span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
        <span class="block w-6 h-0.5 bg-gray-800 dark:bg-white transition-transform duration-300 ease-in-out" />
    </button>
    <nav class="absolute left-0 top-12 w-64 bg-white bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg transition-transform duration-300 ease-in-out transform -translate-x-full group-hover:translate-x-0 dark:bg-gray-700">
        <div class="flex flex-col p-4">
            <a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Home</a>
            <a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">About</a>
            <a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Portfolio</a>
            <a href="#" class="mb-2 p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Contact</a>
        </div>
    </nav>
    <div class="mt-5 w-full flex justify-center">
        <img src="https://picsum.photos/200/300" alt="Portfolio Item" class="rounded-lg shadow-lg">
    </div>
    <div class="mt-5 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white bg-opacity-90 shadow-lg">
        <p class="ml-2 text-white">John Doe</p>
    </div>
</div>

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

レトロビンテージのユーザーは、トライアドカラー、適度な複雑さ、応答性、およびダークモードのサポートを備えたeコマースのコンポーネントについて言及しています。JavaScript はありません。

開けるプレビュー

                <div class="container mx-auto px-4 py-8 theme-changer and dark:bg-gray-800">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

    <!-- User Mention Card -->
    <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6 transform transition-transform duration-300 hover:scale-105 border-4 border-purple-500 dark:border-purple-600">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <h3 class="text-xl font-bold text-blue-600 dark:text-blue-400">Rad RetroDude86</h3>
          <p class="text-gray-600 dark:text-gray-300">Active Shopper</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 mb-4">
        Just bought the awesome ' totally tubular ' t-shirt! This store is maximum cool! #retrofashion #ecommercewin
      </p>
      <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
        <span>Mentioned Product &hearts;</span>
        <img class="w-16 h-16 object-cover rounded" src="https://picsum.photos/seed/retroshirt/150/150" alt="Product Image">
      </div>
    </div>

    <!-- User Mention Card eo --> 
    
        <!-- User Mention Card -->
    <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6 transform transition-transform duration-300 hover:scale-105 border-4 border-yellow-500 dark:border-yellow-600">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
        <div>
          <h3 class="text-xl font-bold text-blue-600 dark:text-blue-400">NeonLightsQueen</h3>
          <p class="text-gray-600 dark:text-gray-300">New Arrival Enthusiast</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 mb-4">
        OMG, the new accessories are so fetch!  Totally loving the vibe.  Can't wait for more! #80sstyle #shopaholic
      </p>
      <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
        <span>Mentioned Product &hearts;</span>
        <img class="w-16 h-16 object-cover rounded" src="https://picsum.photos/seed/retrobag/150/150" alt="Product Image">
      </div>
    </div>

    <!-- User Mention Card eo --> 
    
        <!-- User Mention Card -->
    <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6 transform transition-transform duration-300 hover:scale-105 border-4 border-green-500 dark:border-green-600">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <div>
          <h3 class="text-xl font-bold text-blue-600 dark:text-blue-400">SynthwaveSam</h3>
          <p class="text-gray-600 dark:text-gray-300">Vinyl Collector</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 mb-4">
        Scored some classic vinyls from here.  Sounding totally rad on my setup!  Highly recommend! #vinylcollection #musiconline
      </p>
      <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
        <span>Mentioned Product &hearts;</span>
        <img class="w-16 h-16 object-cover rounded" src="https://picsum.photos/seed/retroviny/150/150" alt="Product Image">
      </div>
    </div>

    <!-- User Mention Card eo --> 

  </div>
</div>

登録フォームコンポーネント

Neumorphism デザイン、グレースケールカラースキーム、適度な複雑さ、Tailwind CSS を使用したレスポンシブダークテーマのサポートを備えた登録フォームコンポーネント。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-6 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-gray-300 to-gray-600 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl dark:from-gray-700 dark:to-gray-900"></div>
    <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20 dark:bg-gray-800">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Register</h1>
        </div>
        <div class="divide-y divide-gray-200 dark:divide-gray-700">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:opacity-100 dark:text-gray-300">
            <div class="relative">
              <input autocomplete="off" id="email" name="email" type="text" class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:borer-rose-600 dark:border-gray-600 dark:text-white dark:focus:borer-gray-500" placeholder="Email address" />
              <label for="email" class="absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 transition-all after:content-['*'] after:ml-0.5 after:text-red-500 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500">Email Address</label>
            </div>
            <div class="relative">
              <input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:borer-rose-600 dark:border-gray-600 dark:text-white dark:focus:borer-gray-500" placeholder="Password" />
              <label for="password" class="absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 transition-all after:content-['*'] after:ml-0.5 after:text-red-500 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500">Password</label>
            </div>
            <div class="relative">
              <button class="bg-gray-500 text-white rounded-md px-2 py-1 dark:bg-gray-700">Submit</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

レトロな目次

レトロ/ビンテージデザイン、類似の配色、ダークモードをサポートするレスポンシブ目次コンポーネント。ビジネス/企業のWebサイトに適しています。Tailwind CSSをJavaScriptなしで使用しています。

開けるプレビュー

                <div class="bg-gray-200 dark:bg-gray-800 retro-analogous-colors p-6 rounded-lg shadow-lg">
  <h2 class="text-xl font-bold mb-4 dark:text-white">Table of Contents</h2>
  <ul class="space-y-2">
    <li><a href="#section-1" class="text-blue-800 dark:text-blue-300 hover:underline">Section 1: Introduction</a></li>
    <li><a href="#section-2" class="text-blue-800 dark:text-blue-300 hover:underline">Section 2: Getting Started</a></li>
    <li><a href="#section-3" class="text-blue-800 dark:text-blue-300 hover:underline">Section 3: Core Concepts</a></li>
    <li><a href="#section-4" class="text-blue-800 dark:text-blue-300 hover:underline">Section 4: Advanced Topics</a></li>
    <li><a href="#section-5" class="text-blue-800 dark:text-blue-300 hover:underline">Section 5: Conclusion</a></li>
  </ul>
</div>

<style>
  .retro-analogous-colors {
    /* Define your retro analogous colors here using Tailwind's custom colors or by extending the theme */
    /* Example (you would define these in your tailwind.config.js): */
    /* background-color: theme('colors.retro-light'); */
    /* color: theme('colors.retro-dark'); */
  }

  .dark .retro-analogous-colors {
     /* background-color: theme('colors.retro-dark'); */
     /* color: theme('colors.retro-light'); */
  }
</style>

バッジコンポーネント

Skeuomorphismスタイル、Triadicカラースキーム、シンプルな複雑さを備えたレスポンシブBadgesコンポーネントで、ダークテーマをサポートするポートフォリオ向けに設計されています。

開けるプレビュー

                <div class="p-4 bg-gradient-to-br from-gray-300 via-gray-400 to-gray-500 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 rounded-xl shadow-xl max-w-sm mx-auto">
  <div class="text-center">
    <img class="w-24 h-24 rounded-full mx-auto border-4 border-white shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mt-4">John Doe</h2>
    <p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>
  </div>
  <div class="flex justify-center mt-6 space-x-3">
    <span class="inline-block bg-teal-500 text-white text-xs px-3 py-1 rounded-full shadow-md">HTML</span>
    <span class="inline-block bg-fuchsia-500 text-white text-xs px-3 py-1 rounded-full shadow-md">CSS</span>
    <span class="inline-block bg-amber-500 text-white text-xs px-3 py-1 rounded-full shadow-md">Tailwind CSS</span>
  </div>
  <div class="mt-6 text-center text-gray-700 dark:text-gray-300 text-sm">
    <p>Showcasing skills and expertise.</p>
  </div>
</div>

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

マテリアルデザインでデザインされたレスポンシブギャラリーコンポーネントで、ダッシュボードの目的で類似の配色が施されています。

開けるプレビュー

                <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">Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Image Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400">Description for image 1.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Image Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400">Description for image 2.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Image Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400">Description for image 3.</p>
            </div>
        </div>
        <!-- Repeat more images as needed -->
    </div>
    <div class="mt-6">
        <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">User Avatars</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full w-16 h-16">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar 1" class="rounded-full">
            </div>
            <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full w-16 h-16">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar 2" class="rounded-full">
            </div>
            <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full w-16 h-16">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar 3" class="rounded-full">
            </div>
            <div class="flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full w-16 h-16">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar 4" class="rounded-full">
            </div>
            <!-- Repeat more avatars as needed -->
        </div>
    </div>
</div>

サイドバーコンポーネント

Glassmorphism効果と補色スキームで設計されたレスポンシブサイドバーコンポーネントで、ブログやコンテンツの消費に適しています。

開けるプレビュー

                <aside class="bg-white bg-opacity-30 backdrop-blur-lg shadow-md rounded-lg p-4 w-64 dark:bg-gray-800 dark:bg-opacity-30">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">User Name</h2>
    </div>
    <nav>
        <ul class="space-y-2">
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Home</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">About</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Blog</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Contact</a>
            </li>
        </ul>
    </nav>
    <div class="mt-4">
        <h3 class="text-md font-semibold text-gray-800 dark:text-white">Featured Posts</h3>
        <ul class="space-y-2">
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 1</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 2</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 3</a>
            </li>
        </ul>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/300/200" alt="Sample Image" class="rounded-lg shadow-md">
    </div>
</aside>

ドロップダウンメニューコンポーネント

ダークモードUIのレスポンシブドロップダウンメニューコンポーネント

開けるプレビュー

                <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">

<div class="dark:bg-gray-900 dark:text-white min-h-screen p-8">

  <div class="relative inline-block text-left">
    <div>
      <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-800 focus:ring-indigo-500" id="menu-button" 
              aria-expanded="true" aria-haspopup="true">
        Options
        <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <!-- Dropdown menu, show/hide based on menu state. -->
    <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
      <div class="py-1" role="none">
        <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
        <form method="POST" action="#" role="none">
          <button type="submit" class="text-gray-700 dark:text-gray-200 block w-full text-left px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-3">
            Sign out
          </button>
        </form>
      </div>
    </div>
  </div>

</div>

通知コンポーネント

ソーシャルメディアインターフェースのダークモードサポートを備えたレスポンシブ通知コンポーネントで、鮮やかな配色。

開けるプレビュー

                <div class="p-4 bg-gray-900 dark:bg-black text-white rounded-lg shadow-md">
  <h2 class="text-xl font-bold mb-4 text-teal-400">Notifications</h2>
  <div class="space-y-4">
    <div class="flex items-center border-b border-gray-700 pb-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="flex-grow"><span class="font-semibold text-purple-400">John Doe</span> liked your post.</p>
      <span class="text-gray-500 text-sm">2 min ago</span>
    </div>
    <div class="flex items-center border-b border-gray-700 pb-4">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="flex-grow"><span class="font-semibold text-pink-400">Jane Smith</span> commented on your photo.</p>
      <span class="text-gray-500 text-sm">1 hour ago</span>
    </div>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="flex-grow"><span class="font-semibold text-yellow-400">Peter Jones</span> started following you.</p>
      <span class="text-gray-500 text-sm">3 hours ago</span>
    </div>
  </div>
</div>

マテリアルデザインボタンコンポーネント

ソーシャルメディア用のアーストーンのマテリアルデザインボタンコンポーネント

開けるプレビュー

                ```html
<div class="flex flex-col items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
  <div class="flex space-x-4 rtl:space-x-reverse">
    <button class="px-4 py-2 bg-amber-600 text-white dark:bg-amber-700 dark:text-stone-200 rounded-md shadow-md hover:bg-amber-700 dark:hover:bg-amber-800 transition duration-300 ease-in-out">Like</button>
    <button class="px-4 py-2 bg-stone-400 text-stone-800 dark:bg-stone-600 dark:text-stone-200 rounded-md shadow-md hover:bg-stone-500 dark:hover:bg-stone-700 transition duration-300 ease-in-out">Comment</button>
    <button class="px-4 py-2 bg-green-600 text-white dark:bg-green-700 dark:text-stone-200 rounded-md shadow-md hover:bg-green-700 dark:hover:bg-green-800 transition duration-300 ease-in-out">Share</button>
  </div>
</div>
```

1 ... 224 225 226 227 228 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント