Log In
BASIC-LIBRARY / SECTION / CONTACT

Contact Four

Preview Code
Quick edit
<div
  class="bg-white pt-6 pb-6 py-6 sm:pt-8 sm:pb-8 sm:py-8 lg:pt-12 lg:pb-12 lg:py-12"
>
  <div
    class="ml-auto mr-auto mx-auto max-w-screen-2xl pl-4 pr-4 px-4 md:pl-8 md:pr-8 md:px-8"
  >
    <div class="mb-10 md:mb-16">
      <h2
        class="mb-4 text-center text-2xl font-bold text-gray-800 md:mb-6 lg:text-3xl"
      >
        Talk to our team
      </h2>
      <p
        class="ml-auto mr-auto mx-auto max-w-screen-md text-center text-gray-500 md:text-lg"
      >
        Whether you have questions about pricing, features, or need a custom
        demo, our specialists are here to help.
      </p>
    </div>
    <form
      class="grid sm:grid-cols-2 ml-auto mr-auto mx-auto max-w-screen-md gap-4"
    >
      <div class>
        <label
          for="first-name"
          class="inline-block mb-2 text-sm text-gray-800 sm:text-base"
        >
          First name*
        </label>
        <input
          name="first-name"
          class="transition duration-100 w-full rounded border bg-gray-50 pl-3 pr-3 px-3 pt-2 pb-2 py-2 text-gray-800 outline-none ring-indigo-300 focus:ring"
        />
      </div>
      <div class>
        <label
          for="last-name"
          class="inline-block mb-2 text-sm text-gray-800 sm:text-base"
        >
          Last name*
        </label>
        <input
          name="last-name"
          class="transition duration-100 w-full rounded border bg-gray-50 pl-3 pr-3 px-3 pt-2 pb-2 py-2 text-gray-800 outline-none ring-indigo-300 focus:ring"
        />
      </div>
      <div class="sm:col-span-2">
        <label
          for="company"
          class="inline-block mb-2 text-sm text-gray-800 sm:text-base"
        >
          Company
        </label>
        <input
          name="company"
          class="transition duration-100 w-full rounded border bg-gray-50 pl-3 pr-3 px-3 pt-2 pb-2 py-2 text-gray-800 outline-none ring-indigo-300 focus:ring"
        />
      </div>
      <div class="sm:col-span-2">
        <label
          for="email"
          class="inline-block mb-2 text-sm text-gray-800 sm:text-base"
        >
          Email*
        </label>
        <input
          name="email"
          class="transition duration-100 w-full rounded border bg-gray-50 pl-3 pr-3 px-3 pt-2 pb-2 py-2 text-gray-800 outline-none ring-indigo-300 focus:ring"
        />
      </div>
      <div class="sm:col-span-2">
        <label
          for="subject"
          class="inline-block mb-2 text-sm text-gray-800 sm:text-base"
        >
          Subject*
        </label>
        <input
          name="subject"
          class="transition duration-100 w-full rounded border bg-gray-50 pl-3 pr-3 px-3 pt-2 pb-2 py-2 text-gray-800 outline-none ring-indigo-300 focus:ring"
        />
      </div>
      <div class="sm:col-span-2">
        <label
          for="message"
          class="inline-block mb-2 text-sm text-gray-800 sm:text-base"
        >
          Message*
        </label>
        <textarea
          name="message"
          class="transition duration-100 h-64 w-full rounded border bg-gray-50 pl-3 pr-3 px-3 pt-2 pb-2 py-2 text-gray-800 outline-none ring-indigo-300 focus:ring"
        ></textarea>
      </div>
      <div class="sm:col-span-2 flex items-center justify-between">
        <button
          class="inline-block transition duration-100 active:bg-indigo-700 rounded-lg bg-indigo-500 pl-8 pr-8 px-8 pt-3 pb-3 py-3 text-center text-sm font-semibold text-white outline-none ring-indigo-300 hover:bg-indigo-600 focus-visible:ring md:text-base"
        >
          Send
        </button>
        <span class="text-sm text-gray-500">*Required</span>
      </div>
      <div class="text-xs text-gray-400">
        <span data-node-handle="base-text" class="inline-block h-auto w-auto">
          Submitting this form means you accept our
        </span>
        <a
          href="#"
          class="underline transition duration-100 active:text-indigo-600 hover:text-indigo-500"
        >
          Privacy Policy
        </a>
        <span data-node-handle="base-text" class="inline-block h-auto w-auto">
          and terms of service.
        </span>
      </div>
    </form>
  </div>
</div>
© 2025 tailsections.com. All rights reserved

Don’t Lose Your Edits!

Your changes are saved locally, but they may expire or be lost if you don’t create an account.

Create Account