CCHub Logo CCHub Tailwind Collection
コンポーネント フォーム ブルータリズムフォームコンポーネント

ブルータリズムフォームコンポーネント

パステルカラーを使用し、ブルータリズムの美学でデザインされたフォームコンポーネントで、ビジネス/企業のWebサイトに適しています。ダークテーマをサポートするレスポンシブデザインが特徴です。

プレビュー

HTMLコード 

<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-pink-600 dark:text-pink-400 mb-4">Contact Us</h2>
    <form>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
            <input class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" type="text" id="name" placeholder="Your Name" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
            <input class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" type="email" id="email" placeholder="Your Email" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="message">Message</label>
            <textarea class="block w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-pink-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" id="message" rows="4" placeholder="Your Message" required></textarea>
        </div>
        <div class="flex items-center justify-between">
            <button type="submit" class="bg-pink-600 text-white font-bold py-2 px-4 rounded hover:bg-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-600 dark:bg-pink-500 dark:hover:bg-pink-400">Send</button>
        </div>
    </form>
    <div class="mt-6 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
        <p class="text-gray-600 dark:text-gray-300">Stay connected with us!</p>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="rounded-md shadow-md object-cover w-full">
    </div>
</div>

関連コンポーネント

レトロ/ビンテージフォームコンポーネント

80 年代と 90 年代に触発されたレトロ/ビンテージの美学でスタイル設定されたフォーム コンポーネントで、レスポンシブ デザインと Tailwind CSS を使用したダーク テーマのサポートが特徴です。

開ける

Neumorphic Forms コンポーネント

ニューモーフィズムデザインのシンプルなフォームコンポーネントで、電子商取引アプリケーション向けに調整され、単色の配色とダークモードのサポートが特徴です。

開ける

フォームコンポーネント

Glassmorphismスタイル、鮮やかな配色、ポートフォリオのシンプルな複雑さを備えたフォームコンポーネント。Tailwind CSSを使用したダークテーマをサポートするレスポンシブデザイン。JavaScript はありません。

開ける