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

フォームコンポーネント

スイス/インターナショナルタイポグラフィの原則に基づいてデザインされた、ジュエルトーンの配色を特徴とする、すっきりとしたミニマルなフォームコンポーネント。専門的なコンサルティングやサービスのWebサイトに最適で、完全な応答性とダークモードのサポートを提供します。

プレビュー

HTMLコード 

<div class="min-h-screen bg-gray-100 p-4 sm:p-6 lg:p-8 dark:bg-gray-900 flex items-center justify-center">
  <div class="w-full max-w-md bg-white rounded-lg shadow-xl p-6 sm:p-8 dark:bg-gray-800 border dark:border-gray-700">
    <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4 text-center dark:text-white font-serif tracking-tight leading-tight">
      Get in Touch
    </h2>
    <p class="text-center text-gray-600 mb-8 dark:text-gray-300 text-sm sm:text-base leading-relaxed">
      We'd love to hear from you. Please fill out the form below.
    </p>

    <form>
      <div class="mb-5">
        <label for="name" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300 tracking-wide">
          FULL NAME
        </label>
        <input type="text" id="name" name="name" placeholder="John Doe" class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-emerald-600 focus:border-emerald-600 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500 transition duration-200 ease-in-out">
      </div>

      <div class="mb-5">
        <label for="email" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300 tracking-wide">
          EMAIL ADDRESS
        </label>
        <input type="email" id="email" name="email" placeholder="[email protected]" class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-sapphire-600 focus:border-sapphire-600 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500 transition duration-200 ease-in-out">
      </div>

      <div class="mb-6">
        <label for="message" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300 tracking-wide">
          YOUR MESSAGE
        </label>
        <textarea id="message" name="message" rows="4" placeholder="Tell us about your needs..." class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-ruby-600 focus:border-ruby-600 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500 resize-y transition duration-200 ease-in-out"></textarea>
      </div>

      <div class="mt-6">
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-base font-semibold text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-offset-gray-900 transition duration-200 ease-in-out tracking-wide uppercase">
          SUBMIT
        </button>
      </div>
    </form>
  </div>
</div>

関連コンポーネント

フォームコンポーネント

ミニマリストスタイルでデザインされたレスポンシブフォームコンポーネントで、ソーシャルメディアインターフェイスに適しており、鮮やかな色、ダークモードのサポート、複雑なインタラクションを特徴としています。

開ける

Photography_Contact_Form

スイス/インターナショナルタイポグラフィにインスパイアされた、写真ポートフォリオ用のすっきりとしたミニマルなお問い合わせフォームで、落ち着いたレトロ/ビンテージカラーパレットが特徴です。ダークモードのサポートにより完全にレスポンシブ。

開ける

フォームコンポーネント

Tailwind CSS を使用してマテリアルデザインスタイルでデザインされたレスポンシブフォームコンポーネントで、グリッドレイアウト、シャドウ、ダークモードのサポートが特徴です。

開ける