検索コンポーネント

すべてのコンポーネント

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

Glassmorphism フォローボタン

Glassmorphismデザイン、ダークモードサポート、Tailwind CSSを使用したレスポンシブフォローボタン。

                <template>
  <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800">
    <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0 backdrop-filter backdrop-blur-lg bg-opacity-20">
      Follow
    </span>
  </button>
</template>

ナビゲーション強化コンポーネント

Tailwind CSS を使用してマテリアルデザインスタイルで設計されたレスポンシブナビゲーションコンポーネントで、ダークテーマのサポートとレスポンシブエフェクトが特徴です。

開けるプレビュー

                <nav class="bg-white dark:bg-gray-800 shadow-md">
    <div class="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50" alt="Logo" class="h-10 w-10 rounded-full">
            <a href="#" class="text-gray-800 dark:text-white font-semibold text-lg">Brand</a>
        </div>
        <div class="hidden md:flex space-x-6">
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Home</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">About</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Services</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Contact</a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-800 dark:text-white focus:outline-none">
                <svg class="w-6 h-6" 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="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="px-4 md:hidden">
        <div class="py-4 flex flex-col space-y-2">
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Home</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">About</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Services</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Contact</a>
        </div>
    </div>
</nav>

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-8">
    <h1 class="text-3xl font-bold mb-4">Welcome to Our Website</h1>
    <p class="mb-4">This is a responsive navigation enhancement component made using Tailwind CSS with Material Design principles.</p>
    <img src="https://picsum.photos/800/400" alt="Placeholder" class="rounded shadow-lg mb-4">
    <div class="flex">
        <div class="w-1/3">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full h-16 w-16 shadow">
        </div>
        <div class="w-2/3 pl-4">
            <h2 class="text-xl font-semibold">John Doe</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur.</p>
        </div>
    </div>
</div>

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

ブルータリズムのソーシャルコンポーネントで、ハイコントラスト、レスポンシブエフェクト、Tailwind CSSを使用したダークテーマのサポートなど、大胆なデザインを披露しています。ユーザーのアバター、ソーシャルメディアのリンク、プレースホルダー画像が特徴です。

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Connect With Us</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
            <img src="https://picsum.photos/200/200?random=1" alt="Profile 1" class="rounded-full mb-2 mx-auto" />
            <p class="text-lg font-semibold">John Doe</p>
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@john_doe</a>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
            <img src="https://picsum.photos/200/200?random=2" alt="Profile 2" class="rounded-full mb-2 mx-auto" />
            <p class="text-lg font-semibold">Jane Smith</p>
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@jane_smith</a>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
            <img src="https://picsum.photos/200/200?random=3" alt="Profile 3" class="rounded-full mb-2 mx-auto" />
            <p class="text-lg font-semibold">Alice Johnson</p>
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@alice_j</a>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
            <img src="https://picsum.photos/200/200?random=4" alt="Profile 4" class="rounded-full mb-2 mx-auto" />
            <p class="text-lg font-semibold">Bob Brown</p>
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@bob_brown</a>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white">Follow Us</h3>
        <div class="flex space-x-4 mt-2">
            <a href="#" class="text-gray-600 dark:text-gray-400">Facebook</a>
            <a href="#" class="text-gray-600 dark:text-gray-400">Twitter</a>
            <a href="#" class="text-gray-600 dark:text-gray-400">Instagram</a>
            <a href="#" class="text-gray-600 dark:text-gray-400">LinkedIn</a>
        </div>
    </div>
</div>

Table of Contents コンポーネント

Glassmorphism スタイルでデザインされたレスポンシブな目次コンポーネントで、ぼかし効果のあるすりガラスのような半透明の要素が特徴で、Tailwind CSS で明るいテーマと暗いテーマの両方をサポートします。

開けるプレビュー

                <div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-60 backdrop-blur-lg border border-gray-300 dark:border-gray-600 rounded-lg p-6 shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Table of Contents</h2>
    <ul class="mt-4 space-y-3">
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section1" class="text-gray-800 dark:text-white">Section 1: Introduction</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section2" class="text-gray-800 dark:text-white">Section 2: Features</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section3" class="text-gray-800 dark:text-white">Section 3: Installation</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section4" class="text-gray-800 dark:text-white">Section 4: Usage</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section5" class="text-gray-800 dark:text-white">Section 5: Conclusion</a>
        </li>
    </ul>
</div>

ニューモーフィズムアコーディオンコンポーネント

ニューモーフィックデザイン、レスポンシブエフェクト、Tailwind CSSを使用したダークテーマのサポートを備えたアコーディオンコンポーネント。

開けるプレビュー

                <div x-data="{ activeTab: 1 }" class="max-w-3xl mx-auto p-8 dark:bg-gray-800 dark:text-white rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">

  <div class="mb-6">
    <button @click="activeTab = activeTab === 1 ? null : 1" class="w-full text-left py-3 px-4 text-gray-700 font-semibold rounded-md focus:outline-none focus:ring focus:ring-blue-300 dark:text-gray-300 dark:focus:ring-blue-700 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition duration-300 ease-in-out">
      <h2>Section 1</h2>
    </button>
    <div x-show="activeTab === 1" class="mt-2 p-4 text-gray-600 leading-relaxed dark:text-gray-400">
      <p>Content for section 1. This is where the detailed information for the first section goes.</p>
    </div>
  </div>

  <div class="mb-6">
    <button @click="activeTab = activeTab === 2 ? null : 2" class="w-full text-left py-3 px-4 text-gray-700 font-semibold rounded-md focus:outline-none focus:ring focus:ring-blue-300 dark:text-gray-300 dark:focus:ring-blue-700 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition duration-300 ease-in-out">
      <h2>Section 2</h2>
    </button>
    <div x-show="activeTab === 2" class="mt-2 p-4 text-gray-600 leading-relaxed dark:text-gray-400">
      <p>Content for section 2. More detailed information can be added here for the second section.</p>
    </div>
  </div>

  <div class="mb-6">
    <button @click="activeTab = activeTab === 3 ? null : 3" class="w-full text-left py-3 px-4 text-gray-700 font-semibold rounded-md focus:outline-none focus:ring focus:ring-blue-300 dark:text-gray-300 dark:focus:ring-blue-700 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition duration-300 ease-in-out">
      <h2>Section 3</h2>
    </button>
    <div x-show="activeTab === 3" class="mt-2 p-4 text-gray-600 leading-relaxed dark:text-gray-400">
      <p>Content for section 3. This is the content for the third and final section of the accordion.</p>
    </div>
  </div>

</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #cbced1, -7px -7px 15px #ffffff;
  }

  .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #4b5563, -7px -7px 15px #374151;
  }

  .shadow-neumorphic-light-inset {
    box-shadow: inset 5px 5px 10px #cbced1, inset -5px -5px 10px #ffffff;
  }

  .shadow-neumorphic-dark-inset {
    box-shadow: inset 5px 5px 10px #4b5563, inset -5px -5px 10px #374151;
  }

  /* Basic responsiveness */
  @media (max-width: 768px) {
    .p-8 {
      padding: 2rem;
    }
  }
</style>

トップに戻るボタンコンポーネント

マテリアルデザインの原則に従うレスポンシブな「Back to Top」ボタンで、スタイリングとレスポンシブエフェクトのためのTailwind CSSによるダークモードをサポートします。

開けるプレビュー

                <div class="fixed bottom-5 right-5 z-50">
    <button class="bg-blue-500 text-white rounded-full p-2 shadow-lg transition-transform transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:shadow-md dark:focus:ring-blue-300">
        <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="M12 4v16m0 0L8 16m4 4l4-4" />
        </svg>
    </button>
</div>

<style>
  /* Tailwind dark mode support */
  @media (prefers-color-scheme: dark) {
      .bg-blue-500 { background-color: #3b82f6; }
      .bg-blue-700 { background-color: #2563eb; }
      .text-white { color: #ffffff; }
      .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
      .dark .shadow-md { box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); }
  }
</style>

Glassmorphismフッター

glassmorphism スタイルで設計されたレスポンシブフッターコンポーネントで、すりガラスのようなエフェクトと Tailwind CSS を使用したダークテーマのサポートが特徴です。

開けるプレビュー

                <footer class="bg-white bg-opacity-30 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border-t border-gray-200 dark:border-gray-700 py-10">
    <div class="container mx-auto px-6">
        <div class="flex flex-col md:flex-row justify-between items-center text-center md:text-left">
            <div class="mb-4 md:mb-0">
                <h3 class="text-xl font-semibold">Your Company</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">Your slogan or tagline goes here.</p>
            </div>
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/50/50" alt="Random placeholder" class="rounded-full border border-gray-300 dark:border-gray-600">
                <p class="text-sm text-gray-600 dark:text-gray-400">Contact us: [email protected]</p>
            </div>
        </div>
        <div class="flex flex-col md:flex-row justify-center md:justify-between mt-8">
            <div class="mb-4 md:mb-0">
                <ul class="flex space-x-4">
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Home</a></li>
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">About</a></li>
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Services</a></li>
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
                </ul>
            </div>
            <div>
                <p class="text-sm text-gray-600 dark:text-gray-400">© 2023 Your Company. All rights reserved.</p>
            </div>
        </div>
    </div>
</footer>

バッジコンポーネント

Glassmorphismスタイルでデザインされたレスポンシブバッジコンポーネントで、すりガラスのような半透明の要素とぼかし効果が特徴で、ダークモードをサポートしています。

開けるプレビュー

                <div class="flex flex-wrap justify-center space-x-4 mt-10">
    <!-- Badge 1 -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mb-2">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">John Doe</h3>
        <p class="text-gray-500 dark:text-gray-400">Web Developer</p>
    </div>
    <!-- Badge 2 -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/50/51" alt="Avatar" class="rounded-full mb-2">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Jane Smith</h3>
        <p class="text-gray-500 dark:text-gray-400">Graphic Designer</p>
    </div>
    <!-- Badge 3 -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/50/52" alt="Avatar" class="rounded-full mb-2">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Mike Lee</h3>
        <p class="text-gray-500 dark:text-gray-400">UX Designer</p>
    </div>
    <!-- Badge 4 -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/50/53" alt="Avatar" class="rounded-full mb-2">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Emily Clark</h3>
        <p class="text-gray-500 dark:text-gray-400">Product Manager</p>
    </div>
</div>

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

ダークテーマのサポートを含むマテリアルデザインの原則でスタイル設定されたレスポンシブCAPTCHAコンポーネント。

開けるプレビュー

                <div class="flex flex-col items-center justify-center p-6 bg-white rounded-lg shadow-md max-w-sm mx-auto dark:bg-gray-800 dark:shadow-lg">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Please prove you're human</h2>
    <div class="mt-4 mb-6">
        <img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="w-full h-auto rounded-lg shadow-sm" />
    </div>
    <div class="flex items-center justify-between w-full">
        <input type="text" placeholder="Enter the text" class="border border-gray-300 rounded-lg p-2 w-3/4 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" />
        <button class="ml-2 px-4 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600 transition duration-200">Submit</button>
    </div>
    <div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
        <p>If you can't read the text, refresh to get a new image.</p>
    </div>
</div>

成功メッセージコンポーネント

3D デザインスタイル、レスポンシブ効果、Tailwind CSS を使用したダークテーマのサポートで成功メッセージを表示するためのコンポーネント。

開けるプレビュー

                <div class="p-6 max-w-md mx-auto bg-white rounded-lg shadow-md dark:bg-gray-800 transition duration-300 ease-in-out transform hover:scale-105">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50/50?random=1" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 shadow-lg dark:shadow-xl">
        <div class="flex-1">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h2>
            <p class="text-gray-600 dark:text-gray-400">Your action was completed successfully.</p>
        </div>
    </div>
    <div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
        <span class="text-sm text-gray-500 dark:text-gray-400">2 minutes ago</span>
        <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">View Details</a>
    </div>
</div>

1 ... 282 283 284 285 286 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント