CCHub Logo CCHub Tailwind Collection
コンポーネント フォーム フォームコンポーネント

フォームコンポーネント

スイス/インターナショナルタイポグラフィの原則に基づいてデザインされたシンプルでミニマルなフォームコンポーネントで、ドキュメントやWikiサイトに適した落ち着いた配色を使用しています。完全にレスポンシブで、ダークモードをサポートしています。

プレビュー

HTMLコード 

<div class="p-4 sm:p-6 md:p-8 lg:p-12 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">
  <div class="max-w-xl mx-auto bg-white dark:bg-gray-850 shadow-md rounded-lg overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Contact Us</h2>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">We'd love to hear from you. Please fill out the form below.</p>
    </div>
    <form class="px-6 py-6 space-y-5">
      <div>
        <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
        <div class="mt-1">
          <input type="text" name="full-name" id="full-name" autocomplete="name" placeholder="John Doe" class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-400 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm">
        </div>
      </div>

      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
        <div class="mt-1">
          <input id="email" name="email" type="email" autocomplete="email" required placeholder="you@example.com" class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-400 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm">
        </div>
      </div>

      <div>
        <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Subject</label>
        <div class="mt-1">
          <input type="text" name="subject" id="subject" placeholder="Inquiry about a topic" class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-400 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm">
        </div>
      </div>

      <div>
        <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Your Message</label>
        <div class="mt-1">
          <textarea id="message" name="message" rows="5" placeholder="Type your message here..." class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-400 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm"></textarea>
        </div>
      </div>

      <div class="pt-2">
        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900">
          Send Message
        </button>
      </div>
    </form>
  </div>
</div>

関連コンポーネント

ミニマリストフォームコンポーネント

ポートフォリオに合わせたミニマリストフォームコンポーネントで、パステルカラーの配色、シンプルなレイアウト、レスポンシブデザイン、Tailwind CSSを使用したダークモードのサポートが特徴です。

開ける

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

パステルカラーの配色でレトロ/ビンテージスタイルでデザインされた複雑なフォームコンポーネントで、プロのビジネスWebサイトに適しており、ダークモードのサポートでレスポンシブです。

開ける

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

ソーシャルメディア用のシンプルなブルータリズムスタイルのフォームコンポーネント。グレースケールカラーを使用した高コントラストの生のデザインが特徴で、ダークモードのサポートにより応答性があります。

開ける