Tailwind Contact Components (227)

Contact from Saturn

Support Contact Options with Two Cards and Orange CTAs

A centered support section with a pill label, a serif-accented heading, and two outlined cards offering email contact and phone customer service, each with an orange call-to-action button. The layout is a two-column grid of cards on a light background with decorative dot patterns at the sides.

<section class="relative py-20 md:py-32 overflow-hidden">
  <img class="absolute top-0 left-0 md:mt-24" src="saturn-assets/images/contact/dots-side-1.svg" alt="">
  <img class="absolute bottom-0 right-0 mb-8 lg:mb-24" src="saturn-assets/images/contact/dots-side-2.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-2xl mx-auto mb-18 text-center">
      <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">READY TO SUPPORT</span>
      <h1 class="font-heading text-5xl xs:text-6xl font-bold text-gray-900 mb-4">
        <span>Anything unclear or</span>
        <span class="font-serif italic">need help</span>
        <span>?</span>
      </h1>
      <p class="text-xl text-gray-500 font-semibold">Relax, we are ready to support 24/7 for you</p>
    </div>
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-full md:w-1/2 lg:w-auto px-4 xl:px-10 mb-10 md:mb-0">
        <div class="max-w-sm mx-auto h-full py-8 px-6 bg-white border border-gray-200 rounded-5xl">
          <div class="max-w-2xs mx-auto text-center">
            <img class="block mx-auto mb-3" src="saturn-assets/images/contact/icon-orange-email.svg" alt="">
            <h5 class="text-2xl font-bold text-gray-900 mb-3">Contact Us</h5>
            <p class="text-gray-500 mb-3">Contact us to seek help from us, we will help you as soon as possible</p>
            <span class="block text-sm text-orange-900 mb-8">hello@yourdomain.com</span>
            <a class="relative group inline-block py-4 px-6 text-white font-semibold bg-orange-900 rounded-full overflow-hidden" href="#">
              <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
              <div class="relative flex items-center justify-center">
                <span class="mr-4">Contact</span>
                <span>
                  <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.83 5.28999L2.59 1.04999C2.49704 0.956266 2.38644 0.881872 2.26458 0.831103C2.14272 0.780334 2.01202 0.754196 1.88 0.754196C1.74799 0.754196 1.61729 0.780334 1.49543 0.831103C1.37357 0.881872 1.26297 0.956266 1.17 1.04999C0.983753 1.23736 0.879211 1.49081 0.879211 1.75499C0.879211 2.01918 0.983753 2.27263 1.17 2.45999L4.71 5.99999L1.17 9.53999C0.983753 9.72736 0.879211 9.98081 0.879211 10.245C0.879211 10.5092 0.983753 10.7626 1.17 10.95C1.26344 11.0427 1.37426 11.116 1.4961 11.1658C1.61794 11.2155 1.7484 11.2408 1.88 11.24C2.01161 11.2408 2.14207 11.2155 2.26391 11.1658C2.38575 11.116 2.49656 11.0427 2.59 10.95L6.83 6.70999C6.92373 6.61703 6.99813 6.50643 7.04889 6.38457C7.09966 6.26271 7.1258 6.13201 7.1258 5.99999C7.1258 5.86798 7.09966 5.73728 7.04889 5.61542C6.99813 5.49356 6.92373 5.38296 6.83 5.28999Z" fill="#FAFBFC"></path>
                  </svg>
                </span>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-auto px-4 xl:px-10">
        <div class="max-w-sm mx-auto h-full py-8 px-6 bg-white border border-gray-200 rounded-5xl">
          <div class="max-w-2xs mx-auto text-center">
            <img class="block mx-auto mb-3" src="saturn-assets/images/contact/icon-orange-headphones.svg" alt="">
            <h5 class="text-2xl font-bold text-gray-900 mb-3">Customer Service</h5>
            <p class="text-gray-500 mb-3">Contact us to seek help from us, we will help you as soon as possible</p>
            <span class="block text-sm text-orange-900 mb-8">+08 128 903427</span>
            <a class="relative group inline-block py-4 px-6 text-white font-semibold bg-orange-900 rounded-full overflow-hidden" href="#">
              <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
              <div class="relative flex items-center justify-center">
                <span class="mr-4">Call Now</span>
                <span>
                  <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17.94 11C17.72 11 17.49 10.93 17.27 10.88C16.8245 10.7818 16.3867 10.6515 15.96 10.49C15.4961 10.3212 14.9861 10.33 14.5283 10.5146C14.0705 10.6992 13.6971 11.0466 13.48 11.49L13.26 11.94C12.286 11.3982 11.391 10.7252 10.6 9.93999C9.81476 9.14901 9.14182 8.25399 8.59999 7.27999L9.01999 6.99999C9.46336 6.78291 9.81078 6.40952 9.99539 5.95168C10.18 5.49384 10.1888 4.9839 10.02 4.51999C9.86122 4.09241 9.73093 3.65479 9.62999 3.20999C9.57999 2.98999 9.53999 2.75999 9.50999 2.52999C9.38856 1.82561 9.01962 1.18773 8.46962 0.731229C7.91961 0.274727 7.22469 0.029599 6.50999 0.0399902H3.50999C3.07903 0.0359436 2.65224 0.124804 2.2587 0.300521C1.86516 0.476238 1.5141 0.734686 1.22942 1.05827C0.944745 1.38186 0.733129 1.76298 0.608982 2.1757C0.484835 2.58842 0.451073 3.02305 0.509994 3.44999C1.04273 7.63937 2.95602 11.5319 5.94765 14.5126C8.93927 17.4934 12.8387 19.3925 17.03 19.91H17.41C18.1474 19.9111 18.8594 19.6405 19.41 19.15C19.7264 18.867 19.9791 18.5202 20.1515 18.1323C20.3238 17.7444 20.412 17.3244 20.41 16.9V13.9C20.3977 13.2054 20.1448 12.5365 19.6943 12.0077C19.2439 11.4788 18.6238 11.1226 17.94 11V11ZM18.44 17C18.4398 17.142 18.4094 17.2823 18.3508 17.4116C18.2922 17.5409 18.2067 17.6563 18.1 17.75C17.9904 17.8498 17.86 17.9241 17.7181 17.9673C17.5763 18.0106 17.4267 18.0217 17.28 18C13.5349 17.5198 10.0562 15.8065 7.39271 13.1303C4.72919 10.4541 3.0324 6.96733 2.56999 3.21999C2.55408 3.07351 2.56803 2.92532 2.611 2.78438C2.65397 2.64344 2.72506 2.51268 2.81999 2.39999C2.9137 2.29332 3.02906 2.20783 3.15837 2.14921C3.28769 2.09058 3.42801 2.06017 3.56999 2.05999H6.56999C6.80254 2.05482 7.02962 2.13087 7.21214 2.27506C7.39466 2.41925 7.5212 2.62256 7.56999 2.84999C7.60999 3.12332 7.65999 3.39332 7.71999 3.65999C7.83551 4.18713 7.98925 4.70517 8.17999 5.20999L6.77999 5.85999C6.66029 5.91491 6.55262 5.99294 6.46315 6.08959C6.37369 6.18624 6.30419 6.2996 6.25867 6.42318C6.21314 6.54677 6.19247 6.67812 6.19784 6.80971C6.20322 6.9413 6.23453 7.07054 6.28999 7.18999C7.72919 10.2727 10.2072 12.7508 13.29 14.19C13.5335 14.29 13.8065 14.29 14.05 14.19C14.1747 14.1454 14.2893 14.0764 14.3872 13.9872C14.485 13.8979 14.5642 13.7901 14.62 13.67L15.24 12.27C15.757 12.4549 16.2846 12.6085 16.82 12.73C17.0867 12.79 17.3567 12.84 17.63 12.88C17.8574 12.9288 18.0607 13.0553 18.2049 13.2378C18.3491 13.4204 18.4252 13.6474 18.42 13.88L18.44 17ZM17.5 7.99999C17.7652 7.99999 18.0196 7.89463 18.2071 7.7071C18.3946 7.51956 18.5 7.26521 18.5 6.99999V2.99999C18.5 2.73477 18.3946 2.48042 18.2071 2.29288C18.0196 2.10535 17.7652 1.99999 17.5 1.99999C17.2348 1.99999 16.9804 2.10535 16.7929 2.29288C16.6054 2.48042 16.5 2.73477 16.5 2.99999V6.99999C16.5 7.26521 16.6054 7.51956 16.7929 7.7071C16.9804 7.89463 17.2348 7.99999 17.5 7.99999ZM13.5 7.99999C13.7652 7.99999 14.0196 7.89463 14.2071 7.7071C14.3946 7.51956 14.5 7.26521 14.5 6.99999V2.99999C14.5 2.73477 14.3946 2.48042 14.2071 2.29288C14.0196 2.10535 13.7652 1.99999 13.5 1.99999C13.2348 1.99999 12.9804 2.10535 12.7929 2.29288C12.6054 2.48042 12.5 2.73477 12.5 2.99999V6.99999C12.5 7.26521 12.6054 7.51956 12.7929 7.7071C12.9804 7.89463 13.2348 7.99999 13.5 7.99999Z" fill="currentColor"></path>
                  </svg>
                </span>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Contact from DarkPro

Tailwind CSS

DarkPro

Dark Contact Section with Heading, Address, and Embedded Map

A dark-themed contact section with a large two-line heading on the left and labeled Address and Contacts details on the right, followed by a full-width rounded map panel showing the San Francisco Bay Area. The layout separates introductory text from contact information above a wide map embed.

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
    <div class="container px-4 mx-auto mb-12 lg:mb-20">
        <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
                <div class="max-w-lg">
                    <h2 class="text-3xl leading-tight md:text-4xl lg:text-5xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
                </div>
            </div>
            <div class="w-full lg:w-1/2 px-4">
                <h3 class="mb-1 text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Address</h3>
                <p class="mb-4 lg:mb-8 text-lg text-neutral-300">1686 Geraldine Lane New York, NY 10013</p>
                <h3 class="mb-1 text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Contacts</h3>
                <p class="text-lg text-neutral-300">hello@shuffle.dev</p>
            </div>
        </div>
    </div>
    <div class="relative px-5">
        <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-900 to-purple-950 rounded-2xl filter blur-3xl"></div>
        <div class="relative p-1 border border-white border-opacity-20 rounded-2xl">
            <img class="relative w-full h-96 object-cover rounded-xl border border-neutral-800" src="darkpro-assets/images/map.png" alt="">
        </div>
    </div>
</section>

Contact from Flaro

Tailwind CSS

Flaro

Get Connected Contact Info Card Grid

A light-themed contact section with a bold centered heading and three equal cards presenting email, phone, and address details, each with a line icon at top. The first icon is filled in purple while the others are outlined, and the cards use soft shadows on a white background.

<section class="relative pt-24 pb-36 bg-white overflow-hidden">
  <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2" src="flaro-assets/images/contact/gradient.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <h2 class="mb-5 text-6xl md:text-8xl xl:text-10xl text-center font-bold font-heading tracking-px-n leading-none">Get connected</h2>
    <p class="mb-20 text-lg text-gray-600 text-center font-medium leading-normal md:max-w-lg mx-auto">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condimentum vitae vel purus.</p>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/3 p-3">
        <div class="p-11 h-full text-center bg-white bg-opacity-90 border border-blueGray-100 rounded-xl shadow-11xl">
          <div class="mb-6 relative mx-auto w-16 h-16 bg-indigo-600 rounded-full">
            <div class="absolute left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2">
              <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 11.1666L14.5208 18.1805C15.4165 18.7776 16.5835 18.7776 17.4792 18.1805L28 11.1666M6.66667 25.8333H25.3333C26.8061 25.8333 28 24.6394 28 23.1666V9.83329C28 8.36053 26.8061 7.16663 25.3333 7.16663H6.66667C5.19391 7.16663 4 8.36053 4 9.83329V23.1666C4 24.6394 5.19391 25.8333 6.66667 25.8333Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </div>
          <h3 class="mb-3 text-xl font-bold font-heading leading-snug">Send Email</h3>
          <p class="font-medium leading-relaxed">info@mail.com</p>
          <p class="font-medium leading-relaxed">support@mail.com</p>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-3">
        <div class="p-11 h-full text-center bg-white bg-opacity-90 border border-blueGray-100 rounded-xl shadow-11xl">
          <div class="mb-6 relative mx-auto w-16 h-16 bg-white border border-blueGray-200 rounded-full">
            <div class="absolute left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2">
              <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 7.16667C4 5.69391 5.19391 4.5 6.66667 4.5H11.039C11.6129 4.5 12.1224 4.86724 12.3039 5.4117L14.301 11.4029C14.5108 12.0324 14.2258 12.7204 13.6324 13.0172L10.6227 14.522C12.0923 17.7816 14.7184 20.4077 17.978 21.8773L19.4828 18.8676C19.7796 18.2742 20.4676 17.9892 21.0971 18.199L27.0883 20.1961C27.6328 20.3776 28 20.8871 28 21.461V25.8333C28 27.3061 26.8061 28.5 25.3333 28.5H24C12.9543 28.5 4 19.5457 4 8.5V7.16667Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </div>
          <h3 class="mb-3 text-xl font-bold font-heading leading-snug">Call Us</h3>
          <p class="font-medium leading-relaxed">+1 8408 412 569</p>
          <p class="font-medium leading-relaxed">+1 8408 412 569</p>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-3">
        <div class="p-11 h-full text-center bg-white bg-opacity-90 border border-blueGray-100 rounded-xl shadow-11xl">
          <div class="mb-6 relative mx-auto w-16 h-16 bg-white border border-blueGray-200 rounded-full">
            <div class="absolute left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2">
              <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M23.5431 22.7091C22.1797 24.0725 19.192 27.0602 17.4133 28.8389C16.6323 29.62 15.3693 29.6203 14.5883 28.8392C12.8393 27.0903 9.91373 24.1647 8.45818 22.7091C4.29259 18.5435 4.29259 11.7898 8.45818 7.62419C12.6238 3.4586 19.3775 3.4586 23.5431 7.62419C27.7087 11.7898 27.7087 18.5435 23.5431 22.7091Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M20.0007 15.1667C20.0007 17.3758 18.2098 19.1667 16.0007 19.1667C13.7915 19.1667 12.0007 17.3758 12.0007 15.1667C12.0007 12.9575 13.7915 11.1667 16.0007 11.1667C18.2098 11.1667 20.0007 12.9575 20.0007 15.1667Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </div>
          <h3 class="mb-3 text-xl font-bold font-heading leading-snug">Address</h3>
          <p class="font-medium max-w-xs mx-auto leading-relaxed">380 St Kilda Road, Melbourne VIC 3004, Australia</p>
        </div>
      </div>
    </div>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Contact from Gradia

Tailwind CSS

Gradia

Dark Contact Section with Email and Social Links

A dark full-width contact section with a large heading and supporting paragraph on the left, and a right column listing an email address and social media links such as Facebook, Twitter, Linkedin, Instagram, and Pinterest. It uses a purple-blue gradient glow in the top-left corner and a split-screen arrangement.

<section class="relative pt-32 pb-28 bg-black overflow-hidden"><img class="absolute top-0 left-0" src="gradia-assets/elements/contact/radial3.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="flex flex-wrap -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-lg">
          <h2 class="mb-7 font-heading font-semibold text-6xl sm:text-8xl xl:text-10xl text-white" >Want to get in touch with us?</h2>
          <p class="text-gray-400 text-lg" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-md ml-auto">
          <p class="mb-4 max-w-max text-transparent bg-clip-text bg-gradient-cyan2 font-heading text-lg font-semibold" >Send us a mail</p>
          <p class="mb-16 text-white text-2xl" >hello@gradia.io</p>
          <p class="mb-4 max-w-max text-transparent bg-clip-text bg-gradient-cyan2 font-heading text-lg font-semibold" >Follow us</p>
          <ul>
            <li class="mb-6 text-white hover:text-gray-300 text-2xl"><a href="#" >Facebook</a></li>
            <li class="mb-6 text-white hover:text-gray-300 text-2xl"><a href="#" >Twitter</a></li>
            <li class="mb-6 text-white hover:text-gray-300 text-2xl"><a href="#" >Linkedin</a></li>
            <li class="mb-6 text-white hover:text-gray-300 text-2xl"><a href="#" >Instagram</a></li>
            <li class="text-white hover:text-gray-300 text-2xl"><a href="#" >Pinterest</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

Contact from Solstice

Tailwind CSS

Solstice

Contact Support Split-Screen Form with Incident Report Panel

A two-column contact support section with a heading and supporting text on the left, a dark maroon incident report call-to-action card below it, and a contact form on the right with name, email, phone, message fields and an orange Submit button.

<section class="overflow-hidden">
  <div class="container px-4 mx-auto pt-16 pb-20">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="flex flex-col justify-between h-full max-w-xl mx-auto">
          <div>
            <div class="px-2 py-1 rounded-md border border-orange-100 bg-orange-50 inline-flex items-center gap-2 mb-6">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                <path d="M8.5 1.215H3.5C2 1.215 1 2.215 1 3.715V6.715C1 8.215 2 9.215 3.5 9.215H5.5L7.725 10.695C8.055 10.915 8.5 10.68 8.5 10.28V9.215C10 9.215 11 8.215 11 6.715V3.715C11 2.215 10 1.215 8.5 1.215ZM7.75 5.625H4.25C4.045 5.625 3.875 5.455 3.875 5.25C3.875 5.045 4.045 4.875 4.25 4.875H7.75C7.955 4.875 8.125 5.045 8.125 5.25C8.125 5.455 7.955 5.625 7.75 5.625Z" fill="#FF7100"></path>
              </svg>
              <span class="text-orange-500 text-sm font-medium">Contact Support</span>
            </div>
            <h1 class="text-3xl lg:text-5xl font-bold font-heading mb-4 max-w-xs lg:max-w-md">How can we help you today?</h1>
            <p class="text-gray-600 mb-6">Submit your info and we’ll get back to you as soon as possible.</p>
          </div>
          <div class="bg-purple-900 rounded-3xl p-8">
            <h2 class="text-white text-2xl font-semibold mb-6 max-w-xs">Click here to report an incident</h2>
            <a class="w-full sm:w-auto py-3 px-5 h-12 rounded-full bg-white border border-purple-700 shadow text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200 inline-flex items-center justify-center gap-2" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M10.9261 14.2967L10.9457 14.2791L10.9633 14.2595C11.0647 14.1468 11.1612 14.0141 11.2308 13.836C11.2923 13.6864 11.3333 13.515 11.3333 13.3334C11.3333 13.1492 11.2911 12.9755 11.2282 12.8244C11.164 12.6704 11.0747 12.531 10.9633 12.4072L10.9457 12.3876L10.9261 12.37C10.8023 12.2586 10.6629 12.1693 10.5089 12.1051C10.1859 11.9705 9.81406 11.9705 9.49099 12.1051C9.33705 12.1693 9.19764 12.2586 9.07381 12.37L9.05425 12.3876L9.03665 12.4072C8.9252 12.531 8.8359 12.6704 8.77175 12.8244C8.70878 12.9755 8.66663 13.1492 8.66663 13.3334C8.66663 13.515 8.70762 13.6864 8.76915 13.836C8.83871 14.0141 8.93524 14.1468 9.03665 14.2595L9.05425 14.2791L9.07381 14.2967C9.19763 14.4081 9.33704 14.4974 9.49099 14.5616C9.64213 14.6245 9.81578 14.6667 9.99996 14.6667C10.1841 14.6667 10.3578 14.6245 10.5089 14.5616C10.6629 14.4974 10.8023 14.4081 10.9261 14.2967ZM2.16663 10C2.16663 5.6845 5.68443 2.16669 9.99996 2.16669C14.3155 2.16669 17.8333 5.6845 17.8333 10C17.8333 14.3155 14.3155 17.8334 9.99996 17.8334C5.68443 17.8334 2.16663 14.3155 2.16663 10ZM9.99996 5.54169C9.38215 5.54169 8.87496 6.04888 8.87496 6.66669V10.8334C8.87496 11.4512 9.38215 11.9584 9.99996 11.9584C10.6178 11.9584 11.125 11.4512 11.125 10.8334V6.66669C11.125 6.04888 10.6178 5.54169 9.99996 5.54169Z" fill="#530031" stroke="#530031"></path>
              </svg>
              <span class="text-purple-900 text-sm font-semibold">Report</span>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <form action="">
          <div class="border border-gray-100 rounded-3xl p-6 max-w-xl mx-auto">
            <div class="flex flex-wrap -mx-4">
              <div class="w-full lg:w-1/2 p-4">
                <label class="text-sm font-medium mb-2 block" for="textInput1">First name</label>
                <input class="w-full rounded-full p-4 outline-none border border-gray-100 shadow placeholder-gray-500 focus:ring focus:ring-orange-200 transition duration-200" id="textInput1" type="text" placeholder="First name">
              </div>
              <div class="w-full lg:w-1/2 p-4">
                <label class="text-sm font-medium mb-2 block" for="textInput2">Last name</label>
                <input class="w-full rounded-full p-4 outline-none border border-gray-100 shadow placeholder-gray-500 focus:ring focus:ring-orange-200 transition duration-200" id="textInput2" type="text" placeholder="Last name">
              </div>
            </div>
            <div class="flex flex-wrap -mx-4">
              <div class="w-full lg:w-1/2 p-4">
                <label class="text-sm font-medium mb-2 block" for="textInput3">Email</label>
                <input class="w-full rounded-full p-4 outline-none border border-gray-100 shadow placeholder-gray-500 focus:ring focus:ring-orange-200 transition duration-200" id="textInput3" type="text" placeholder="john@email.com">
              </div>
              <div class="w-full lg:w-1/2 p-4">
                <label class="text-sm font-medium mb-2 block" for="textInput4">Phone number</label>
                <div class="w-full rounded-full p-4 border border-gray-100 shadow flex items-center gap-3">
                  <select class="outline-none">
                    <option value="US">US</option>
                  </select>
                  <input class="w-full outline-none placeholder-gray-500 " id="textInput4" type="text" placeholder="+1 (555) 000-0000">
                </div>
              </div>
            </div>
            <label class="text-sm font-medium mb-2 block" for="textInput5">Message</label>
            <textarea class="resize-none w-full rounded-3xl p-4 mb-8 outline-none border border-gray-100 placeholder-gray-500 focus:ring focus:ring-orange-200 transition duration-200" id="textInput5" rows="5" placeholder="Enter your message"></textarea>
            <button class="py-4 px-6 h-14 rounded-full w-full inline-flex items-center justify-center text-center mb-8 bg-orange-500 border border-orange-600 font-bold font-heading text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" type="submit">Submit</button>
            <p class="text-gray-500 text-sm">
              <span>We process your information in accordance with our</span>
              <span class="text-orange-500 text-sm font-semibold">Privacy Policy</span>
            </p>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

Contact from Basko

Tailwind CSS

Basko

Split-Screen Testimonial and Trial Signup Form

A two-column section with a customer testimonial and logo on the left and a free trial signup form on the right. The form includes first name, last name, email, phone, optional company fields, and a purple full-width call-to-action button.

<section class="py-24 lg:py-36 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md">
          <div class="flex items-center justify-center mb-8 w-20 h-20 rounded-xl" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: 100% 100%;">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.2077 3.19551C13.9184 0.268161 18.0816 0.268162 18.7923 3.19552C19.2514 5.08655 21.4179 5.98396 23.0797 4.97142C25.6522 3.40398 28.596 6.34784 27.0286 8.92031C26.016 10.5821 26.9135 12.7486 28.8045 13.2077C31.7318 13.9184 31.7318 18.0816 28.8045 18.7923C26.9135 19.2514 26.016 21.4179 27.0286 23.0797C28.596 25.6522 25.6522 28.596 23.0797 27.0286C21.4179 26.016 19.2514 26.9135 18.7923 28.8045C18.0816 31.7318 13.9184 31.7318 13.2077 28.8045C12.7486 26.9135 10.5821 26.016 8.92031 27.0286C6.34784 28.596 3.40398 25.6522 4.97142 23.0797C5.98396 21.4179 5.08655 19.2514 3.19552 18.7923C0.268162 18.0816 0.268161 13.9184 3.19551 13.2077C5.08655 12.7486 5.98396 10.5821 4.97142 8.92031C3.40398 6.34784 6.34784 3.40398 8.92031 4.97141C10.5821 5.98396 12.7486 5.08655 13.2077 3.19551Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M21 16C21 18.7614 18.7614 21 16 21C13.2386 21 11 18.7614 11 16C11 13.2386 13.2386 11 16 11C18.7614 11 21 13.2386 21 16Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <h3 class="mb-6 text-3xl font-semibold" style="letter-spacing: -0.5px;">“Basko is a total game-changer! Streamlined workflow &amp; productivity. Highly recommend!”</h3>
          <h4 class="font-semibold tracking-tight mb-1">Annabelle Porter</h4>
          <span>Co-Founder, Marin-Jones Inc.</span>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <form class="flex flex-wrap -m-3" action="#">
          <div class="w-full md:w-1/2 p-3">
            <label class="block">
              <input class="px-4 py-4 w-full text-gray-700 tracking-tight placeholder-gray-700 outline-none border border-gray-700 focus:border-gray-400 rounded-lg transition duration-200" id="contactInput1-1" type="text" placeholder="First Name">
            </label>
          </div>
          <div class="w-full md:w-1/2 p-3">
            <label class="block">
              <input class="px-4 py-4 w-full text-gray-700 tracking-tight placeholder-gray-700 outline-none border border-gray-700 focus:border-gray-400 rounded-lg transition duration-200" id="contactInput1-2" type="text" placeholder="Last Name">
            </label>
          </div>
          <div class="w-full md:w-1/2 p-3">
            <label class="block">
              <input class="px-4 py-4 w-full text-gray-700 tracking-tight placeholder-gray-700 outline-none border border-gray-700 focus:border-gray-400 rounded-lg transition duration-200" id="contactInput1-3" type="text" placeholder="Email Address">
            </label>
          </div>
          <div class="w-full md:w-1/2 p-3">
            <label class="block">
              <input class="px-4 py-4 w-full text-gray-700 tracking-tight placeholder-gray-700 outline-none border border-gray-700 focus:border-gray-400 rounded-lg transition duration-200" id="contactInput1-4" type="text" placeholder="Phone Number">
            </label>
          </div>
          <div class="w-full p-3">
            <label class="block">
              <input class="px-4 py-4 w-full text-gray-700 tracking-tight placeholder-gray-700 outline-none border border-gray-700 focus:border-gray-400 rounded-lg transition duration-200" id="contactInput1-5" type="text" placeholder="Company (Optional)">
            </label>
          </div>
          <div class="w-full p-3">
            <button type="submit" class="inline-block mb-4 px-5 py-4 w-full text-white text-center font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</button>
            <span class="text-sm text-gray-600 tracking-tight">* We never share user details with third parties, period.</span>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

Contact from Zanrly

Tailwind CSS

Zanrly

Contact Us Section with Three Contact Info Cards

A light-themed contact section with a centered eyebrow label, bold heading, and supporting text above a row of three rounded gray cards showing email, phone, and address details each with a small blue icon. It is a marketing-style content block rather than a form or interactive contact widget.

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-white overflow-hidden border border-gray-100 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="mb-10 md:max-w-md mx-auto text-center">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">Contact Us</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">Get connected</h2>
          <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <div class="flex flex-wrap -m-4">
          <div class="w-full md:w-1/3 p-4">
            <div class="p-10 text-center h-full bg-gray-100 rounded-3xl">
              <div class="flex items-center justify-center mb-6 w-12 h-12 mx-auto bg-white rounded-xl">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14 16C14 17.77 13.23 19.37 12 20.46C10.94 21.42 9.54 22 8 22C4.69 22 2 19.31 2 16C2 13.9753 3.01397 12.1814 4.5554 11.0973C4.80358 10.9228 5.1393 11.0422 5.27324 11.3144C6.21715 13.2332 7.95419 14.6699 10.02 15.23C10.65 15.41 11.31 15.5 12 15.5C12.4872 15.5 12.9539 15.4538 13.4074 15.3687C13.6958 15.3146 13.9828 15.4995 13.9955 15.7925C13.9985 15.862 14 15.9314 14 16Z" fill="#3B82F6"></path>
                  <path d="M18 8C18 8.78 17.85 9.53 17.58 10.21C16.89 11.95 15.41 13.29 13.58 13.79C13.08 13.93 12.55 14 12 14C11.45 14 10.92 13.93 10.42 13.79C8.59 13.29 7.11 11.95 6.42 10.21C6.15 9.53 6 8.78 6 8C6 4.69 8.69 2 12 2C15.31 2 18 4.69 18 8Z" fill="#3B82F6"></path>
                  <path d="M22 16C22 19.31 19.31 22 16 22C15.2555 22 14.5393 21.8643 13.8811 21.6141C13.5624 21.4929 13.503 21.0851 13.7248 20.8262C14.8668 19.4938 15.5 17.786 15.5 16C15.5 15.66 15.47 15.32 15.42 15V15C15.3902 14.8155 15.4844 14.6342 15.6478 14.5437C16.9719 13.8107 18.0532 12.6875 18.727 11.3153C18.8609 11.0427 19.1968 10.923 19.4452 11.0977C20.9863 12.1818 22 13.9755 22 16Z" fill="#3B82F6"></path>
                </svg>
              </div>
              <h3 class="font-heading mb-2 text-xl text-gray-900 font-black">Send Email</h3>
              <p class="text-gray-500 font-bold">info@zanrly.com</p>
              <p class="text-gray-500 font-bold">support@zanrly.com</p>
            </div>
          </div>
          <div class="w-full md:w-1/3 p-4">
            <div class="p-10 text-center h-full bg-gray-100 rounded-3xl">
              <div class="flex items-center justify-center mb-6 w-12 h-12 mx-auto bg-white rounded-xl">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14 16C14 17.77 13.23 19.37 12 20.46C10.94 21.42 9.54 22 8 22C4.69 22 2 19.31 2 16C2 13.9753 3.01397 12.1814 4.5554 11.0973C4.80358 10.9228 5.1393 11.0422 5.27324 11.3144C6.21715 13.2332 7.95419 14.6699 10.02 15.23C10.65 15.41 11.31 15.5 12 15.5C12.4872 15.5 12.9539 15.4538 13.4074 15.3687C13.6958 15.3146 13.9828 15.4995 13.9955 15.7925C13.9985 15.862 14 15.9314 14 16Z" fill="#3B82F6"></path>
                  <path d="M18 8C18 8.78 17.85 9.53 17.58 10.21C16.89 11.95 15.41 13.29 13.58 13.79C13.08 13.93 12.55 14 12 14C11.45 14 10.92 13.93 10.42 13.79C8.59 13.29 7.11 11.95 6.42 10.21C6.15 9.53 6 8.78 6 8C6 4.69 8.69 2 12 2C15.31 2 18 4.69 18 8Z" fill="#3B82F6"></path>
                  <path d="M22 16C22 19.31 19.31 22 16 22C15.2555 22 14.5393 21.8643 13.8811 21.6141C13.5624 21.4929 13.503 21.0851 13.7248 20.8262C14.8668 19.4938 15.5 17.786 15.5 16C15.5 15.66 15.47 15.32 15.42 15V15C15.3902 14.8155 15.4844 14.6342 15.6478 14.5437C16.9719 13.8107 18.0532 12.6875 18.727 11.3153C18.8609 11.0427 19.1968 10.923 19.4452 11.0977C20.9863 12.1818 22 13.9755 22 16Z" fill="#3B82F6"></path>
                </svg>
              </div>
              <h3 class="font-heading mb-2 text-xl text-gray-900 font-black">Call Us</h3>
              <p class="text-gray-500 font-bold">+1 8424 199 941</p>
              <p class="text-gray-500 font-bold">+1 0221 234 554</p>
            </div>
          </div>
          <div class="w-full md:w-1/3 p-4">
            <div class="p-10 text-center h-full bg-gray-100 rounded-3xl">
              <div class="flex items-center justify-center mb-6 w-12 h-12 mx-auto bg-white rounded-xl">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14 16C14 17.77 13.23 19.37 12 20.46C10.94 21.42 9.54 22 8 22C4.69 22 2 19.31 2 16C2 13.9753 3.01397 12.1814 4.5554 11.0973C4.80358 10.9228 5.1393 11.0422 5.27324 11.3144C6.21715 13.2332 7.95419 14.6699 10.02 15.23C10.65 15.41 11.31 15.5 12 15.5C12.4872 15.5 12.9539 15.4538 13.4074 15.3687C13.6958 15.3146 13.9828 15.4995 13.9955 15.7925C13.9985 15.862 14 15.9314 14 16Z" fill="#3B82F6"></path>
                  <path d="M18 8C18 8.78 17.85 9.53 17.58 10.21C16.89 11.95 15.41 13.29 13.58 13.79C13.08 13.93 12.55 14 12 14C11.45 14 10.92 13.93 10.42 13.79C8.59 13.29 7.11 11.95 6.42 10.21C6.15 9.53 6 8.78 6 8C6 4.69 8.69 2 12 2C15.31 2 18 4.69 18 8Z" fill="#3B82F6"></path>
                  <path d="M22 16C22 19.31 19.31 22 16 22C15.2555 22 14.5393 21.8643 13.8811 21.6141C13.5624 21.4929 13.503 21.0851 13.7248 20.8262C14.8668 19.4938 15.5 17.786 15.5 16C15.5 15.66 15.47 15.32 15.42 15V15C15.3902 14.8155 15.4844 14.6342 15.6478 14.5437C16.9719 13.8107 18.0532 12.6875 18.727 11.3153C18.8609 11.0427 19.1968 10.923 19.4452 11.0977C20.9863 12.1818 22 13.9755 22 16Z" fill="#3B82F6"></path>
                </svg>
              </div>
              <h3 class="font-heading mb-2 text-xl text-gray-900 font-black">Address</h3>
              <p class="text-gray-500 font-bold">380 St Killda Road, Mellbourne</p>
              <p class="text-gray-500 font-bold">VIC 3004, Australia</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Contact from Nightsable

Tailwind CSS

Nightsable

Dark Branding Agency Contact Form with Heading and Lime Submit Button

A centered contact section on a near-black background with a small green eyebrow label, a large headline inviting partnership, a short descriptive paragraph, and a two-column form with name, email, company, and location fields. A full-width lime submit button and a small privacy notice appear below the form.

<section class="py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="md:max-w-4xl text-center mx-auto">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading mb-8 text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Work with Nightsable Team Exchange as a creative partner, we`ll reach out to you soon!</h2>
      <p class="mb-20 text-gray-300">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
      <div class="flex flex-wrap -m-2 mb-10">
        <div class="w-full md:w-1/2 p-2">
          <div class="mb-2 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="Full name">
          </div>
        </div>
        <div class="w-full md:w-1/2 p-2">
          <div class="mb-2 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="Last Name">
          </div>
        </div>
        <div class="w-full md:w-1/2 p-2">
          <div class="mb-2 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="E-mail">
          </div>
        </div>
        <div class="w-full md:w-1/2 p-2">
          <div class="mb-2 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="Company">
          </div>
        </div>
        <div class="w-full md:w-1/2 p-2">
          <div class="relative mb-2 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <select class="appearance-none pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="Company">
              <option hidden="">Location</option>
              <option>Poland</option>
              <option>Norway</option>
              <option>France</option>
            </select>
            <svg class="absolute right-8 top-1/2 transform -translate-y-1/2" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.6004 1.4585L9.16706 6.89183C8.52539 7.5335 7.47539 7.5335 6.83372 6.89183L1.40039 1.4585" stroke="white" stroke-width="1.66667" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap justify-center max-w-xs mx-auto mb-6">
        <div class="w-full"><a class="block px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Submit</a></div>
      </div>
      <p class="text-sm text-gray-300 max-w-xs mx-auto">Your information will be used accordane with our Privacy Policy. You may opf out at any time</p>
    </div>
  </div>
</section>

Contact from Zeus

Tailwind CSS

Zeus

Contact Section with Heading, Address, and Map

A light-background contact section with a large navy heading on the left and address and email contact details on the right, followed by a full-width gray map with a yellow location pin. The layout uses a split top row above a wide map band.

<section class="pt-20">
  <div class="container px-4 mx-auto mb-20">
    <div class="flex flex-wrap items-center justify-between -mx-4">
      <div class="w-full lg:w-auto px-4 mb-12 lg:mb-0">
        <div class="max-w-lg">
          <h2 class="text-4xl font-semibold font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        </div>
      </div>
      <div class="w-full lg:w-auto px-4">
        <h3 class="mb-4 text-2xl font-semibold font-heading">Address</h3>
        <p class="mb-10 lg:mb-8 text-gray-500">1686 Geraldine Lane New York, NY 10013</p>
        <h3 class="mb-4 text-2xl font-semibold font-heading">Contacts</h3>
        <p class="text-gray-500">hello@wireframes.org</p>
      </div>
    </div>
  </div>
  <div class="relative">
    <img class="relative w-full h-112 object-cover" src="zeus-assets/images/map.png" alt="">
  </div>
</section>

Contact from Zospace

Tailwind CSS

Zospace

Dark contact section with map, photo card, and contact details

A dark-themed contact section with a heading, a dark map with an Office pin, a photo card with a message call-to-action, and stacked cards showing phone, email, and address details. The layout combines a two-column arrangement with a left image-and-form card and right contact info cards.

<section class="relative py-20 2xl:py-40 bg-gray-800">
  <img class="hidden lg:block absolute top-0 left-0 w-2/5" src="zospace-assets/images/map.svg" alt="">
  <img class="hidden lg:block absolute top-0 left-0 mt-40 ml-40" src="zospace-assets/images/office-tag.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="text-center mb-20">
      <span class="text-lg text-blue-400 font-bold">Have a question?</span>
      <h2 class="mt-10 text-5xl font-bold font-heading text-white">Contact with us</h2>
    </div>
    <div class="max-w-4xl mx-auto">
      <div class="flex flex-wrap -mx-4 mb-20">
        <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-0">
          <div class="bg-gray-600 rounded-b-lg">
            <img class="h-64 w-full rounded-lg object-cover" src="https://image.freepik.com/free-photo/contacting-with-friends-via-computer_329181-14587.jpg" alt="">
            <div class="px-14 py-8">
              <div class="mb-6 py-px bg-gray-500"></div>
              <h3 class="mb-8 lg:mb-4 text-xl text-white font-bold">Have any question? Send a message!</h3>
              <div class="md:text-right"><a class="inline-block px-12 py-4 border border-gray-300 hover:border-gray-200 rounded-full font-bold text-white" href="#">Message</a></div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="py-6 px-8 mb-4 bg-gray-600 rounded-lg">
            <div class="flex items-center">
              <span class="flex items-center justify-center w-12 h-12 mr-8 bg-blue-500 rounded-lg">
                <svg class="w-4 h-4" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M17.9347 13.3167C17.811 12.6058 17.2022 12.0401 16.4551 11.94L12.3077 11.3855C11.555 11.2832 10.8101 11.6825 10.4984 12.3528C10.4185 12.5237 10.3521 12.7014 10.2981 12.8848C9.13582 12.4 8.09277 11.7004 7.19375 10.8018C6.29473 9.90315 5.59374 8.86053 5.10992 7.6987C5.29332 7.64471 5.4711 7.57835 5.64213 7.4985C6.31274 7.18695 6.70993 6.44351 6.60866 5.69108L6.05394 1.54536C5.9538 0.797426 5.38784 0.188953 4.66434 0.0641091C4.40105 0.0202451 4.18164 0 3.97348 0C2.61201 0 1.32368 0.71982 0.612565 1.87716C-0.157059 3.13122 -0.0501675 4.73507 0.128736 5.9925C0.533802 8.84029 1.99766 11.7038 4.14451 13.8498C5.74002 15.4446 7.71246 16.6402 9.84693 17.306C10.9339 17.6457 12.2942 18 13.605 18C14.5851 18 15.537 17.802 16.3235 17.2498C17.3733 16.5109 18 15.3052 18 14.0196C18 13.8115 17.9797 13.5911 17.9347 13.3167Z" fill="white"></path>
                </svg>
              </span>
              <p class="text-lg font-bold text-white">+44 20457523 00 01</p>
            </div>
          </div>
          <div class="py-6 px-8 mb-10 bg-gray-600 rounded-lg">
            <div class="flex items-center">
              <span class="flex items-center justify-center w-12 h-12 mr-8 bg-blue-500 rounded-lg">
                <svg class="w-5 h-3" width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.8109 0H2.1878C0.981688 0 0 0.980499 0 2.18676V11.8119C0 13.0182 0.981688 14 2.1878 14H18.8122C20.0183 14 21 13.0182 21 11.8119V2.18676C20.9987 0.980499 20.017 0 18.8109 0ZM19.2492 4.73317L11.716 8.67092C11.3393 8.86387 10.9193 8.96887 10.4993 8.96887C10.0794 8.96887 9.66858 8.86387 9.28273 8.67092L1.74945 4.73317V2.75511L10.0872 7.11288C10.3405 7.24414 10.6555 7.24414 10.9101 7.11288L19.2479 2.75511V4.73317H19.2492Z" fill="white"></path>
                </svg>
              </span>
              <p class="text-lg font-bold text-white">support@shuffle.dev.dev</p>
            </div>
          </div>
          <div class="py-6 px-8">
            <div class="flex">
              <span class="flex-shrink-0 flex items-center justify-center w-12 h-12 mr-8 bg-blue-500 rounded-lg">
                <svg class="w-5 h-5" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.5 11C16.0185 11 14 13.0962 14 15.6729C14 19.2285 17.8951 22.6871 18.0612 22.8339C18.3123 23.0554 18.6877 23.0554 18.9388 22.8339C19.1049 22.6885 23 19.2298 23 15.6729C23 13.0962 20.9815 11 18.5 11ZM18.5 17.4618C17.5077 17.4618 16.7003 16.6338 16.7003 15.6161C16.7003 14.5985 17.5077 13.7705 18.5 13.7705C19.4923 13.7705 20.2997 14.5985 20.2997 15.6161C20.2997 16.6338 19.4923 17.4618 18.5 17.4618Z" fill="white"></path>
                  <path d="M9.01758 0C4.04824 0 0 4.04035 0 9C0 13.9597 4.04824 18 9.01758 18C9.90081 18 10.7583 17.8745 11.5604 17.6315C10.1794 14.5374 10.8571 11.7539 12.7236 9.9193C12.6912 9.9193 12.2597 9.73436 12.2272 9.72086C8.69567 8.37903 5.3927 12.6232 8.35888 16.156C6.02299 15.94 4.00361 14.6171 2.84987 12.7096C4.09829 12.4153 5.00721 11.3057 5.02344 9.9922C5.04373 9.16199 5.60505 8.59232 6.30433 8.43573C9.41794 7.77021 9.7128 3.90535 8.51307 1.83051C9.34355 1.78461 10.0442 1.80756 11.0383 2.10049C10.7881 4.61407 12.1501 7.66087 15.1596 7.37468L16.0158 7.27614C16.0875 7.57312 16.1335 7.87011 16.1605 8.18464C16.7272 8.08745 17.4468 8.06855 18 8.17519C17.5739 3.60027 13.7056 0 9.01758 0Z" fill="white"></path>
                </svg>
              </span>
              <div>
                <div class="pb-4 pr-16 mb-6 border-b border-gray-500">
                  <p class="text-lg font-bold text-white">Bayswater, London</p>
                  <p class="text-lg font-bold text-white">W16EG, UK</p>
                </div>
                <p class="text-gray-400">The one est bad, semper six. At sem quis, congue</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="text-center">
        <p class="mb-4 text-xl text-gray-300">The brown fox jumps over the lazy dog.</p>
        <a class="inline-flex text-blue-400 hover:text-blue-500 font-bold" href="#">
          <span>Learn more</span>
          <svg class="ml-4 w-4 h-5" width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.7383 1.47342L18.7383 10.9304L17.5562 10.9304L17.5562 2.89788L0.834948 19.625L0.00154682 18.7916L16.7228 2.06448L9.28125 2.06448L9.28125 0.882355L18.1472 0.882355C18.4737 0.882355 18.7383 1.14697 18.7383 1.47342Z" fill="#1F40FF"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</section>

Contact from Wrexa

Tailwind CSS

Wrexa

Contact Section with Heading, Hours, Social Links, and Photo

A split-screen contact section with a large "Contact" heading, a subheading inviting text messages, business hours, a hotline number, Messenger and Snapchat handles, and CTA buttons for sending a message or starting live chat. A right-side photo of a woman with a laptop includes overlapping chat-bubble graphics reading "Good morning!" and "Seen".

<section class="py-24 md:pb-40 md:pt-52 relative">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-24 lg:mb-0">
        <div class="mb-14">
          <h2 class="font-heading text-5xl sm:text-7xl mb-2">Contact</h2>
          <h3 class="font-heading text-2xl sm:text-4xl mb-10">Have any question? Text me!</h3>
          <p class="mb-2 font-light">Mon - Fr 8:00 - 20:00 CET</p>
          <p class="mb-14 font-light">Hotline +44 223 448 0171</p>
          <div class="pb-20 border-b -mb-6">
            <a class="inline-flex mb-6 mr-14 items-center" href="#">
              <img class="mr-4" src="wrexa-assets/logos/brands/messenger.svg" alt="">
              <span class="font-light">chatshxxk</span>
            </a>
            <a class="inline-flex mb-6 items-center" href="#">
              <img class="mr-4" src="wrexa-assets/logos/brands/snapchat.svg" alt="">
              <span class="font-light">snapshxxk</span>
            </a>
          </div>
        </div>
        <div><a class="inline-block w-full sm:w-auto px-7 py-4 mb-4 sm:mb-0 sm:mr-5 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Send a message</a><a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium border border-gray-900 hover:text-gray-700 rounded transition duration-250" href="#">Live chat</a></div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <img class="block mx-auto" src="wrexa-assets/images/message-photo-writing-women.png" alt="">
      </div>
    </div>
  </div>
</section>

Contact from Flex

Tailwind CSS

Flex

Three-Column Contact Information Section with Green Icons

A horizontal row of three centered contact items (Email, Phone, Office), each with a green circular icon, bold heading, gray supporting text, and green contact details on a light background with a faint grid texture. It presents contact channels in a simple informational layout without form inputs or buttons.

<section class="py-20 md:py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/3 px-4 mb-12 md:mb-0">
        <div class="max-w-xs mx-auto text-center">
          <div class="inline-flex mb-6 items-center justify-center w-18 h-18 bg-green-500 rounded-full">
            <svg class="h-8 text-white" width="32" height="32" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M20.21 8.82L14 2.78C13.474 2.27986 12.7759 2.00095 12.05 2.00095C11.3241 2.00095 10.626 2.27986 10.1 2.78L3.89 8.78C3.61408 9.02087 3.39216 9.31731 3.23879 9.64991C3.08541 9.98251 3.00404 10.3438 3 10.71V19.29C3.01054 20.0176 3.30904 20.7114 3.83012 21.2193C4.35119 21.7273 5.05235 22.008 5.78 22H18.22C18.9476 22.008 19.6488 21.7273 20.1699 21.2193C20.691 20.7114 20.9895 20.0176 21 19.29V10.71C20.9992 10.3585 20.929 10.0106 20.7935 9.68623C20.6579 9.36189 20.4596 9.06752 20.21 8.82V8.82ZM11.44 4.22C11.593 4.08016 11.7927 4.00262 12 4.00262C12.2073 4.00262 12.407 4.08016 12.56 4.22L18 9.5L12.53 14.78C12.377 14.9198 12.1773 14.9974 11.97 14.9974C11.7627 14.9974 11.563 14.9198 11.41 14.78L6 9.5L11.44 4.22ZM19 19.29C18.9871 19.4863 18.8987 19.6699 18.7532 19.8023C18.6078 19.9347 18.4166 20.0056 18.22 20H5.78C5.58338 20.0056 5.39225 19.9347 5.24678 19.8023C5.10132 19.6699 5.01286 19.4863 5 19.29V11.35L9.05 15.25L7.39 16.85C7.20375 17.0374 7.09921 17.2908 7.09921 17.555C7.09921 17.8192 7.20375 18.0726 7.39 18.26C7.48295 18.3575 7.59463 18.4352 7.71836 18.4885C7.84208 18.5418 7.97529 18.5695 8.11 18.57C8.36747 18.569 8.61462 18.4687 8.8 18.29L10.57 16.59C11.0096 16.8586 11.5148 17.0008 12.03 17.0008C12.5452 17.0008 13.0504 16.8586 13.49 16.59L15.26 18.29C15.4454 18.4687 15.6925 18.569 15.95 18.57C16.0847 18.5695 16.2179 18.5418 16.3416 18.4885C16.4654 18.4352 16.5771 18.3575 16.67 18.26C16.8563 18.0726 16.9608 17.8192 16.9608 17.555C16.9608 17.2908 16.8563 17.0374 16.67 16.85L15 15.25L19 11.35V19.29Z" fill="currentColor"></path>
            </svg>
          </div>
          <h3 class="mb-2 text-2xl md:text-3xl leading-9 text-coolGray-900 font-bold">Email</h3>
          <p class="mb-4 text-lg md:text-xl font-medium text-coolGray-500 leading-7">Lorem ipsum dolor sit amet</p>
          <a class="text-lg md:text-xl text-green-500 hover:text-green-600 font-medium" href="mailto:#">contact@flex.co</a>
        </div>
      </div>
      <div class="w-full md:w-1/3 px-4 mb-12 md:mb-0">
        <div class="max-w-xs mx-auto text-center">
          <div class="inline-flex mb-6 items-center justify-center w-18 h-18 bg-green-500 rounded-full">
            <svg class="h-8 text-white" width="32" height="32" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.41 13C19.1901 13 18.96 12.93 18.74 12.88C18.2949 12.7805 17.8572 12.6501 17.43 12.49C16.9661 12.3212 16.4562 12.33 15.9984 12.5146C15.5405 12.6992 15.1671 13.0466 14.95 13.49L14.73 13.95C13.7589 13.3992 12.8617 12.7271 12.0601 11.95C11.2829 11.1484 10.6108 10.2512 10.0601 9.28L10.5201 9.07C10.9634 8.85292 11.3108 8.47953 11.4954 8.02169C11.6801 7.56385 11.6888 7.05391 11.5201 6.59C11.3612 6.15903 11.231 5.71808 11.13 5.27C11.08 5.05 11.04 4.82 11.01 4.6C10.8886 3.89562 10.5197 3.25774 9.96967 2.80124C9.41967 2.34474 8.72475 2.09961 8.01005 2.11H5.00005C4.5773 2.10945 4.1592 2.19825 3.77317 2.37058C3.38714 2.54292 3.04189 2.7949 2.76005 3.11C2.47237 3.43365 2.25817 3.81575 2.13215 4.23004C2.00614 4.64432 1.97131 5.08098 2.03005 5.51C2.57364 9.67214 4.47526 13.5387 7.44005 16.51C10.4114 19.4748 14.2779 21.3764 18.4401 21.92C18.5699 21.9299 18.7002 21.9299 18.83 21.92C19.5675 21.9211 20.2794 21.6505 20.83 21.16C21.1452 20.8782 21.3971 20.5329 21.5695 20.1469C21.7418 19.7609 21.8306 19.3428 21.83 18.92V15.92C21.8247 15.229 21.5809 14.5611 21.14 14.0291C20.6991 13.4971 20.088 13.1336 19.41 13ZM19.9 19C19.8997 19.1395 19.8702 19.2775 19.8134 19.4049C19.7565 19.5324 19.6736 19.6465 19.57 19.74C19.4604 19.8399 19.33 19.9141 19.1882 19.9573C19.0464 20.0006 18.8967 20.0117 18.75 19.99C15.0183 19.5026 11.5503 17.802 8.88005 15.15C6.20752 12.4775 4.49208 8.99737 4.00005 5.25C3.97833 5.10333 3.98949 4.95367 4.03272 4.81185C4.07596 4.67003 4.1502 4.5396 4.25005 4.43C4.34467 4.32515 4.46043 4.24154 4.5897 4.18466C4.71897 4.12778 4.85882 4.09892 5.00005 4.1H8.00005C8.23121 4.09435 8.45719 4.16898 8.63951 4.3112C8.82184 4.45341 8.94925 4.65442 9.00005 4.88C9.00005 5.15 9.09005 5.43 9.15005 5.7C9.26563 6.22386 9.41937 6.73857 9.61005 7.24L8.21005 7.9C7.96941 8.01046 7.78241 8.21185 7.69005 8.46C7.59003 8.70346 7.59003 8.97654 7.69005 9.22C9.12925 12.3028 11.6073 14.7808 14.69 16.22C14.9335 16.32 15.2066 16.32 15.45 16.22C15.6982 16.1276 15.8996 15.9406 16.01 15.7L16.64 14.3C17.156 14.4881 17.6838 14.6418 18.22 14.76C18.48 14.82 18.76 14.87 19.0301 14.91C19.2556 14.9608 19.4566 15.0882 19.5989 15.2705C19.7411 15.4529 19.8157 15.6788 19.81 15.91L19.9 19ZM14 2C13.7701 2 13.53 2 13.3 2C13.0348 2.02254 12.7894 2.14952 12.6178 2.353C12.4462 2.55647 12.3625 2.81978 12.385 3.085C12.4076 3.35022 12.5346 3.59562 12.738 3.76721C12.9415 3.93881 13.2048 4.02254 13.47 4H14C15.5913 4 17.1175 4.63214 18.2427 5.75736C19.3679 6.88258 20 8.4087 20 10C20 10.18 20 10.35 20 10.53C19.9779 10.7938 20.0612 11.0556 20.2318 11.2581C20.4024 11.4606 20.6463 11.5871 20.91 11.61H20.99C21.2404 11.611 21.482 11.5181 21.6671 11.3496C21.8523 11.1811 21.9675 10.9493 21.99 10.7C21.99 10.47 21.99 10.23 21.99 10C21.9901 7.88 21.1486 5.84668 19.6504 4.34668C18.1523 2.84667 16.12 2.00265 14 2ZM16 10C16 10.2652 16.1054 10.5196 16.2929 10.7071C16.4805 10.8946 16.7348 11 17 11C17.2653 11 17.5196 10.8946 17.7072 10.7071C17.8947 10.5196 18 10.2652 18 10C18 8.93913 17.5786 7.92172 16.8285 7.17157C16.0783 6.42143 15.0609 6 14 6C13.7348 6 13.4805 6.10536 13.2929 6.29289C13.1054 6.48043 13 6.73478 13 7C13 7.26522 13.1054 7.51957 13.2929 7.70711C13.4805 7.89464 13.7348 8 14 8C14.5305 8 15.0392 8.21071 15.4143 8.58579C15.7893 8.96086 16 9.46957 16 10Z" fill="currentColor"></path>
            </svg>
          </div>
          <h3 class="mb-2 text-2xl md:text-3xl leading-9 text-coolGray-900 font-bold">Phone</h3>
          <p class="mb-4 text-lg md:text-xl font-medium text-coolGray-500 leading-7">Lorem ipsum dolor sit amet</p>
          <p class="text-lg md:text-xl text-green-500 font-medium">+7-843-672-431</p>
        </div>
      </div>
      <div class="w-full md:w-1/3 px-4">
        <div class="max-w-xs mx-auto text-center">
          <div class="inline-flex mb-6 items-center justify-center w-18 h-18 bg-green-500 rounded-full">
            <svg class="h-8 text-white" width="32" height="32" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.0001 4.48C16.4088 2.8887 14.2505 1.99472 12.0001 1.99472C9.74961 1.99472 7.59135 2.8887 6.00005 4.48C4.40875 6.0713 3.51477 8.22957 3.51477 10.48C3.51477 12.7304 4.40875 14.8887 6.00005 16.48L11.2701 21.76C11.363 21.8537 11.4736 21.9281 11.5955 21.9789C11.7173 22.0297 11.848 22.0558 11.9801 22.0558C12.1121 22.0558 12.2428 22.0297 12.3646 21.9789C12.4865 21.9281 12.5971 21.8537 12.6901 21.76L18.0001 16.43C19.5847 14.8453 20.4749 12.6961 20.4749 10.455C20.4749 8.21395 19.5847 6.06468 18.0001 4.48ZM16.5701 15L12.0001 19.59L7.43005 15C6.5272 14.0963 5.91253 12.9452 5.66375 11.6923C5.41497 10.4393 5.54324 9.14075 6.03236 7.96068C6.52147 6.78062 7.34947 5.77205 8.41168 5.06248C9.4739 4.35291 10.7226 3.97418 12.0001 3.97418C13.2775 3.97418 14.5262 4.35291 15.5884 5.06248C16.6506 5.77205 17.4786 6.78062 17.9677 7.96068C18.4569 9.14075 18.5851 10.4393 18.3364 11.6923C18.0876 12.9452 17.4729 14.0963 16.5701 15ZM9.00005 7.41C8.19277 8.21977 7.73945 9.31657 7.73945 10.46C7.73945 11.6034 8.19277 12.7002 9.00005 13.51C9.59981 14.1108 10.3636 14.5211 11.1957 14.6894C12.0278 14.8577 12.891 14.7766 13.6771 14.4562C14.4632 14.1357 15.1372 13.5903 15.6145 12.8883C16.0918 12.1862 16.3512 11.3589 16.3601 10.51C16.3646 9.94321 16.2554 9.38126 16.039 8.85739C15.8225 8.33352 15.5033 7.85836 15.1001 7.46C14.7037 7.05458 14.2311 6.73154 13.7095 6.50947C13.1878 6.2874 12.6274 6.17068 12.0605 6.16603C11.4935 6.16138 10.9313 6.2689 10.406 6.48239C9.8808 6.69588 9.40297 7.01113 9.00005 7.41ZM13.6901 12.09C13.3111 12.4747 12.8103 12.7159 12.2732 12.7723C11.7361 12.8286 11.1961 12.6966 10.7456 12.3989C10.295 12.1012 9.96185 11.6562 9.80306 11.1401C9.64427 10.6239 9.6697 10.0686 9.87501 9.56916C10.0803 9.06967 10.4528 8.65702 10.9286 8.40174C11.4045 8.14646 11.9543 8.06441 12.484 8.16962C13.0137 8.27483 13.4904 8.56076 13.8326 8.97853C14.1748 9.39631 14.3612 9.91997 14.3601 10.46C14.3455 11.0773 14.0865 11.6635 13.6401 12.09H13.6901Z" fill="currentColor"></path>
            </svg>
          </div>
          <h3 class="mb-2 text-2xl md:text-3xl font-bold leading-9 text-coolGray-900">Office</h3>
          <p class="mb-4 text-xl font-medium text-coolGray-500 leading-7">Lorem ipsum dolor sit amet</p>
          <p class="text-lg md:text-xl font-medium text-green-500">1686, Geraldine Lane</p>
          <p class="text-lg md:text-xl font-medium text-green-500">New York, NY 10013</p>
        </div>
      </div>
    </div>
  </div>
</section>

Contact from Uinel

Tailwind CSS

Uinel

Contact Us Hero with Video Call Preview

A contact-focused hero section with a left-aligned heading, supporting text, and Call and More buttons, paired with a video call screenshot showing a chat card and call controls. The layout is a split screen with a light lavender background and rounded container.

<section class="py-24 2xl:py-44 bg-blueGray-100 rounded-b-10xl">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full md:w-1/2 lg:w-2/5 px-4 mb-20 md:mb-0">
        <span class="mb-9 block font-medium uppercase tracking-widest text-xs leading-4 text-gray-300">Contact us</span>
        <h2 class="mt-8 mb-12 text-9xl md:text-10xl xl:text-11xl font-medium font-heading leading-tight">Have any question?</h2>
        <p class="mb-14 xl:mb-16 text-lg text-darkBlueGray-400">Lorem ipsum commodo, tristique lectus.</p>
        <div class="flex flex-wrap"><a class="inline-block py-5 px-10 mr-6 text-xl leading-6 text-white font-medium tracking-tighter font-heading bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">Call</a><a class="inline-block py-5 px-10 text-xl leading-6 font-medium tracking-tighter font-heading bg-white hover:bg-gray-50 focus:ring-2 focus:ring-gray-50 focus:ring-opacity-50 rounded-xl" href="#">More</a></div>
      </div>
      <div class="w-full md:w-1/2 lg:w-3/5 px-4">
        <img src="uinel-assets/images/contacts/widget.png" alt="">
      </div>
    </div>
  </div>
</section>

Contact from Nigodo

Tailwind CSS

Nigodo

Three-Column Contact Info Cards with Icons

A row of three outlined cards, each with a circular icon at the top edge, a bold heading (Email, Phone, Office), supporting text, and a coral contact detail. The layout is a horizontal row of equal-width cards on a light background, used to present contact channels.

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-20 lg:mb-0">
        <div class="relative h-full px-6 pb-12 pt-20 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div class="absolute top-0 left-1/2 transform -translate-y-1/2 -translate-x-1/2 inline-flex items-center justify-center w-24 h-24 bg-white rounded-full border-3 border-indigo-900 text-indigo-900">
            <svg width="30" height="34" viewBox="0 0 30 34" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M28.6833 11.7L18.3333 1.63331C17.4566 0.799736 16.2931 0.3349 15.0833 0.3349C13.8736 0.3349 12.7101 0.799736 11.8333 1.63331L1.48333 11.6333C1.02347 12.0348 0.653608 12.5288 0.397983 13.0832C0.142357 13.6375 0.00673439 14.2396 0 14.85V29.15C0.0175674 30.3627 0.515073 31.519 1.38353 32.3656C2.25199 33.2121 3.42059 33.68 4.63333 33.6666H25.3667C26.5794 33.68 27.748 33.2121 28.6165 32.3656C29.4849 31.519 29.9824 30.3627 30 29.15V14.85C29.9987 14.2641 29.8817 13.6842 29.6558 13.1437C29.4298 12.6031 29.0994 12.1125 28.6833 11.7V11.7ZM14.0667 4.03331C14.3216 3.80025 14.6546 3.67101 15 3.67101C15.3454 3.67101 15.6784 3.80025 15.9333 4.03331L25 12.8333L15.8833 21.6333C15.6284 21.8664 15.2954 21.9956 14.95 21.9956C14.6046 21.9956 14.2716 21.8664 14.0167 21.6333L5 12.8333L14.0667 4.03331ZM26.6667 29.15C26.6452 29.4771 26.4978 29.7832 26.2554 30.0039C26.0129 30.2246 25.6944 30.3426 25.3667 30.3333H4.63333C4.30563 30.3426 3.98708 30.2246 3.74464 30.0039C3.5022 29.7832 3.35477 29.4771 3.33333 29.15V15.9166L10.0833 22.4166L7.31667 25.0833C7.00625 25.3956 6.83201 25.818 6.83201 26.2583C6.83201 26.6986 7.00625 27.121 7.31667 27.4333C7.47158 27.5958 7.65772 27.7253 7.86393 27.8141C8.07014 27.9029 8.29216 27.9491 8.51667 27.95C8.94578 27.9483 9.3577 27.7811 9.66667 27.4833L12.6167 24.65C13.3493 25.0977 14.1914 25.3346 15.05 25.3346C15.9086 25.3346 16.7507 25.0977 17.4833 24.65L20.4333 27.4833C20.7423 27.7811 21.1542 27.9483 21.5833 27.95C21.8078 27.9491 22.0299 27.9029 22.2361 27.8141C22.4423 27.7253 22.6284 27.5958 22.7833 27.4333C23.0938 27.121 23.268 26.6986 23.268 26.2583C23.268 25.818 23.0938 25.3956 22.7833 25.0833L20 22.4166L26.6667 15.9166V29.15Z" fill="currentColor"></path>
            </svg>
          </div>
          <h3 class="text-3xl md:text-4xl font-extrabold mb-3">Email</h3>
          <h4 class="sm:text-xl font-extrabold mb-6">Lorem ipsum dolor sit amet</h4>
          <p class="text-xl sm:text-2xl text-red-400">contact@nigodo.co</p>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-20 lg:mb-0">
        <div class="relative h-full px-6 pb-12 pt-20 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div class="absolute top-0 left-1/2 transform -translate-y-1/2 -translate-x-1/2 inline-flex items-center justify-center w-24 h-24 bg-white rounded-full border-3 border-indigo-900 text-indigo-900">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M32.35 21.6666C31.9834 21.6666 31.6 21.55 31.2334 21.4666C30.4914 21.3007 29.7619 21.0836 29.05 20.8166C28.2769 20.5354 27.427 20.55 26.6639 20.8577C25.9008 21.1653 25.2785 21.7444 24.9167 22.4833L24.55 23.25C22.9314 22.332 21.4361 21.2119 20.1 19.9166C18.8048 18.5806 17.6847 17.0853 16.7667 15.4666L17.5334 15.1166C18.2723 14.7548 18.8513 14.1325 19.159 13.3695C19.4667 12.6064 19.4813 11.7565 19.2 10.9833C18.9354 10.265 18.7182 9.53011 18.55 8.78331C18.4667 8.41665 18.4 8.03331 18.35 7.66665C18.1477 6.49268 17.5328 5.42955 16.6161 4.66871C15.6994 3.90787 14.5412 3.49933 13.35 3.51665H8.33338C7.62879 3.51572 6.93196 3.66373 6.28857 3.95095C5.64519 4.23818 5.06977 4.65814 4.60004 5.18331C4.12058 5.72274 3.76357 6.35956 3.55355 7.05004C3.34353 7.74052 3.28547 8.46827 3.38338 9.18331C4.28935 16.1202 7.45873 22.5644 12.4 27.5166C17.3523 32.458 23.7965 35.6273 30.7334 36.5333C30.9497 36.5498 31.167 36.5498 31.3834 36.5333C32.6124 36.5351 33.799 36.0842 34.7167 35.2666C35.2419 34.7969 35.6618 34.2215 35.9491 33.5781C36.2363 32.9347 36.3843 32.2379 36.3834 31.5333V26.5333C36.3744 25.3817 35.9681 24.2685 35.2333 23.3818C34.4984 22.4951 33.48 21.8893 32.35 21.6666ZM33.1667 31.6666C33.1662 31.8992 33.1169 32.1291 33.0222 32.3415C32.9275 32.5539 32.7894 32.7442 32.6167 32.9C32.434 33.0664 32.2167 33.1901 31.9803 33.2622C31.7439 33.3343 31.4945 33.3529 31.25 33.3166C25.0305 32.5044 19.2505 29.67 14.8 25.25C10.3458 20.7958 7.48676 14.9956 6.66671 8.74998C6.6305 8.50554 6.6491 8.2561 6.72117 8.01973C6.79323 7.78336 6.91695 7.56598 7.08338 7.38331C7.24108 7.20857 7.43401 7.06921 7.64946 6.97441C7.86491 6.87961 8.098 6.83152 8.33338 6.83331H13.3334C13.7186 6.8239 14.0953 6.94829 14.3992 7.18531C14.703 7.42234 14.9154 7.75734 15 8.13331C15 8.58331 15.15 9.04998 15.25 9.49998C15.4427 10.3731 15.6989 11.2309 16.0167 12.0666L13.6834 13.1666C13.2823 13.3508 12.9706 13.6864 12.8167 14.1C12.65 14.5057 12.65 14.9609 12.8167 15.3666C15.2154 20.5046 19.3454 24.6346 24.4834 27.0333C24.8891 27.2 25.3443 27.2 25.75 27.0333C26.1636 26.8794 26.4993 26.5677 26.6834 26.1666L27.7334 23.8333C28.5932 24.1468 29.4729 24.403 30.3667 24.6C30.8 24.7 31.2667 24.7833 31.7167 24.85C32.0927 24.9346 32.4277 25.147 32.6647 25.4509C32.9017 25.7547 33.0261 26.1314 33.0167 26.5166L33.1667 31.6666ZM23.3334 3.33331C22.95 3.33331 22.55 3.33331 22.1667 3.33331C21.7247 3.37089 21.3157 3.58251 21.0297 3.92164C20.7437 4.26077 20.6041 4.69962 20.6417 5.14165C20.6793 5.58367 20.8909 5.99267 21.23 6.27866C21.5692 6.56466 22.008 6.70422 22.45 6.66665H23.3334C25.9855 6.66665 28.5291 7.72021 30.4044 9.59558C32.2798 11.4709 33.3334 14.0145 33.3334 16.6666C33.3334 16.9666 33.3334 17.25 33.3334 17.55C33.2964 17.9897 33.4353 18.4261 33.7196 18.7635C34.004 19.1009 34.4105 19.3118 34.85 19.35H34.9834C35.4006 19.3517 35.8033 19.1968 36.1119 18.916C36.4205 18.6352 36.6125 18.2488 36.65 17.8333C36.65 17.45 36.65 17.05 36.65 16.6666C36.65 13.1333 35.2476 9.74445 32.7507 7.24444C30.2538 4.74444 26.8667 3.33773 23.3334 3.33331ZM26.6667 16.6666C26.6667 17.1087 26.8423 17.5326 27.1549 17.8452C27.4674 18.1577 27.8913 18.3333 28.3334 18.3333C28.7754 18.3333 29.1993 18.1577 29.5119 17.8452C29.8244 17.5326 30 17.1087 30 16.6666C30 14.8985 29.2977 13.2028 28.0474 11.9526C26.7972 10.7024 25.1015 9.99998 23.3334 9.99998C22.8913 9.99998 22.4674 10.1756 22.1549 10.4881C21.8423 10.8007 21.6667 11.2246 21.6667 11.6666C21.6667 12.1087 21.8423 12.5326 22.1549 12.8452C22.4674 13.1577 22.8913 13.3333 23.3334 13.3333C24.2174 13.3333 25.0653 13.6845 25.6904 14.3096C26.3155 14.9347 26.6667 15.7826 26.6667 16.6666Z" fill="currentColor"></path>
            </svg>
          </div>
          <h3 class="text-3xl md:text-4xl font-extrabold mb-3">Phone</h3>
          <h4 class="sm:text-xl font-extrabold mb-6">Lorem ipsum dolor sit amet</h4>
          <p class="text-xl sm:text-2xl text-red-400">+7-843-672-431</p>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4">
        <div class="relative h-full px-6 pb-12 pt-20 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div class="absolute top-0 left-1/2 transform -translate-y-1/2 -translate-x-1/2 inline-flex items-center justify-center w-24 h-24 bg-white rounded-full border-3 border-indigo-900 text-indigo-900">
            <svg width="30" height="34" viewBox="0 0 30 34" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M25 4.46666C22.3479 1.81449 18.7508 0.324524 15 0.324524C11.2493 0.324524 7.65221 1.81449 5.00005 4.46666C2.34788 7.11882 0.85791 10.7159 0.85791 14.4667C0.85791 18.2174 2.34788 21.8145 5.00005 24.4667L13.7834 33.2667C13.9383 33.4229 14.1227 33.5469 14.3258 33.6315C14.5288 33.7161 14.7467 33.7597 14.9667 33.7597C15.1867 33.7597 15.4046 33.7161 15.6077 33.6315C15.8108 33.5469 15.9951 33.4229 16.15 33.2667L25 24.3833C27.6411 21.7422 29.1249 18.1601 29.1249 14.425C29.1249 10.6899 27.6411 7.10779 25 4.46666V4.46666ZM22.6167 22L15 29.65L7.38338 22C5.87862 20.4939 4.85417 18.5754 4.43954 16.4871C4.0249 14.3989 4.23869 12.2346 5.05389 10.2678C5.86908 8.30102 7.24907 6.62008 9.01943 5.43745C10.7898 4.25483 12.871 3.62363 15 3.62363C17.1291 3.62363 19.2103 4.25483 20.9807 5.43745C22.751 6.62008 24.131 8.30102 24.9462 10.2678C25.7614 12.2346 25.9752 14.3989 25.5606 16.4871C25.1459 18.5754 24.1215 20.4939 22.6167 22V22ZM10 9.34999C8.65457 10.6996 7.89904 12.5276 7.89904 14.4333C7.89904 16.339 8.65457 18.167 10 19.5167C10.9996 20.518 12.2727 21.2018 13.6595 21.4823C15.0462 21.7629 16.485 21.6276 17.7952 21.0936C19.1054 20.5595 20.2287 19.6505 21.0242 18.4804C21.8197 17.3104 22.2519 15.9314 22.2667 14.5167C22.2742 13.572 22.0922 12.6354 21.7316 11.7623C21.3709 10.8892 20.8388 10.0973 20.1667 9.43333C19.5062 8.75762 18.7185 8.21922 17.8491 7.8491C16.9797 7.47898 16.0456 7.28445 15.1007 7.27671C14.1558 7.26896 13.2187 7.44815 12.3433 7.80397C11.468 8.15979 10.6716 8.68521 10 9.34999V9.34999ZM17.8167 17.15C17.1851 17.7912 16.3504 18.1932 15.4553 18.2871C14.5601 18.381 13.6602 18.1611 12.9092 17.6649C12.1583 17.1687 11.603 16.4271 11.3384 15.5668C11.0737 14.7065 11.1161 13.7811 11.4583 12.9486C11.8005 12.1161 12.4212 11.4284 13.2144 11.0029C14.0075 10.5774 14.9238 10.4407 15.8066 10.616C16.6894 10.7914 17.4839 11.2679 18.0542 11.9642C18.6246 12.6605 18.9353 13.5333 18.9334 14.4333C18.9091 15.4621 18.4775 16.4392 17.7334 17.15H17.8167Z" fill="currentColor"></path>
            </svg>
          </div>
          <h3 class="text-3xl md:text-4xl font-extrabold mb-3">Office</h3>
          <h4 class="sm:text-xl font-extrabold mb-6">Lorem ipsum dolor sit amet</h4>
          <p class="text-xl sm:text-2xl text-red-400">1686, Geraldine Lane</p>
          <p class="text-xl sm:text-2xl text-red-400">New York, NY 10013</p>
        </div>
      </div>
    </div>
  </div>
</section>

Contact from Atis

Tailwind CSS

Atis

Purple Contact Section with Office Details and Inquiry Form

A contact section on a solid purple background with a heading, office address, email, social icons, and a form with department radio options, subject, name, email, message fields, a terms checkbox, and a pink Get Started button. Contact information sits in a left column and the form in a right column.

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-purple-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-purple-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-purple-600 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-12">
        <h2 class="text-4xl lg:text-5xl font-bold font-heading text-white">Contact</h2>
        <p class="text-gray-50 leading-loose">Got any question? Let’s talk about it.</p>
      </div>
      <div class="flex flex-wrap">
        <div class="w-full lg:w-1/2 mb-16 lg:mb-0">
          <div class="flex flex-wrap">
            <div class="mb-12 w-full md:w-1/2 lg:w-1/2">
              <h3 class="mb-2 text-3xl lg:text-4xl font-bold text-white">Office</h3>
              <p class="text-gray-50">359 Hidden Valley</p>
              <p class="text-gray-50">Road, NY</p>
            </div>
            <div class="mb-12 w-full md:w-1/2">
              <h3 class="mb-2 text-3xl lg:text-4xl font-bold text-white">Contacts</h3>
              <p class="text-gray-50">hallo@gamil.com</p>
            </div>
            <div class="w-full md:w-1/3 lg:w-full">
              <h3 class="mb-2 text-3xl lg:text-4xl font-bold text-white">Socials</h3>
              <div class="flex">
                <a class="mr-3" href="#">
                  <img src="atis-assets/social/facebook-yellow.svg" alt="">
                </a>
                <a class="mr-3" href="#">
                  <img src="atis-assets/social/twitter-yellow.svg" alt="">
                </a>
                <a href="#">
                  <img src="atis-assets/social/instagram-yellow.svg" alt="">
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2">
          <div class="max-w-md lg:mx-auto">
            <form action="">
              <div class="mb-4 text-sm">
                <span class="mr-4 font-semibold text-purple-500">Department:</span>
                <label class="mr-4">
                  <input class="mr-1" type="radio" name="department" value="1" checked="">
                  <span class="text-purple-400">Support</span>
                </label>
                <label>
                  <input class="mr-1" type="radio" name="department" value="2">
                  <span class="text-purple-400">Sales</span>
                </label>
              </div>
              <div class="mb-4">
                <input class="w-full p-4 text-xs font-semibold leading-none bg-white rounded outline-none" type="text" placeholder="Subject">
              </div>
              <div class="mb-4">
                <input class="w-full p-4 text-xs font-semibold leading-none bg-white rounded outline-none" type="text" placeholder="Name">
              </div>
              <div class="mb-4">
                <input class="w-full p-4 text-xs font-semibold leading-none bg-white rounded outline-none" type="email" placeholder="name@example.com">
              </div>
              <div class="mb-4"><textarea class="w-full h-24 p-4 text-xs font-semibold leading-none resize-none bg-white rounded outline-none" type="text" placeholder="Message..."></textarea></div>
              <div class="mb-4">
                <label class="flex px-2 bg-white rounded">
                  <input class="hidden" type="file" placeholder="Choose file.." name="Choose file">
                  <div class="my-1 ml-auto px-4 py-3 text-xs text-white font-semibold leading-none bg-gray-500 hover:bg-gray-600 rounded cursor-pointer transition duration-200">Browse</div>
                </label>
              </div>
              <div class="flex justify-between items-center">
                <label>
                  <input class="mr-1" type="checkbox" name="terms" value="1">
                  <span class="text-sm font-semibold text-gray-50">I agree to terms and conditions.</span>
                </label>
                <button class="inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-pink-600 hover:bg-pink-700 text-white font-bold leading-loose transition duration-200">Get Started</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="skew skew-bottom mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-purple-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-bottom ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-purple-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 10 10"></polygon>
    </svg>
  </div>
</section>

Contact from Pstls.

Tailwind CSS

Pstls.

Contact section with contact details and message form

A light contact section with a serif "Contact" heading, email, phone, and social links on the left, and a card-style form with name, surname, email, phone, topic, message, file attachment, and a Send Now button on the right.

<section class="py-24 relative"><img class="absolute top-0 left-0 object-cover" src="pstls-assets/images/contacts/pink-shadows.png" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 pb-14 md:mb-20 items-center">
      <div class="w-full md:w-1/2 px-4 mb-6">
        <h2 class="text-5xl lg:text-6xl font-heading" >Contact</h2>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <p class="text-gray-500" >Is the answer to your question missing?</p>
        <p >Get in touch with us.</p>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 px-4">
        <div class="flex flex-wrap -mx-4">
          
          <div class="w-full md:w-1/2 px-4 mb-10">
            <p class="text-gray-500" >E-mail</p><a class="inline-block text-black hover:underline" href="mailto:contact@pstls.com" >contact@pstls.com</a>
          </div>
          
          <div class="w-full md:w-1/2 px-4 mb-10">
            <p class="text-gray-500" >Phone</p>
            <p >+1-2020-555-109</p>
          </div>
          
          <div class="w-full px-4">
            <p class="text-gray-500 mb-2" >Socials</p>
            <div><a class="inline-block" href="#"><img src="pstls-assets/images/contacts/facebook.png" alt=""></a><a class="inline-block" href="#"><img src="pstls-assets/images/contacts/twitter.png" alt=""></a><a class="inline-block" href="#"><img src="pstls-assets/images/contacts/google.png" alt=""></a></div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4">
        <div class="px-6 py-10 md:px-10 bg-white shadow-xl">
          <form action="">
            <div class="flex flex-wrap -mx-4 mb-6">
              <div class="w-full lg:w-1/2 px-4 mb-6 lg:mb-0">
                <input class="block w-full py-2 px-4 text-lg border-b border-gray-400 placeholder-gray-300 outline-none" type="text" placeholder="Name">
              </div>
              <div class="w-full lg:w-1/2 px-4">
                <input class="block w-full py-2 px-4 text-lg border-b border-gray-400 placeholder-gray-300 outline-none" type="text" placeholder="Surname">
              </div>
            </div>
            <div class="flex flex-wrap -mx-4 mb-6">
              <div class="w-full lg:w-1/2 px-4 mb-6 lg:mb-0">
                <input class="block w-full py-2 px-4 text-lg border-b border-gray-400 placeholder-gray-300 outline-none" type="email" placeholder="Mail address">
              </div>
              <div class="w-full lg:w-1/2 px-4">
                <input class="block w-full py-2 px-4 text-lg border-b border-gray-400 placeholder-gray-300 outline-none" type="text" placeholder="Phone number">
              </div>
            </div>
            <input class="block w-full mb-6 py-2 px-4 text-lg border-b border-gray-400 placeholder-gray-300 outline-none" type="text" placeholder="Form Topic">
            <textarea class="block w-full py-2 px-4 mb-6 text-lg border-b border-gray-400 placeholder-gray-300 outline-none resize-none" name="" id="" cols="30" rows="10" placeholder="Form message"></textarea>
            <button class="inline-flex items-center mb-6">
              <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 8.96959L9.96279 16.5497C8.97817 17.4783 7.64274 18 6.25028 18C4.85782 18 3.52239 17.4783 2.53777 16.5497C1.55315 15.6211 1 14.3616 1 13.0483C1 11.7351 1.55315 10.4756 2.53777 9.54697L10.575 1.96687C11.2314 1.34779 12.1217 1 13.05 1C13.9783 1 14.8686 1.34779 15.525 1.96687C16.1814 2.58595 16.5502 3.4256 16.5502 4.30111C16.5502 5.17662 16.1814 6.01628 15.525 6.63535L7.47904 14.2154C7.15083 14.525 6.70569 14.6989 6.24154 14.6989C5.77738 14.6989 5.33224 14.525 5.00403 14.2154C4.67583 13.9059 4.49144 13.4861 4.49144 13.0483C4.49144 12.6106 4.67583 12.1907 5.00403 11.8812L12.429 4.88674" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg><span class="ml-3" >Attach File</span>
            </button>
            <button class="block w-full py-3 px-8 text-black font-bold bg-indigo-200 hover:bg-indigo-300 transition duration-200" >Send Now</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Contact from BoldUI

Tailwind CSS

BoldUI

Dark Contact Section with Address and Map Background

A dark contact section with a heading, short intro text, a yellow Activate demo call-to-action and a Share with friends link, plus an ellipse overlay showing an address and email over a dark map image. The layout stacks text and actions on the left with contact details on the right.

<section class="pt-20 bg-black overflow-x-hidden">
  <div class="relative container mx-auto px-4 pb-20">
    <img class="absolute top-1/2 left-1/2 -mt-24 -ml-40 h-128" src="boldui-assets/elements/shadow-blue-full.svg" alt="">
    <div class="relative z-10 flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 px-4">
        <h2 class="mb-6 text-2xl text-white uppercase font-heading">Contact us</h2>
        <p class="mb-6 text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
        <div>
          <a class="inline-flex mb-4 lg:mb-0 mr-8 items-center py-4 px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
            <svg class="text-black mr-3" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="currentColor"></path>
            </svg>
            <span class="text-sm font-heading">Activate demo</span>
          </a>
          <a class="inline-flex items-center text-white hover:underline" href="#">
            <span class="mr-2 text-sm font-heading">Share with friends</span>
            <svg class="text-yellow-300" width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 3.95383H0V6.04614H12.01V9.1846L16 4.99998L12.01 0.815369V3.95383Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="relative w-full md:w-1/2 px-4">
        <div class="absolute top-0 left-0 h-128 w-full flex items-center justify-center bg-contain bg-no-repeat bg-center" style="background-image: url('boldui-assets/images/ellipse-dark.png');">
          <div class="text-center">
            <h3 class="text-lg text-blue-500">Address</h3>
            <p class="text-lg text-white">1686 Geraldine Lane</p>
            <p class="mb-6 text-lg text-white">New York, NY 10013</p>
            <h3 class="text-lg text-blue-500">Contacts</h3>
            <a class="inline-block text-lg text-white" href="mailto:hello@shuffle.dev">hello@shuffle.dev</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="relative h-128 w-full">
    <img class="w-full h-full object-cover" src="boldui-assets/images/map1.png" alt="">
  </div>
</section>

Contact from Acros

Tailwind CSS

Acros

Contact Us Card Overlaid on Map

A contact section with a white rounded card on the left containing a 'Say Hello' heading, short body text, and address and contact info with teal icons, placed over a full-bleed city map with a red location pin on the right.

<section class="relative py-12">
  <img class="absolute top-0 left-0 h-full w-full object-cover" src="acros-assets/images/contacts/location.jpg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-sm sm:max-w-md p-10 bg-white rounded-md">
      <div>
        <span class="text-sm uppercase font-semibold">Contact Us</span>
        <h4 class="font-heading text-3xl sm:text-4xl mt-2 mb-4">Say Hello</h4>
        <p class="leading-7 mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
        <div class="flex flex-wrap -mx-2">
          <div class="w-full sm:w-1/2 px-2 mb-8 sm:mb-0">
            <div class="flex items-center justify-center w-14 h-14 mb-6 bg-green-50 rounded">
              <svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M8.94336 1.7393C4.70278 1.7249 1.25342 5.15089 1.23901 9.39148V9.41756C1.30918 11.4599 2.01436 13.4296 3.2564 15.0523C4.64995 16.9133 6.36008 18.5145 8.30858 19.7828C8.65807 20.0851 9.17648 20.0851 9.52597 19.7828C10.833 18.939 12.0381 17.9469 13.1173 16.8263C15.0042 14.835 16.5434 12.2871 16.5955 9.53061V9.44365C16.6099 5.20306 13.1839 1.75371 8.94336 1.7393ZM8.99988 13.0002C10.9329 13.0002 12.4999 11.4332 12.4999 9.50024C12.4999 7.56725 10.9329 6.00024 8.99988 6.00024C7.06688 6.00024 5.49988 7.56725 5.49988 9.50024C5.49988 11.4332 7.06688 13.0002 8.99988 13.0002Z" fill="#00CBA6"></path>
                <path d="M1.23901 9.39148L0.489014 9.38893V9.39148H1.23901ZM8.94336 1.7393L8.94081 2.4893L8.94336 1.7393ZM1.23901 9.41756H0.489014C0.489014 9.42615 0.489161 9.43473 0.489456 9.44332L1.23901 9.41756ZM3.2564 15.0523L3.85677 14.6028L3.85198 14.5965L3.2564 15.0523ZM8.30858 19.7828L8.79923 19.2155C8.77348 19.1933 8.74625 19.1728 8.71771 19.1542L8.30858 19.7828ZM9.52597 19.7828L9.11919 19.1527C9.0898 19.1717 9.06177 19.1927 9.03532 19.2155L9.52597 19.7828ZM13.1173 16.8263L13.6575 17.3465L13.6617 17.3421L13.1173 16.8263ZM16.5955 9.53061L17.3454 9.5448C17.3455 9.54007 17.3455 9.53534 17.3455 9.53061H16.5955ZM16.5955 9.44365L15.8455 9.4411V9.44365H16.5955ZM1.98901 9.39403C2.00201 5.56765 5.11444 2.4763 8.94081 2.4893L8.94591 0.989307C4.29111 0.973493 0.504833 4.73413 0.489018 9.38893L1.98901 9.39403ZM1.98901 9.41756V9.39148H0.489014V9.41756H1.98901ZM3.85198 14.5965C2.70474 13.0976 2.05338 11.2783 1.98857 9.39181L0.489456 9.44332C0.564977 11.6415 1.32399 13.7615 2.66083 15.5082L3.85198 14.5965ZM8.71771 19.1542C6.84296 17.9339 5.19755 16.3933 3.85674 14.6028L2.65607 15.5019C4.10235 17.4333 5.87721 19.0951 7.89945 20.4114L8.71771 19.1542ZM9.03532 19.2155C8.96754 19.2742 8.86701 19.2742 8.79923 19.2155L7.81792 20.35C8.44914 20.896 9.38541 20.896 10.0166 20.35L9.03532 19.2155ZM12.577 16.306C11.538 17.385 10.3777 18.3402 9.11919 19.1527L9.93275 20.4129C11.2884 19.5377 12.5383 18.5088 13.6575 17.3465L12.577 16.306ZM15.8457 9.51641C15.7985 12.0068 14.3986 14.3837 12.5729 16.3104L13.6617 17.3421C15.6099 15.2862 17.2882 12.5674 17.3454 9.5448L15.8457 9.51641ZM15.8455 9.44365V9.53061H17.3455V9.44365H15.8455ZM8.94081 2.4893C12.7672 2.5023 15.8585 5.61473 15.8455 9.4411L17.3455 9.4462C17.3613 4.7914 13.6007 1.00512 8.94591 0.989307L8.94081 2.4893ZM11.7499 9.50024C11.7499 11.019 10.5187 12.2502 8.99988 12.2502V13.7502C11.3471 13.7502 13.2499 11.8475 13.2499 9.50024H11.7499ZM8.99988 6.75024C10.5187 6.75024 11.7499 7.98146 11.7499 9.50024H13.2499C13.2499 7.15303 11.3471 5.25024 8.99988 5.25024V6.75024ZM6.24988 9.50024C6.24988 7.98146 7.48109 6.75024 8.99988 6.75024V5.25024C6.65267 5.25024 4.74988 7.15303 4.74988 9.50024H6.24988ZM8.99988 12.2502C7.48109 12.2502 6.24988 11.019 6.24988 9.50024H4.74988C4.74988 11.8475 6.65267 13.7502 8.99988 13.7502V12.2502Z" fill="#00CBA6"></path>
              </svg>
            </div>
            <h5 class="font-heading font-medium mb-2">Address</h5>
            <p class="text-sm leading-6">1686, Geraldine Lane</p>
            <p class="text-sm leading-6">New York, NY 10013</p>
          </div>
          <div class="w-full sm:w-1/2 px-2">
            <div class="flex items-center justify-center w-14 h-14 mb-6 bg-green-50 rounded">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.990332 2.87254C1.30665 2.34878 3.0495 0.443765 4.29322 0.501275C4.665 0.532084 4.99364 0.756989 5.26067 1.01784C5.87379 1.61656 7.62896 3.88101 7.72859 4.35753C7.97096 5.52621 6.57833 6.1999 7.00454 7.37783C8.09112 10.0366 9.96337 11.9088 12.6233 12.9943C13.8003 13.4205 14.474 12.0279 15.6428 12.2713C16.1183 12.3709 18.3839 14.126 18.9826 14.7391C19.2425 15.0051 19.4684 15.3347 19.4992 15.7065C19.5454 17.0159 17.5222 18.7833 17.1278 19.0092C16.1974 19.6747 14.9834 19.6634 13.5035 18.9753C9.37387 17.2572 2.77426 10.7822 1.02422 6.49669C0.354608 5.02505 0.308393 3.80296 0.990332 2.87254Z" fill="#00CBA6"></path>
              </svg>
            </div>
            <h5 class="font-heading font-medium mb-2">Contact info</h5>
            <p class="text-sm leading-6">hello@wireframes.org</p>
            <p class="text-sm leading-6">+7-843-672-431</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Contact from Bendis

Tailwind CSS

Bendis

Contact Call-to-Action Card Over Map

A white card overlaid on a blue header and a Google-style map of the San Francisco Bay Area, containing a bold heading encouraging quick action and address and contact email details in a two-column layout.

<section class="bg-blue-800 pt-24">
  <div class="relative container px-4 mx-auto z-10">
    <div class="p-12 md:p-20 bg-white">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-3/5 px-4 mb-6 lg:mb-0">
          <h2 class="text-4xl font-bold font-heading text-blue-800">Take quick action that increases your brand's regular profit.</h2>
        </div>
        <div class="w-full lg:w-2/5 px-4">
          <h3 class="uppercase text-blue-400 font-semibold leading-loose tracking-widest">Address</h3>
          <p class="mb-4 text-gray-500">1686 Geraldine Lane New York, NY 10013</p>
          <h3 class="uppercase text-blue-400 font-semibold leading-loose tracking-widest">Contacts</h3>
          <p class="text-gray-500">hello@wireframes.org</p>
        </div>
      </div>
    </div>
  </div>
  <div class="relative -mt-40">
    <img class="w-full h-80 lg:h-auto object-cover" src="bendis-assets/images/map1.png" alt="">
  </div>
</section>

Contact from Metis

Tailwind CSS

Metis

Split-Screen Contact Form with Office Details

A two-column contact section with a heading and phone, email, and address details on the left, and a form with department radio options, subject, name, email, message fields, a terms checkbox, and a blue Submit button on the right.

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-3">
      <div class="w-full lg:w-1/2 px-3">
        <div class="max-w-sm">
          <span class="text-sm text-blueGray-400">Contact Us</span>
          <h2 class="mt-2 text-4xl font-bold font-heading">We will be glad to hear from you!</h2>
        </div>
        <div class="mt-10 lg:mt-24">
          <div class="mb-10 leading-relaxed">
            <h3 class="text-sm text-blueGray-400">Phone</h3>
            <p>+ 48 654-430-309</p>
          </div>
          <div class="mb-10 leading-relaxed">
            <h4 class="text-sm text-blueGray-400">E-mail</h4>
            <p>info@metis.com</p>
          </div>
          <div class="mb-10 leading-relaxed">
            <h4 class="text-sm text-blueGray-400">Address</h4>
            <p>11567 E Broadview Dr</p>
            <p>Kiowa, Colorado(CO), 80117</p>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-3">
        <form>
          <div class="mb-4 text-sm">
            <span class="mr-4 font-semibold">Departament:</span>
            <label class="mr-4">
              <input class="mr-1" type="radio" name="department" value="1" checked="">
              <span>Support</span>
            </label>
            <label>
              <input class="mr-1" type="radio" name="department" value="2">
              <span>Sales</span>
            </label>
          </div>
          <div class="mb-4">
            <input class="w-full p-4 text-xs font-semibold leading-none bg-blueGray-50 rounded outline-none" type="text" placeholder="Subject">
          </div>
          <div class="mb-4">
            <input class="w-full p-4 text-xs font-semibold leading-none bg-blueGray-50 rounded outline-none" type="text" placeholder="Name">
          </div>
          <div class="mb-4">
            <input class="w-full p-4 text-xs font-semibold leading-none bg-blueGray-50 rounded outline-none" type="email" placeholder="name@example.com">
          </div>
          <div class="mb-4"><textarea class="w-full h-24 p-4 text-xs font-semibold leading-none resize-none bg-blueGray-50 rounded outline-none" type="text" placeholder="Message..."></textarea></div>
          <div class="mb-4">
            <label class="flex px-2 bg-blueGray-50 rounded">
              <input class="hidden" type="file" placeholder="Choose file.." name="Choose file">
              <div class="my-1 ml-auto px-4 py-3 text-xs text-white font-semibold leading-none bg-blueGray-500 hover:bg-blueGray-600 rounded cursor-pointer">Browse</div>
            </label>
          </div>
          <div class="flex justify-between items-center">
            <label>
              <input class="mr-1" type="checkbox" name="terms" value="1">
              <span class="text-sm font-semibold">I agree to terms and conditions.</span>
            </label>
            <button class="py-4 px-8 text-sm text-white font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" type="submit">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

A clear contact path is a key component of a successful website. The contact form or address data should be clearly highlighted on it.

Choose from many variations of the Tailwind components contacts. The variants shown here are available in various UI libraries in the Shuffle editor. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Tailwind website template. Each library is designed by a professional designer and coded by our team of developers.

Get access to all sections of the Tailwind components contacts, code and our editor. Try the demo for free.

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Contact Components

Framework

UI Library

Components

Contact from Saturn

Support Contact Options with Two Cards and Orange CTAs

Contact from DarkPro

Dark Contact Section with Heading, Address, and Embedded Map

Contact from Flaro

Get Connected Contact Info Card Grid

Your next website starts here

Contact from Gradia

Dark Contact Section with Email and Social Links

Contact from Solstice

Contact Support Split-Screen Form with Incident Report Panel

Contact from Basko

Split-Screen Testimonial and Trial Signup Form

Contact from Zanrly

Contact Us Section with Three Contact Info Cards

Contact from Nightsable

Dark Branding Agency Contact Form with Heading and Lime Submit Button

Contact from Zeus

Contact Section with Heading, Address, and Map

Contact from Zospace

Dark contact section with map, photo card, and contact details

Contact from Wrexa

Contact Section with Heading, Hours, Social Links, and Photo

Contact from Flex

Three-Column Contact Information Section with Green Icons

Contact from Uinel

Contact Us Hero with Video Call Preview

Contact from Nigodo

Three-Column Contact Info Cards with Icons

Contact from Atis

Purple Contact Section with Office Details and Inquiry Form

Contact from Pstls.

Contact section with contact details and message form

Contact from BoldUI

Dark Contact Section with Address and Map Background

Contact from Acros

Contact Us Card Overlaid on Map

Contact from Bendis

Contact Call-to-Action Card Over Map

Contact from Metis

Split-Screen Contact Form with Office Details

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support