検索コンポーネント

すべてのコンポーネント

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

ヘッダーコンポーネント

ポートフォリオ用のミニマリストでフラットなデザインのヘッダーコンポーネントで、ダークテーマのサポートと複数のインタラクティブ要素を備えたレスポンシブデザインが特徴です。

                <header class="bg-white dark:bg-gray-800 shadow-md">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/50" alt="Logo" class="h-10 w-10 rounded-full">
            <h1 class="ml-3 text-gray-800 dark:text-white text-xl font-bold">My Portfolio</h1>
        </div>
        <nav class="hidden md:flex space-x-8">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Home</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">About</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Projects</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Contact</a>
        </nav>
        <div class="relative md:hidden">
            <button class="text-gray-600 dark:text-gray-300 focus:outline-none">
                <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="M4 6h16M4 12h16m-7 6h7"></path>
                </svg>
            </button>
        </div>
    </div>
</header>
<div class="block md:hidden bg-gray-100 dark:bg-gray-700">
    <div class="container mx-auto px-4 py-2">
        <div class="flex flex-col space-y-2">
            <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Home</a>
            <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">About</a>
            <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Projects</a>
            <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Contact</a>
        </div>
    </div>
</div>

フッターナビゲーションコンポーネント

マテリアルデザインの原則と、ビジネス/企業のWebサイト向けの類似の配色でスタイル設定されたシンプルなフッターナビゲーションコンポーネント。ダークモードをサポートし、応答性に優れています。

開けるプレビュー

                <footer class="bg-gray-100 dark:bg-gray-800 py-6">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <img src="https://picsum.photos/200/50" alt="Company Logo" class="h-10" />
            </div>
            <div class="flex flex-col md:flex-row space-x-4">
                <a href="#" class="text-gray-800 dark:text-gray-300 hover:underline">About Us</a>
                <a href="#" class="text-gray-800 dark:text-gray-300 hover:underline">Services</a>
                <a href="#" class="text-gray-800 dark:text-gray-300 hover:underline">Contact</a>
                <a href="#" class="text-gray-800 dark:text-gray-300 hover:underline">Privacy Policy</a>
            </div>
        </div>
        <div class="mt-6 text-center">
            <p class="text-gray-600 dark:text-gray-400 text-sm">© 2023 Company Name. All rights reserved.</p>
        </div>
    </div>
</footer>

レトロなブログモーダル

レトロビンテージにインスパイアされたブログコンテンツ用のモーダルコンポーネントで、補色スキーム、インタラクティブ要素による適度な複雑さ、レスポンシブデザイン、ダークモードのサポートが特徴です。JavaScript は使用せず、HTML と Tailwind CSS クラスのみに依存しています。画像はpicsum.photosから、アバターは randomuser.me から提供されています。

開けるプレビュー

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-cyan-800 dark:text-white">
    <div class="mt-3 text-center">
      <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-cyan-100 dark:bg-cyan-600">
        <svg class="h-6 w-6 text-cyan-600 dark:text-cyan-100" 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 13l4 4L19 7"></path></svg>
      </div>
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Modal Title</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-200">Modal Content Goes Here. Replace with your blog content or message.</p>
        <img class="mt-4 rounded-md" src="https://picsum.photos/400/200" alt="Placeholder Image">
        <div class="flex justify-center mt-4">
          <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
        </div>
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-cyan-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-cyan-600 focus:outline-none focus:ring-2 focus:ring-cyan-300 dark:bg-cyan-700 dark:hover:bg-cyan-900 dark:focus:ring-cyan-800">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

スキューモーフィックパステルサイドバー

Skeuomorphic デザインとパステルカラーのシンプルでレスポンシブなサイドバーコンポーネントで、ブログやコンテンツサイトに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="flex flex-col h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex items-center justify-center h-16 bg-gray-300 dark:bg-gray-700 shadow-md">
    <span class="text-lg font-semibold text-gray-700 dark:text-gray-200">Blog Menu</span>
  </div>
  <nav class="flex-grow p-4">
    <ul class="space-y-2">
      <li>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
          Home
        </a>
      </li>
      <li>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
          About
        </a>
      </li>
      <li>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
          Contact
        </a>
      </li>
    </ul>
  </nav>
</div>

マイクロインタラクションによるフォローボタン

ダークテーマのサポートとマイクロインタラクションを備えたレスポンシブフォローボタンコンポーネントで、Tailwind CSSを使用するソーシャルメディアアプリケーション向けに設計されています。単色の配色と複雑なインタラクティブ要素が特徴です。

開けるプレビュー

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative inline-block group">
    <button class="px-6 py-3 text-sm font-semibold text-white bg-blue-600 rounded-full transition-all duration-300 ease-in-out transform group-hover:scale-105 group-active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:group-hover:bg-blue-600 dark:focus:ring-blue-600">
      Follow
    </button>
    <div class="absolute inset-0 rounded-full bg-blue-500 opacity-0 blur transition-all duration-500 ease-in-out group-hover:opacity-70"></div>
  </div>
</div>

3Dカルーセルスライダー

3Dデザインスタイルとソーシャルメディアインターフェース用のパステルカラースキームを備えたシンプルで応答性の高いカルーセルスライダーで、ダークモードをサポートします。

開けるプレビュー

                <div class="relative w-full max-w-2xl mx-auto mt-10">
    <!-- Carousel container -->
    <div class="overflow-hidden rounded-lg shadow-2xl">
        <div class="flex transition-transform duration-300 ease-in-out transform perspective-1000">
            <!-- Carousel item 1 -->
            <div class="w-full flex-shrink-0 transition-all duration-500 transform hover:scale-105 dark:bg-gray-800 bg-pastel-blue rounded-lg">
                <img class="w-full h-full object-cover" src="https://picsum.photos/600/300?random=1" alt="Carousel Image 1">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Image Title 1</h2>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description for image 1.</p>
                </div>
            </div>
            <!-- Carousel item 2 -->
            <div class="w-full flex-shrink-0 transition-all duration-500 transform hover:scale-105 dark:bg-gray-800 bg-pastel-green rounded-lg">
                <img class="w-full h-full object-cover" src="https://picsum.photos/600/300?random=2" alt="Carousel Image 2">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Image Title 2</h2>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description for image 2.</p>
                </div>
            </div>
            <!-- Carousel item 3 -->
            <div class="w-full flex-shrink-0 transition-all duration-500 transform hover:scale-105 dark:bg-gray-800 bg-pastel-yellow rounded-lg">
                <img class="w-full h-full object-cover" src="https://picsum.photos/600/300?random=3" alt="Carousel Image 3">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Image Title 3</h2>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description for image 3.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Navigation buttons -->
    <button class="absolute top-1/2 left-0 z-10 p-2 text-white bg-blue-500 rounded-full hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">
        &#10094;
    </button>
    <button class="absolute top-1/2 right-0 z-10 p-2 text-white bg-blue-500 rounded-full hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">
        &#10095;
    </button>
    <!-- Avatar section -->
    <div class="flex justify-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow-lg">
        <span class="text-lg font-medium text-gray-800 dark:text-gray-200 ml-2">User Name</span>
    </div>
</div>

ログイン/サインアップコンポーネント

マテリアルデザインの原則と、ダークテーマをサポートするビジネスおよび企業のWebサイト向けの単色の配色を使用した複雑なログイン/サインアップコンポーネント。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 text-center mb-6">Welcome</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-4">Please login or signup to continue.</p>
        <div class="flex flex-col space-y-4">
            <!-- Login Form -->
            <form class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="login-email">Email</label>
                    <input type="email" id="login-email" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="[email protected]" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="login-password">Password</label>
                    <input type="password" id="login-password" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" required>
                </div>
                <button type="submit" class="w-full bg-blue-600 text-white p-2 rounded-md shadow hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition duration-300">Login</button>
            </form>
            <!-- Separator -->
            <div class="flex items-center justify-center space-x-2">
                <div class="w-full h-0.5 bg-gray-300 dark:bg-gray-600"></div>
                <span class="text-gray-500 dark:text-gray-400">OR</span>
                <div class="w-full h-0.5 bg-gray-300 dark:bg-gray-600"></div>
            </div>
            <!-- Signup Form -->
            <form class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="signup-name">Full Name</label>
                    <input type="text" id="signup-name" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="Your Name" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="signup-email">Email</label>
                    <input type="email" id="signup-email" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="[email protected]" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="signup-password">Password</label>
                    <input type="password" id="signup-password" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" required>
                </div>
                <button type="submit" class="w-full bg-blue-600 text-white p-2 rounded-md shadow hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition duration-300">Signup</button>
            </form>
            <!-- Avatar Image -->
            <div class="flex justify-center mt-6">
                <img src="https://picsum.photos/100/100" alt="Avatar" class="rounded-full border-4 border-blue-500"> 
            </div>
        </div>
    </div>
</div>

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

魅力的なアニメーションと単色の配色を備えたブログ用のマイクロインタラクションに焦点を当てたソーシャルコンポーネント。

開けるプレビュー

                <div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Social Engagement</h2>
    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-600 transition duration-300 ease-in-out transform hover:scale-110">
        <div>
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">John Doe</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">@john_doe</p>
        </div>
    </div>
    <p class="text-gray-600 dark:text-gray-300 mb-4">This is a post about engaging with content effectively in today's digital landscape.</p>
    <img src="https://picsum.photos/600/300" alt="Blog post preview" class="rounded-lg mb-4 transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
    <div class="flex items-center space-x-4">
        <button class="flex items-center px-4 py-2 bg-blue-500 text-white rounded-lg transition duration-300 ease-in-out hover:bg-blue-600 dark:hover:bg-blue-400 shadow focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7" />
            </svg>
            Share
        </button>
        <button class="flex items-center px-4 py-2 bg-gray-200 text-gray-700 rounded-lg transition duration-300 ease-in-out hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 shadow focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12h-3.086a2.003 2.003 0 00-3.415 0H5m14-1h-2.586a2.003 2.003 0 00-3.415 0H4m5 0l2 2-2 2m0-4l-2 2-2-2" />
            </svg>
            Comment
        </button>
    </div>
</div>

Like/Reaction Buttons コンポーネント

レトロ/ビンテージスタイルのいいね/リアクションボタンコンポーネントで、ダークテーマのサポートとレスポンシブデザインを備えたリアクション用のさまざまなインタラクティブボタンを備えています。このコンポーネントはダッシュボードに適しており、ユーザーはインターフェースのさまざまな要素に反応することができます。

開けるプレビュー

                <div class="bg-gray-900 dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-2xl font-extrabold text-center text-yellow-300 mb-4">React with Nostalgia!</h2>
    <div class="flex justify-around mb-4">
        <button class="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">❤️ Like</button>
        <button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😂 Haha</button>
        <button class="bg-yellow-500 hover:bg-yellow-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😢 Sad</button>
        <button class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😡 Angry</button>
    </div>
    <hr class="border-gray-600 mb-4">
    <div class="flex items-center justify-center">
        <img class="w-12 h-12 rounded-full border-2 border-yellow-300 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-lg text-gray-300">John Doe</span>
    </div>
    <div class="mt-4">
        <p class="text-gray-400 text-center">React to the content with your feelings!</p>
    </div>
</div>

<div class="bg-gray-900 dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-lg mx-auto mt-6">
    <h3 class="text-xl font-semibold text-center text-yellow-300 mb-4">Select Your Mood</h3>
    <div class="grid grid-cols-2 gap-4">
        <button class="bg-red-500 hover:bg-red-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Excited</button>
        <button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Happy</button>
        <button class="bg-yellow-500 hover:bg-yellow-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Sad</button>
        <button class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Angry</button>
    </div>
</div>

価格表示コンポーネント

ソーシャルメディアインターフェース用に設計された、単色の配色を備えた3Dにインスパイアされた価格表示コンポーネント。これは、ダークモードをサポートする複雑で応答性の高いコンポーネントで、Tailwind CSSを使用して構築されています。JavaScriptは含まれていません。

開けるプレビュー

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6"> <div class="relative w-full max-w-sm bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden"> <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 opacity-50"></div> <div class="relative z-10 p-8"> <div class="text-center mb-8"> <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-2">Pro Plan</h2> <p class="text-gray-600 dark:text-gray-400">Unlock all features</p> </div> <div class="text-center mb-8"> <span class="text-6xl font-extrabold text-gray-900 dark:text-[var(--monochromatic-color)]">$49</span> <span class="text-2xl font-semibold text-gray-700 dark:text-gray-300">/month</span> </div> <ul class="mb-8 space-y-4"> <li class="flex items-center text-gray-700 dark:text-gray-300"> <svg class="w-6 h-6 text-green-500 mr-3" 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 13l4 4L19 7"></path></svg> Unlimited Users </li> <li class="flex items-center text-gray-700 dark:text-gray-300"> <svg class="w-6 h-6 text-green-500 mr-3" 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 13l4 4L19 7"></path></svg> 100GB Storage </li> <li class="flex items-center text-gray-700 dark:text-gray-300"> <svg class="w-6 h-6 text-green-500 mr-3" 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 13l4 4L19 7"></path></svg> Email Support </li> <li class="flex items-center text-gray-700 dark:text-gray-300"> <svg class="w-6 h-6 text-green-500 mr-3" 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 13l4 4L19 7"></path></svg> Custom Analytics </li> </ul> <a href="#" class="block w-full py-3 text-center text-white font-bold bg-blue-600 dark:bg-[var(--dark-monochromatic-color)] rounded-lg hover:bg-blue-700 dark:hover:bg-[var(--darker-monochromatic-color)] transition duration-300 ease-in-out transform hover:scale-105 shadow-lg"> Get Started </a> </div> </div> <div class="absolute bottom-0 right-0 -mb-20 -mr-20 w-40 h-40 bg-blue-500 dark:bg-[var(--monochromatic-accent-color)] rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000"></div> <div class="absolute bottom-0 left-0 -mb-20 -ml-20 w-40 h-40 bg-purple-500 dark:bg-[var(--monochromatic-secondary-color)] rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000"></div> <div class="absolute top-0 right-0 -mt-20 -mr-20 w-40 h-40 bg-pink-500 dark:bg-[var(--monochromatic-tertiary-color)] rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob"></div> </div>

1 ... 215 216 217 218 219 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント