Home
Homayoun
Contact Form Component with Responsive Design and Decorative Elements

Contact Form Component with Responsive Design and Decorative Elements

A modern contact form component featuring a split layout with form fields and contact information. Includes name, email, and message inputs with icon integration, decorative SVG elements, and responsive design for all screen sizes. Built with clean HTML and Tailwind CSS styling for seamless integration into any website.

This tailwind example is contributed by Homayoun, on 11-Oct-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Get in touch, Contact form

Form Contact us

Author Homayoun

231

Fork Fullscreen

<div class="mb-6">
              <div class="relative">
                <div
                  class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
                >
                  <i class="fas fa-envelope text-gray-500 dark:text-gray-400"></i>
                </div>
                <input
                  type="email"
                  name="email"
                  placeholder="Email Address"
                  class="w-full pl-10 pr-3 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                  required
                />
              </div>
            </div>

<div class="mb-6">
              <div class="relative">
                <div
                  class="absolute top-3 left-3 pointer-events-none"
                >
                  <i class="fas fa-comment text-gray-500 dark:text-gray-400"></i>
                </div>
                <textarea
                  rows="6"
                  name="message"
                  placeholder="Message"
                  class="w-full pl-10 pr-3 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                  required
                ></textarea>
              </div>
            </div>

<div>
              <button
                type="submit"
                class="w-full p-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 dark:hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors"
              >
                Submit
              </button>
            </div>
          </form>

<div>
            <span class="absolute -right-9 -top-10 z-[-1]">
              <svg
                width="100"
                height="100"
                viewBox="0 0 100 100"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M0 100C0 44.7715 0 0 0 0C55.2285 0 100 44.7715 100 100C100 100 100 100 0 100Z"
                  class="fill-indigo-500 dark:fill-indigo-700"
                />
              </svg>
            </span>
            <span class="absolute -right-10 top-[90px] z-[-1]">
             <svg width="107" height="134" viewBox="0 0 107 134" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="104.999" cy="132" r="1.66667" transform="rotate(180 104.999 132)" fill="#4338ca"></circle><circle cx="104.999" cy="117.333" r="1.66667" transform="rotate(180 104.999 117.333)" fill="#4338ca"></circle><circle cx="104.999" cy="102.667" r="1.66667" transform="rotate(180 104.999 102.667)" fill="#4338ca"></circle><circle cx="104.999" cy="88" r="1.66667" transform="rotate(180 104.999 88)" fill="#4338ca"></circle><circle cx="104.999" cy="73.3333" r="1.66667" transform="rotate(180 104.999 73.3333)" fill="#4338ca"></circle><circle cx="104.999" cy="45" r="1.66667" transform="rotate(180 104.999 45)" fill="#4338ca"></circle><circle cx="104.999" cy="16" r="1.66667" transform="rotate(180 104.999 16)" fill="#4338ca"></circle><circle cx="104.999" cy="59" r="1.66667" transform="rotate(180 104.999 59)" fill="#4338ca"></circle><circle cx="104.999" cy="30.6666" r="1.66667" transform="rotate(180 104.999 30.6666)" fill="#4338ca"></circle><circle cx="104.999" cy="1.66665" r="1.66667" transform="rotate(180 104.999 1.66665)" fill="#4338ca"></circle><circle cx="90.3333" cy="132" r="1.66667" transform="rotate(180 90.3333 132)" fill="#4338ca"></circle><circle cx="90.3333" cy="117.333" r="1.66667" transform="rotate(180 90.3333 117.333)" fill="#4338ca"></circle><circle cx="90.3333" cy="102.667" r="1.66667" transform="rotate(180 90.3333 102.667)" fill="#4338ca"></circle><circle cx="90.3333" cy="88" r="1.66667" transform="rotate(180 90.3333 88)" fill="#4338ca"></circle><circle cx="90.3333" cy="73.3333" r="1.66667" transform="rotate(180 90.3333 73.3333)" fill="#4338ca"></circle><circle cx="90.3333" cy="45" r="1.66667" transform="rotate(180 90.3333 45)" fill="#4338ca"></circle><circle cx="90.3333" cy="16" r="1.66667" transform="rotate(180 90.3333 16)" fill="#4338ca"></circle><circle cx="90.3333" cy="59" r="1.66667" transform="rotate(180 90.3333 59)" fill="#4338ca"></circle><circle cx="90.3333" cy="30.6666" r="1.66667" transform="rotate(180 90.3333 30.6666)" fill="#4338ca"></circle><circle cx="90.3333" cy="1.66665" r="1.66667" transform="rotate(180 90.3333 1.66665)" fill="#4338ca"></circle><circle cx="75.6654" cy="132" r="1.66667" transform="rotate(180 75.6654 132)" fill="#4338ca"></circle><circle cx="31.9993" cy="132" r="1.66667" transform="rotate(180 31.9993 132)" fill="#4338ca"></circle><circle cx="75.6654" cy="117.333" r="1.66667" transform="rotate(180 75.6654 117.333)" fill="#4338ca"></circle><circle cx="31.9993" cy="117.333" r="1.66667" transform="rotate(180 31.9993 117.333)" fill="#4338ca"></circle><circle cx="75.6654" cy="102.667" r="1.66667" transform="rotate(180 75.6654 102.667)" fill="#4338ca"></circle><circle cx="31.9993" cy="102.667" r="1.66667" transform="rotate(180 31.9993 102.667)" fill="#4338ca"></circle><circle cx="75.6654" cy="88" r="1.66667" transform="rotate(180 75.6654 88)" fill="#4338ca"></circle><circle cx="31.9993" cy="88" r="1.66667" transform="rotate(180 31.9993 88)" fill="#4338ca"></circle><circle cx="75.6654" cy="73.3333" r="1.66667" transform="rotate(180 75.6654 73.3333)" fill="#4338ca"></circle><circle cx="31.9993" cy="73.3333" r="1.66667" transform="rotate(180 31.9993 73.3333)" fill="#4338ca"></circle><circle cx="75.6654" cy="45" r="1.66667" transform="rotate(180 75.6654 45)" fill="#4338ca"></circle><circle cx="31.9993" cy="45" r="1.66667" transform="rotate(180 31.9993 45)" fill="#4338ca"></circle><circle cx="75.6654" cy="16" r="1.66667" transform="rotate(180 75.6654 16)" fill="#4338ca"></circle><circle cx="31.9993" cy="16" r="1.66667" transform="rotate(180 31.9993 16)" fill="#4338ca"></circle><circle cx="75.6654" cy="59" r="1.66667" transform="rotate(180 75.6654 59)" fill="#4338ca"></circle><circle cx="31.9993" cy="59" r="1.66667" transform="rotate(180 31.9993 59)" fill="#4338ca"></circle><circle cx="75.6654" cy="30.6666" r="1.66667" transform="rotate(180 75.6654 30.6666)" fill="#4338ca"></circle><circle cx="31.9993" cy="30.6666" r="1.66667" transform="rotate(180 31.9993 30.6666)" fill="#4338ca"></circle><circle cx="75.6654" cy="1.66665" r="1.66667" transform="rotate(180 75.6654 1.66665)" fill="#4338ca"></circle><circle cx="31.9993" cy="1.66665" r="1.66667" transform="rotate(180 31.9993 1.66665)" fill="#4338ca"></circle><circle cx="60.9993" cy="132" r="1.66667" transform="rotate(180 60.9993 132)" fill="#4338ca"></circle><circle cx="17.3333" cy="132" r="1.66667" transform="rotate(180 17.3333 132)" fill="#4338ca"></circle><circle cx="60.9993" cy="117.333" r="1.66667" transform="rotate(180 60.9993 117.333)" fill="#4338ca"></circle><circle cx="17.3333" cy="117.333" r="1.66667" transform="rotate(180 17.3333 117.333)" fill="#4338ca"></circle><circle cx="60.9993" cy="102.667" r="1.66667" transform="rotate(180 60.9993 102.667)" fill="#4338ca"></circle><circle cx="17.3333" cy="102.667" r="1.66667" transform="rotate(180 17.3333 102.667)" fill="#4338ca"></circle><circle cx="60.9993" cy="88" r="1.66667" transform="rotate(180 60.9993 88)" fill="#4338ca"></circle><circle cx="17.3333" cy="88" r="1.66667" transform="rotate(180 17.3333 88)" fill="#4338ca"></circle><circle cx="60.9993" cy="73.3333" r="1.66667" transform="rotate(180 60.9993 73.3333)" fill="#4338ca"></circle><circle cx="17.3333" cy="73.3333" r="1.66667" transform="rotate(180 17.3333 73.3333)" fill="#4338ca"></circle><circle cx="60.9993" cy="45" r="1.66667" transform="rotate(180 60.9993 45)" fill="#4338ca"></circle><circle cx="17.3333" cy="45" r="1.66667" transform="rotate(180 17.3333 45)" fill="#4338ca"></circle><circle cx="60.9993" cy="16" r="1.66667" transform="rotate(180 60.9993 16)" fill="#4338ca"></circle><circle cx="17.3333" cy="16" r="1.66667" transform="rotate(180 17.3333 16)" fill="#4338ca"></circle><circle cx="60.9993" cy="59" r="1.66667" transform="rotate(180 60.9993 59)" fill="#4338ca"></circle><circle cx="17.3333" cy="59" r="1.66667" transform="rotate(180 17.3333 59)" fill="#4338ca"></circle><circle cx="60.9993" cy="30.6666" r="1.66667" transform="rotate(180 60.9993 30.6666)" fill="#4338ca"></circle><circle cx="17.3333" cy="30.6666" r="1.66667" transform="rotate(180 17.3333 30.6666)" fill="#4338ca"></circle><circle cx="60.9993" cy="1.66665" r="1.66667" transform="rotate(180 60.9993 1.66665)" fill="#4338ca"></circle><circle cx="17.3333" cy="1.66665" r="1.66667" transform="rotate(180 17.3333 1.66665)" fill="#4338ca"></circle><circle cx="46.3333" cy="132" r="1.66667" transform="rotate(180 46.3333 132)" fill="#4338ca"></circle><circle cx="2.66536" cy="132" r="1.66667" transform="rotate(180 2.66536 132)" fill="#4338ca"></circle><circle cx="46.3333" cy="117.333" r="1.66667" transform="rotate(180 46.3333 117.333)" fill="#4338ca"></circle><circle cx="2.66536" cy="117.333" r="1.66667" transform="rotate(180 2.66536 117.333)" fill="#4338ca"></circle><circle cx="46.3333" cy="102.667" r="1.66667" transform="rotate(180 46.3333 102.667)" fill="#4338ca"></circle><circle cx="2.66536" cy="102.667" r="1.66667" transform="rotate(180 2.66536 102.667)" fill="#4338ca"></circle><circle cx="46.3333" cy="88" r="1.66667" transform="rotate(180 46.3333 88)" fill="#4338ca"></circle><circle cx="2.66536" cy="88" r="1.66667" transform="rotate(180 2.66536 88)" fill="#4338ca"></circle><circle cx="46.3333" cy="73.3333" r="1.66667" transform="rotate(180 46.3333 73.3333)" fill="#4338ca"></circle><circle cx="2.66536" cy="73.3333" r="1.66667" transform="rotate(180 2.66536 73.3333)" fill="#4338ca"></circle><circle cx="46.3333" cy="45" r="1.66667" transform="rotate(180 46.3333 45)" fill="#4338ca"></circle><circle cx="2.66536" cy="45" r="1.66667" transform="rotate(180 2.66536 45)" fill="#4338ca"></circle><circle cx="46.3333" cy="16" r="1.66667" transform="rotate(180 46.3333 16)" fill="#4338ca"></circle><circle cx="2.66536" cy="16" r="1.66667" transform="rotate(180 2.66536 16)" fill="#4338ca"></circle><circle cx="46.3333" cy="59" r="1.66667" transform="rotate(180 46.3333 59)" fill="#4338ca"></circle><circle cx="2.66536" cy="59" r="1.66667" transform="rotate(180 2.66536 59)" fill="#4338ca"></circle><circle cx="46.3333" cy="30.6666" r="1.66667" transform="rotate(180 46.3333 30.6666)" fill="#4338ca"></circle><circle cx="2.66536" cy="30.6666" r="1.66667" transform="rotate(180 2.66536 30.6666)" fill="#4338ca"></circle><circle cx="46.3333" cy="1.66665" r="1.66667" transform="rotate(180 46.3333 1.66665)" fill="#4338ca"></circle><circle cx="2.66536" cy="1.66665" r="1.66667" transform="rotate(180 2.66536 1.66665)" fill="#4338ca"></circle></svg>
            </span>
            <span class="absolute -bottom-7 -left-7 z-[-1]">
             <svg width="107" height="134" viewBox="0 0 107 134" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="104.999" cy="132" r="1.66667" transform="rotate(180 104.999 132)" fill="#4338ca"></circle><circle cx="104.999" cy="117.333" r="1.66667" transform="rotate(180 104.999 117.333)" fill="#4338ca"></circle><circle cx="104.999" cy="102.667" r="1.66667" transform="rotate(180 104.999 102.667)" fill="#4338ca"></circle><circle cx="104.999" cy="88" r="1.66667" transform="rotate(180 104.999 88)" fill="#4338ca"></circle><circle cx="104.999" cy="73.3333" r="1.66667" transform="rotate(180 104.999 73.3333)" fill="#4338ca"></circle><circle cx="104.999" cy="45" r="1.66667" transform="rotate(180 104.999 45)" fill="#4338ca"></circle><circle cx="104.999" cy="16" r="1.66667" transform="rotate(180 104.999 16)" fill="#4338ca"></circle><circle cx="104.999" cy="59" r="1.66667" transform="rotate(180 104.999 59)" fill="#4338ca"></circle><circle cx="104.999" cy="30.6666" r="1.66667" transform="rotate(180 104.999 30.6666)" fill="#4338ca"></circle><circle cx="104.999" cy="1.66665" r="1.66667" transform="rotate(180 104.999 1.66665)" fill="#4338ca"></circle><circle cx="90.3333" cy="132" r="1.66667" transform="rotate(180 90.3333 132)" fill="#4338ca"></circle><circle cx="90.3333" cy="117.333" r="1.66667" transform="rotate(180 90.3333 117.333)" fill="#4338ca"></circle><circle cx="90.3333" cy="102.667" r="1.66667" transform="rotate(180 90.3333 102.667)" fill="#4338ca"></circle><circle cx="90.3333" cy="88" r="1.66667" transform="rotate(180 90.3333 88)" fill="#4338ca"></circle><circle cx="90.3333" cy="73.3333" r="1.66667" transform="rotate(180 90.3333 73.3333)" fill="#4338ca"></circle><circle cx="90.3333" cy="45" r="1.66667" transform="rotate(180 90.3333 45)" fill="#4338ca"></circle><circle cx="90.3333" cy="16" r="1.66667" transform="rotate(180 90.3333 16)" fill="#4338ca"></circle><circle cx="90.3333" cy="59" r="1.66667" transform="rotate(180 90.3333 59)" fill="#4338ca"></circle><circle cx="90.3333" cy="30.6666" r="1.66667" transform="rotate(180 90.3333 30.6666)" fill="#4338ca"></circle><circle cx="90.3333" cy="1.66665" r="1.66667" transform="rotate(180 90.3333 1.66665)" fill="#4338ca"></circle><circle cx="75.6654" cy="132" r="1.66667" transform="rotate(180 75.6654 132)" fill="#4338ca"></circle><circle cx="31.9993" cy="132" r="1.66667" transform="rotate(180 31.9993 132)" fill="#4338ca"></circle><circle cx="75.6654" cy="117.333" r="1.66667" transform="rotate(180 75.6654 117.333)" fill="#4338ca"></circle><circle cx="31.9993" cy="117.333" r="1.66667" transform="rotate(180 31.9993 117.333)" fill="#4338ca"></circle><circle cx="75.6654" cy="102.667" r="1.66667" transform="rotate(180 75.6654 102.667)" fill="#4338ca"></circle><circle cx="31.9993" cy="102.667" r="1.66667" transform="rotate(180 31.9993 102.667)" fill="#4338ca"></circle><circle cx="75.6654" cy="88" r="1.66667" transform="rotate(180 75.6654 88)" fill="#4338ca"></circle><circle cx="31.9993" cy="88" r="1.66667" transform="rotate(180 31.9993 88)" fill="#4338ca"></circle><circle cx="75.6654" cy="73.3333" r="1.66667" transform="rotate(180 75.6654 73.3333)" fill="#4338ca"></circle><circle cx="31.9993" cy="73.3333" r="1.66667" transform="rotate(180 31.9993 73.3333)" fill="#4338ca"></circle><circle cx="75.6654" cy="45" r="1.66667" transform="rotate(180 75.6654 45)" fill="#4338ca"></circle><circle cx="31.9993" cy="45" r="1.66667" transform="rotate(180 31.9993 45)" fill="#4338ca"></circle><circle cx="75.6654" cy="16" r="1.66667" transform="rotate(180 75.6654 16)" fill="#4338ca"></circle><circle cx="31.9993" cy="16" r="1.66667" transform="rotate(180 31.9993 16)" fill="#4338ca"></circle><circle cx="75.6654" cy="59" r="1.66667" transform="rotate(180 75.6654 59)" fill="#4338ca"></circle><circle cx="31.9993" cy="59" r="1.66667" transform="rotate(180 31.9993 59)" fill="#4338ca"></circle><circle cx="75.6654" cy="30.6666" r="1.66667" transform="rotate(180 75.6654 30.6666)" fill="#4338ca"></circle><circle cx="31.9993" cy="30.6666" r="1.66667" transform="rotate(180 31.9993 30.6666)" fill="#4338ca"></circle><circle cx="75.6654" cy="1.66665" r="1.66667" transform="rotate(180 75.6654 1.66665)" fill="#4338ca"></circle><circle cx="31.9993" cy="1.66665" r="1.66667" transform="rotate(180 31.9993 1.66665)" fill="#4338ca"></circle><circle cx="60.9993" cy="132" r="1.66667" transform="rotate(180 60.9993 132)" fill="#4338ca"></circle><circle cx="17.3333" cy="132" r="1.66667" transform="rotate(180 17.3333 132)" fill="#4338ca"></circle><circle cx="60.9993" cy="117.333" r="1.66667" transform="rotate(180 60.9993 117.333)" fill="#4338ca"></circle><circle cx="17.3333" cy="117.333" r="1.66667" transform="rotate(180 17.3333 117.333)" fill="#4338ca"></circle><circle cx="60.9993" cy="102.667" r="1.66667" transform="rotate(180 60.9993 102.667)" fill="#4338ca"></circle><circle cx="17.3333" cy="102.667" r="1.66667" transform="rotate(180 17.3333 102.667)" fill="#4338ca"></circle><circle cx="60.9993" cy="88" r="1.66667" transform="rotate(180 60.9993 88)" fill="#4338ca"></circle><circle cx="17.3333" cy="88" r="1.66667" transform="rotate(180 17.3333 88)" fill="#4338ca"></circle><circle cx="60.9993" cy="73.3333" r="1.66667" transform="rotate(180 60.9993 73.3333)" fill="#4338ca"></circle><circle cx="17.3333" cy="73.3333" r="1.66667" transform="rotate(180 17.3333 73.3333)" fill="#4338ca"></circle><circle cx="60.9993" cy="45" r="1.66667" transform="rotate(180 60.9993 45)" fill="#4338ca"></circle><circle cx="17.3333" cy="45" r="1.66667" transform="rotate(180 17.3333 45)" fill="#4338ca"></circle><circle cx="60.9993" cy="16" r="1.66667" transform="rotate(180 60.9993 16)" fill="#4338ca"></circle><circle cx="17.3333" cy="16" r="1.66667" transform="rotate(180 17.3333 16)" fill="#4338ca"></circle><circle cx="60.9993" cy="59" r="1.66667" transform="rotate(180 60.9993 59)" fill="#4338ca"></circle><circle cx="17.3333" cy="59" r="1.66667" transform="rotate(180 17.3333 59)" fill="#4338ca"></circle><circle cx="60.9993" cy="30.6666" r="1.66667" transform="rotate(180 60.9993 30.6666)" fill="#4338ca"></circle><circle cx="17.3333" cy="30.6666" r="1.66667" transform="rotate(180 17.3333 30.6666)" fill="#4338ca"></circle><circle cx="60.9993" cy="1.66665" r="1.66667" transform="rotate(180 60.9993 1.66665)" fill="#4338ca"></circle><circle cx="17.3333" cy="1.66665" r="1.66667" transform="rotate(180 17.3333 1.66665)" fill="#4338ca"></circle><circle cx="46.3333" cy="132" r="1.66667" transform="rotate(180 46.3333 132)" fill="#4338ca"></circle><circle cx="2.66536" cy="132" r="1.66667" transform="rotate(180 2.66536 132)" fill="#4338ca"></circle><circle cx="46.3333" cy="117.333" r="1.66667" transform="rotate(180 46.3333 117.333)" fill="#4338ca"></circle><circle cx="2.66536" cy="117.333" r="1.66667" transform="rotate(180 2.66536 117.333)" fill="#4338ca"></circle><circle cx="46.3333" cy="102.667" r="1.66667" transform="rotate(180 46.3333 102.667)" fill="#4338ca"></circle><circle cx="2.66536" cy="102.667" r="1.66667" transform="rotate(180 2.66536 102.667)" fill="#4338ca"></circle><circle cx="46.3333" cy="88" r="1.66667" transform="rotate(180 46.3333 88)" fill="#4338ca"></circle><circle cx="2.66536" cy="88" r="1.66667" transform="rotate(180 2.66536 88)" fill="#4338ca"></circle><circle cx="46.3333" cy="73.3333" r="1.66667" transform="rotate(180 46.3333 73.3333)" fill="#4338ca"></circle><circle cx="2.66536" cy="73.3333" r="1.66667" transform="rotate(180 2.66536 73.3333)" fill="#4338ca"></circle><circle cx="46.3333" cy="45" r="1.66667" transform="rotate(180 46.3333 45)" fill="#4338ca"></circle><circle cx="2.66536" cy="45" r="1.66667" transform="rotate(180 2.66536 45)" fill="#4338ca"></circle><circle cx="46.3333" cy="16" r="1.66667" transform="rotate(180 46.3333 16)" fill="#4338ca"></circle><circle cx="2.66536" cy="16" r="1.66667" transform="rotate(180 2.66536 16)" fill="#4338ca"></circle><circle cx="46.3333" cy="59" r="1.66667" transform="rotate(180 46.3333 59)" fill="#4338ca"></circle><circle cx="2.66536" cy="59" r="1.66667" transform="rotate(180 2.66536 59)" fill="#4338ca"></circle><circle cx="46.3333" cy="30.6666" r="1.66667" transform="rotate(180 46.3333 30.6666)" fill="#4338ca"></circle><circle cx="2.66536" cy="30.6666" r="1.66667" transform="rotate(180 2.66536 30.6666)" fill="#4338ca"></circle><circle cx="46.3333" cy="1.66665" r="1.66667" transform="rotate(180 46.3333 1.66665)" fill="#4338ca"></circle><circle cx="2.66536" cy="1.66665" r="1.66667" transform="rotate(180 2.66536 1.66665)" fill="#4338ca"></circle></svg>
            </span>
          </div>
        </div>
      </div>

<div class="order-1 w-full px-4 lg:order-2 lg:w-1/2 xl:w-6/12">
        <div class="mb-12 px-5 pt-3 sm:max-w-[570px] lg:mb-0">
          <span class="mb-4 block text-base font-semibold text-indigo-500">
            Contacts
          </span>
          <h2
            class="mb-6 text-[32px] font-bold uppercase sm:text-[40px] lg:text-[36px] xl:text-[40px]"
          >
            Contact with us
          </h2>
          <p class="text-base leading-relaxed">
            If you have any question and feedback contact with us
          </p>
          <p class="mb-9 text-base leading-relaxed">
            We're here to help and answer any questions you might have. We look
            forward to hearing from you.
          </p>

<div class="mb-8 flex w-full max-w-[330px] gap-3">
            <div
              class="mr-6 flex h-[40px] w-full max-w-[40px] items-center justify-center overflow-hidden rounded-sm bg-indigo-500/10 dark:bg-indigo-400/10 text-indigo-500 dark:text-indigo-400 sm:h-[70px] sm:max-w-[70px]"
            >
              <i class="fas fa-phone text-xl"></i>
            </div>
            <div class="w-full">
              <h4 class="mb-1 text-base sm:text-xl font-bold">Phone Number</h4>
              <p class="text-xs sm:text-base">+1 (555) 123-4567</p>
            </div>
          </div>

<div class="mb-8 flex w-full max-w-[330px] gap-3">
            <div
              class="mr-6 flex h-[40px] w-full max-w-[40px] items-center justify-center overflow-hidden rounded-sm bg-indigo-500/10 dark:bg-indigo-400/10 text-indigo-500 dark:text-indigo-400 sm:h-[70px] sm:max-w-[70px]"
            >
              <i class="fas fa-envelope text-xl"></i>
            </div>
            <div class="w-full">
              <h4 class="mb-1 text-base sm:text-xl font-bold">Email Address</h4>
              <p class="text-xs sm:text-base">contact@example.com</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples

create event modified
it is the layout for creating an event

Author:
seth dridi

1 year ago

1.9k
Simple Form 2

Author:
Mr Robot

3 years ago

10.5k
Responsive login form
form with social login buttons

Author:
Aman kumar

1 year ago

4.9k
Sign up form
simple full-height register form

Author:
Lukas Müller

2 years ago

12.7k
Feedback + Contact Us form

Author:
Rajesh kulkarni

2 years ago

12.5k
Contact us form template

Author:
Geoffrey Callaghan

2 years ago

6.8k
Sign up for newsletter form

Author:
Amit Pachange

2 years ago

11.9k
Responsive Form
This modern, fully responsive account creation form is designed using HTML and Tailwind CSS, ensuring a clean, professional, and accessible user experience. It features a card-based layout with smooth spacing, a subtle shadow effect, and a structured grid system for optimal responsiveness across all devices.

Author:
Rajesh Maheshwari

9 months ago

1.2k
Login form

Author:
Gopi Yadav

3 years ago

11.1k
Login Form Component
The "Login Form Component" is a visually appealing and user-friendly interface designed for user authentication. It features a clean and well-structured layout with fields for entering the email address and password.

Author:
R Thapa

2 years ago

8.3k
Contact Us
This is contact us page with form

Author:
varniraj vaghela

1 year ago

2.2k
CONTACT US - GET IN TOUCH - PORTFOLIO
Responsive "Contact us" section, dark-mode-friendly contact area featuring stylish cards with icons displaying essential contact details.

Author:
ABDO-SY

9 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components