Tailwind CSS Contact Pages Blocks

All Blocks
Marketing
Contact Pages

Contact Pages

Tailwind CSS contact page layouts with inquiry forms, contact details, info cards, and intro sections for marketing websites.

Split Contact Page with Contact Details Free

A split page layout places the contact form in one column and detail blocks in the other.

<div id="contact" class="bg-background">
  <div class="max-w-5xl px-4 xl:px-0 py-10 lg:py-20 mx-auto">
    
    <div class="max-w-3xl mb-10 lg:mb-14">
      <h2 class="text-foreground font-semibold text-2xl md:text-4xl md:leading-tight">Contact us</h2>
      <p class="mt-1 text-muted-foreground-1">Whatever your goal - we will get you there.</p>
    </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-x-10 lg:gap-x-16">
      <div class="md:order-2 border-b border-line-1 pb-10 mb-10 md:border-b-0 md:pb-0 md:mb-0">
        <form>
          <div class="space-y-4">
            
            <div class="relative">
              <input type="text" id="hs-tac-input-name" class="peer p-3 sm:p-4 block w-full bg-surface border-transparent rounded-lg sm:text-sm text-foreground placeholder:text-transparent focus:outline-hidden focus:ring-0 focus:border-transparent disabled:opacity-50 disabled:pointer-events-none
              focus:pt-6
              focus:pb-2
              not-placeholder-shown:pt-6
              not-placeholder-shown:pb-2
              autofill:pt-6
              autofill:pb-2" placeholder="Name">
              <label for="hs-tac-input-name" class="absolute top-0 inset-s-0 p-3 sm:p-4 h-full text-muted-foreground-1 text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent peer-disabled:opacity-50 peer-disabled:pointer-events-none
                peer-focus:text-xs
                peer-focus:-translate-y-1.5
                peer-focus:text-muted-foreground-1
                peer-not-placeholder-shown:text-xs
                peer-not-placeholder-shown:-translate-y-1.5
                peer-not-placeholder-shown:text-muted-foreground-1">Name</label>
            </div>

<div class="relative">
              <input type="email" id="hs-tac-input-email" class="peer p-3 sm:p-4 block w-full bg-surface border-transparent rounded-lg sm:text-sm text-foreground placeholder:text-transparent focus:outline-hidden focus:ring-0 focus:border-transparent disabled:opacity-50 disabled:pointer-events-none
              focus:pt-6
              focus:pb-2
              not-placeholder-shown:pt-6
              not-placeholder-shown:pb-2
              autofill:pt-6
              autofill:pb-2" placeholder="Email">
              <label for="hs-tac-input-email" class="absolute top-0 inset-s-0 p-3 sm:p-4 h-full text-muted-foreground-1 text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent peer-disabled:opacity-50 peer-disabled:pointer-events-none
                peer-focus:text-xs
                peer-focus:-translate-y-1.5
                peer-focus:text-muted-foreground-1
                peer-not-placeholder-shown:text-xs
                peer-not-placeholder-shown:-translate-y-1.5
                peer-not-placeholder-shown:text-muted-foreground-1">Email</label>
            </div>

<div class="relative">
              <input type="text" id="hs-tac-input-company" class="peer p-3 sm:p-4 block w-full bg-surface border-transparent rounded-lg sm:text-sm text-foreground placeholder:text-transparent focus:outline-hidden focus:ring-0 focus:border-transparent disabled:opacity-50 disabled:pointer-events-none
              focus:pt-6
              focus:pb-2
              not-placeholder-shown:pt-6
              not-placeholder-shown:pb-2
              autofill:pt-6
              autofill:pb-2" placeholder="Company">
              <label for="hs-tac-input-company" class="absolute top-0 inset-s-0 p-3 sm:p-4 h-full text-muted-foreground-1 text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent peer-disabled:opacity-50 peer-disabled:pointer-events-none
                peer-focus:text-xs
                peer-focus:-translate-y-1.5
                peer-focus:text-muted-foreground-1
                peer-not-placeholder-shown:text-xs
                peer-not-placeholder-shown:-translate-y-1.5
                peer-not-placeholder-shown:text-muted-foreground-1">Company</label>
            </div>

<div class="relative">
              <input type="text" id="hs-tac-input-phone" class="peer p-3 sm:p-4 block w-full bg-surface border-transparent rounded-lg sm:text-sm text-foreground placeholder:text-transparent focus:outline-hidden focus:ring-0 focus:border-transparent disabled:opacity-50 disabled:pointer-events-none
              focus:pt-6
              focus:pb-2
              not-placeholder-shown:pt-6
              not-placeholder-shown:pb-2
              autofill:pt-6
              autofill:pb-2" placeholder="Phone">
              <label for="hs-tac-input-phone" class="absolute top-0 inset-s-0 p-3 sm:p-4 h-full text-muted-foreground-1 text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent peer-disabled:opacity-50 peer-disabled:pointer-events-none
                peer-focus:text-xs
                peer-focus:-translate-y-1.5
                peer-focus:text-muted-foreground-1
                peer-not-placeholder-shown:text-xs
                peer-not-placeholder-shown:-translate-y-1.5
                peer-not-placeholder-shown:text-muted-foreground-1">Phone</label>
            </div>

<div class="relative">
              <textarea id="hs-tac-message" class="peer p-3 sm:p-4 block w-full bg-surface border-transparent rounded-lg sm:text-sm text-foreground placeholder:text-transparent focus:outline-hidden focus:ring-0 focus:border-transparent disabled:opacity-50 disabled:pointer-events-none
              focus:pt-6
              focus:pb-2
              not-placeholder-shown:pt-6
              not-placeholder-shown:pb-2
              autofill:pt-6
              autofill:pb-2" placeholder="This is a textarea placeholder" data-hs-textarea-auto-height></textarea>
              <label for="hs-tac-message" class="absolute top-0 inset-s-0 p-3 sm:p-4 h-full text-muted-foreground-1 text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent peer-disabled:opacity-50 peer-disabled:pointer-events-none
                peer-focus:text-xs
                peer-focus:-translate-y-1.5
                peer-focus:text-muted-foreground-1
                peer-not-placeholder-shown:text-xs
                peer-not-placeholder-shown:-translate-y-1.5
                peer-not-placeholder-shown:text-muted-foreground-1">Tell us about your project</label>
            </div>
            
          </div>

<div class="mt-2">
            <p class="text-xs text-muted-foreground-1">
              All fields are required
            </p>

<p class="mt-5">
              <a class="group inline-flex items-center gap-x-2 py-2 px-3 bg-primary border border-primary-line text-primary-foreground font-medium text-sm rounded-full focus:outline-hidden" href="#">
                Submit
                <svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
              </a>
            </p>
          </div>
        </form>
      </div>

<div class="space-y-14">
        
        <div class="flex gap-x-5">
          <svg class="shrink-0 size-6 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
          <div class="grow">
            <p class="text-foreground font-semibold">Our address:</p>

<address class="mt-1 text-muted-foreground-1 text-sm not-italic">
              300 Bath Street, Tay House<br>
              Glasgow G2 4JR, United Kingdom
            </address>
          </div>
        </div>

<a class="mt-1 text-muted-foreground-1 text-sm hover:text-foreground focus:outline-hidden focus:text-foreground" href="#mailto:example@site.co" target="_blank">
              hello@example.so
            </a>
          </div>
        </div>

<div class="flex gap-x-5">
          <svg class="shrink-0 size-6 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg>
          <div class="grow">
            <p class="text-foreground font-semibold">We're hiring</p>
            <p class="mt-1 text-muted-foreground-1">We're thrilled to announce that we're expanding our team and looking for talented individuals like you to join us.</p>
            <p class="mt-2">
              <a class="group inline-flex items-center gap-x-2 font-medium text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">
                Job openings
                <svg class="shrink-0 size-4 transition group-hover:translate-x-0.5 group-focus:translate-x-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
              </a>
            </p>
          </div>
        </div>
        
      </div>
      
    </div>
    
  </div>
</div>

Open related homepage

Centered Contact Page with Info Cards Free

A centered form sits above a row of stacked contact cards and support paths.

<div class="max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  <div class="max-w-xl mx-auto">
    <div class="text-center">
      <h1 class="text-3xl font-bold text-foreground sm:text-4xl">
        Contact us
      </h1>
      <p class="mt-1 text-muted-foreground-2">
        We'd love to talk about how we can help you.
      </p>
    </div>
  </div>

<form>
        <div class="grid gap-4 lg:gap-6">
          
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-6">
            <div>
              <label for="hs-firstname-contacts-1" class="block mb-2 text-sm text-foreground font-medium">First Name</label>
              <input type="text" name="hs-firstname-contacts-1" id="hs-firstname-contacts-1" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none">
            </div>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-6">
            <div>
              <label for="hs-email-contacts-1" class="block mb-2 text-sm text-foreground font-medium">Email</label>
              <input type="email" name="hs-email-contacts-1" id="hs-email-contacts-1" autocomplete="email" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none">
            </div>

<div>
              <label for="hs-phone-number-1" class="block mb-2 text-sm text-foreground font-medium">Phone Number</label>
              <input type="text" name="hs-phone-number-1" id="hs-phone-number-1" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none">
            </div>
          </div>

<div>
            <label for="hs-about-contacts-1" class="block mb-2 text-sm text-foreground font-medium">Details</label>
            <textarea id="hs-about-contacts-1" name="hs-about-contacts-1" rows="4" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none"></textarea>
          </div>
        </div>

<div class="mt-6 grid">
          <button type="submit" class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none">Send inquiry</button>
        </div>

<div class="mt-3 text-center">
          <p class="text-sm text-muted-foreground-1">
            We'll get back to you in 1-2 business days.
          </p>
        </div>
      </form>
    </div>
    
  </div>

<div class="mt-12 grid sm:grid-cols-2 lg:grid-cols-3 items-center gap-4 lg:gap-8">
    
    <a class="group flex flex-col h-full text-center rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus p-4 sm:p-6" href="#">
      <svg class="size-9 text-foreground mx-auto" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
      <div class="mt-5">
        <h3 class="text-lg font-semibold text-foreground">Knowledgebase</h3>
        <p class="mt-1 text-muted-foreground-1">We're here to help with any questions or code.</p>
        <p class="mt-5 inline-flex items-center gap-x-1 font-medium text-primary">
          Contact support
          <svg class="shrink-0 size-4 transition ease-in-out group-hover:translate-x-1 group-focus:translate-x-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
        </p>
      </div>
    </a>

<a class="group flex flex-col h-full text-center rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus p-4 sm:p-6" href="#">
      <svg class="size-9 text-foreground mx-auto" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z"/><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/></svg>
      <div class="mt-5">
        <h3 class="text-lg font-semibold text-foreground">FAQ</h3>
        <p class="mt-1 text-muted-foreground-1">Search our FAQ for answers to anything you might ask.</p>
        <p class="mt-5 inline-flex items-center gap-x-1 font-medium text-primary">
          Visit FAQ
          <svg class="shrink-0 size-4 transition ease-in-out group-hover:translate-x-1 group-focus:translate-x-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
        </p>
      </div>
    </a>

<a class="group flex flex-col h-full text-center rounded-lg hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus p-4 sm:p-6" href="#">
      <svg class="size-9 text-foreground mx-auto" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m7 11 2-2-2-2"/><path d="M11 13h4"/><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/></svg>
      <div class="mt-5">
        <h3 class="text-lg font-semibold text-foreground">Developer APIs</h3>
        <p class="mt-1 text-muted-foreground-1">Check out our development quickstart guide.</p>
        <p class="mt-5 inline-flex items-center gap-x-1 font-medium text-primary">
          Contact sales
          <svg class="shrink-0 size-4 transition ease-in-out group-hover:translate-x-1 group-focus:translate-x-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
        </p>
      </div>
    </a>
    
  </div>
</div>

Contact Page with Form Card and Support Links Free

A form card fills one side of the page while support links and secondary copy fill the other column.

<div class="max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  <div class="max-w-2xl lg:max-w-5xl mx-auto">
    <div class="text-center">
      <h1 class="text-3xl font-bold text-foreground sm:text-4xl">
        Contact us
      </h1>
      <p class="mt-1 text-muted-foreground-2">
        We'd love to talk about how we can help you.
      </p>
    </div>

<form>
          <div class="grid gap-4">
            
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <label for="hs-firstname-contacts-1" class="sr-only">First Name</label>
                <input type="text" name="hs-firstname-contacts-1" id="hs-firstname-contacts-1" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="First Name">
              </div>

<div>
              <label for="hs-email-contacts-1" class="sr-only">Email</label>
              <input type="email" name="hs-email-contacts-1" id="hs-email-contacts-1" autocomplete="email" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Email">
            </div>

<div>
              <label for="hs-phone-number-1" class="sr-only">Phone Number</label>
              <input type="text" name="hs-phone-number-1" id="hs-phone-number-1" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Phone Number">
            </div>

<div>
              <label for="hs-about-contacts-1" class="sr-only">Details</label>
              <textarea id="hs-about-contacts-1" name="hs-about-contacts-1" rows="4" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Details"></textarea>
            </div>
          </div>

<div class="mt-4 grid">
            <button type="submit" class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none">Send inquiry</button>
          </div>

<div class="mt-3 text-center">
            <p class="text-sm text-muted-foreground-1">
              We'll get back to you in 1-2 business days.
            </p>
          </div>
        </form>
      </div>

<div class="divide-y divide-card-divider">
        
        <div class="flex gap-x-7 py-6">
          <svg class="shrink-0 size-6 mt-1.5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
          <div class="grow">
            <h3 class="font-semibold text-foreground">Knowledgebase</h3>
            <p class="mt-1 text-sm text-muted-foreground-1">We're here to help with any questions or code.</p>
            <a class="mt-2 inline-flex items-center gap-x-2 text-sm font-medium text-muted-foreground-2 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">
              Contact support
              <svg class="shrink-0 size-2.5 transition ease-in-out group-hover:translate-x-1 group-focus:translate-x-1" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.975821 6.92249C0.43689 6.92249 -3.50468e-07 7.34222 -3.27835e-07 7.85999C-3.05203e-07 8.37775 0.43689 8.79749 0.975821 8.79749L12.7694 8.79748L7.60447 13.7596C7.22339 14.1257 7.22339 14.7193 7.60447 15.0854C7.98555 15.4515 8.60341 15.4515 8.98449 15.0854L15.6427 8.68862C16.1191 8.23098 16.1191 7.48899 15.6427 7.03134L8.98449 0.634573C8.60341 0.268455 7.98555 0.268456 7.60447 0.634573C7.22339 1.00069 7.22339 1.59428 7.60447 1.9604L12.7694 6.92248L0.975821 6.92249Z" fill="currentColor"/>
              </svg>
            </a>
          </div>
        </div>

<div class="flex gap-x-7 py-6">
          <svg class="shrink-0 size-6 mt-1.5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z"/><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/></svg>
          <div class="grow">
            <h3 class="font-semibold text-foreground">FAQ</h3>
            <p class="mt-1 text-sm text-muted-foreground-1">Search our FAQ for answers to anything you might ask.</p>
            <a class="mt-2 inline-flex items-center gap-x-2 text-sm font-medium text-muted-foreground-2 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">
              Visit FAQ
              <svg class="shrink-0 size-2.5 transition ease-in-out group-hover:translate-x-1 group-focus:translate-x-1" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.975821 6.92249C0.43689 6.92249 -3.50468e-07 7.34222 -3.27835e-07 7.85999C-3.05203e-07 8.37775 0.43689 8.79749 0.975821 8.79749L12.7694 8.79748L7.60447 13.7596C7.22339 14.1257 7.22339 14.7193 7.60447 15.0854C7.98555 15.4515 8.60341 15.4515 8.98449 15.0854L15.6427 8.68862C16.1191 8.23098 16.1191 7.48899 15.6427 7.03134L8.98449 0.634573C8.60341 0.268455 7.98555 0.268456 7.60447 0.634573C7.22339 1.00069 7.22339 1.59428 7.60447 1.9604L12.7694 6.92248L0.975821 6.92249Z" fill="currentColor"/>
              </svg>
            </a>
          </div>
        </div>

<div class=" flex gap-x-7 py-6">
          <svg class="shrink-0 size-6 mt-1.5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 11 2-2-2-2"/><path d="M11 13h4"/><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/></svg>
          <div class="grow">
            <h3 class="font-semibold text-foreground">Developer APIs</h3>
            <p class="mt-1 text-sm text-muted-foreground-1">Check out our development quickstart guide.</p>
            <a class="mt-2 inline-flex items-center gap-x-2 text-sm font-medium text-muted-foreground-2 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">
              Contact sales
              <svg class="shrink-0 size-2.5 transition ease-in-out group-hover:translate-x-1 group-focus:translate-x-1" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.975821 6.92249C0.43689 6.92249 -3.50468e-07 7.34222 -3.27835e-07 7.85999C-3.05203e-07 8.37775 0.43689 8.79749 0.975821 8.79749L12.7694 8.79748L7.60447 13.7596C7.22339 14.1257 7.22339 14.7193 7.60447 15.0854C7.98555 15.4515 8.60341 15.4515 8.98449 15.0854L15.6427 8.68862C16.1191 8.23098 16.1191 7.48899 15.6427 7.03134L8.98449 0.634573C8.60341 0.268455 7.98555 0.268456 7.60447 0.634573C7.22339 1.00069 7.22339 1.59428 7.60447 1.9604L12.7694 6.92248L0.975821 6.92249Z" fill="currentColor"/>
              </svg>
            </a>
          </div>
        </div>

Contact Page with Intro Image and Copy Free

An image-led intro block sits above the contact details and primary page copy.

<div class="max-w-7xl px-4 sm:px-6 lg:px-8 py-12 lg:py-24 mx-auto">
  <div class="mb-6 sm:mb-10 max-w-2xl text-center mx-auto">
    <h2 class="font-medium text-foreground text-2xl sm:text-4xl">
      Contacts
    </h2>
  </div>

<div class="space-y-8 lg:space-y-16">
      <div>
        <h3 class="mb-5 font-semibold text-foreground">
          Our address
        </h3>

<div class="grow">
              <p class="text-sm text-muted-foreground-2">
                United Kingdom
              </p>
              <address class="mt-1 text-foreground not-italic">
                300 Bath Street, Tay House<br>
                Glasgow G2 4JR
              </address>
            </div>
          </div>
        </div>
        
      </div>

<div>
        <h3 class="mb-5 font-semibold text-foreground">
          Our contacts
        </h3>

<div class="grid sm:grid-cols-2 gap-4 sm:gap-6 md:gap-8 lg:gap-12">
          <div class="flex gap-4">
            <svg class="shrink-0 size-5 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"></path><path d="m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10"></path></svg>
            
            <div class="grow">
              <p class="text-sm text-muted-foreground-2">
                Email us
              </p>
              <p>
                <a class="relative inline-block font-medium text-foreground before:absolute before:bottom-0.5 before:inset-s-0 before:-z-1 before:w-full before:h-1 before:bg-primary hover:before:bg-primary-hover focus:outline-hidden focus:before:bg-primary-focus" href="mailto:example@site.so">
                  hello@example.so
                </a>
              </p>
            </div>
          </div>

Open related homepage