CCHub Logo CCHub Tailwind Collection
コンポーネント 検索ボックス 検索ボックスコンポーネント

検索ボックスコンポーネント

ブルータリズムスタイルでデザインされたレスポンシブ検索ボックスコンポーネントで、Tailwind CSS を使用したダークテーマのサポートがあります。

プレビュー

HTMLコード 

<div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
    <div class="bg-gray-800 p-8 rounded-lg shadow-lg space-y-4">
        <h1 class="text-3xl font-bold text-center">Search</h1>
        <div class="flex items-center bg-gray-700 p-2 rounded-md">
            <input type="text" placeholder="Type to search..." class="flex-grow bg-transparent border-none text-white outline-none placeholder-gray-400" />
            <button class="ml-2 bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition duration-300">Go</button>
        </div>
        <div class="text-center">
            <img src="https://picsum.photos/200/100" alt="Placeholder image" class="w-full h-auto rounded-md mt-4">
        </div>
        <div class="flex items-center justify-between mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            <span class="text-sm">User Name</span>
        </div>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1F1F1F;
        }
        .bg-gray-800 {
            background-color: #2d2d2d;
        }
        .bg-gray-700 {
            background-color: #3e3e3e;
        }
    }
</style>

関連コンポーネント

検索ボックスコンポーネント

ビジネスや企業のWebサイト向けに設計された3Dスタイルの検索ボックスコンポーネントで、奥行きのある複雑なインターフェイス、インタラクティブな要素、ダークモードのサポートを備えています。

開ける

検索ボックスコンポーネント

パステルカラーの配色、複数のインタラクティブ要素を備えた複雑なインターフェイスを備えたミニマリストでフラットなデザインの検索ボックスコンポーネントで、作品や製品を展示するポートフォリオ用に設計されています。

開ける

レトロヴィンテージ検索ボックス

レトロ/ビンテージの美学でスタイル化されたレスポンシブ検索ボックスコンポーネントで、ソーシャルメディアインターフェイスに適した類似の配色を利用し、ダークテーマをサポートしています。

開ける