Tailwind Contact Components (227)

Contact from Shuffle UX

Contact Section with Heading, Address, and Map Preview

A split contact section with a large bold heading on the left and address and email contact details on the right, followed by a full-width light gray map of the San Francisco Bay Area below. It uses a minimal, light layout to present location and contact information.

<section class="pt-20">
  <div class="container px-4 mx-auto 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-4xl lg:text-5xl font-bold font-heading">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-bold font-heading">Address</h3>
        <p class="mb-4 lg:mb-8 text-lg text-gray-500">1686 Geraldine Lane New York, NY 10013</p>
        <h3 class="mb-1 text-2xl font-bold font-heading">Contacts</h3>
        <p class="text-lg text-gray-500">hello@wireframes.org</p>
      </div>
    </div>
  </div>
  <div>
    <img class="w-full h-112 object-cover" src="mockup-assets/images/map.png" alt="">
  </div>
</section>

Contact from Cronos

Tailwind CSS

Cronos

Contact Section with Address, Email, and Embedded Map

A light-background contact section with a large bold heading on the left and address and contact details on the right, above a full-width embedded map of New York City. Decorative yellow and dark green blocks frame the map edges.

<section class="pt-20 pb-20 lg:pb-32">
    <div class="container mx-auto px-4 mb-16 lg:mb-32">
        <div class="flex flex-wrap items-center -m-4">
            <div class="w-full lg:w-1/2 p-4">
                <h1 class="font-heading text-4xl lg:text-5xl font-bold">Lorem ipsum dolor sit amet consectutar</h1>
            </div>
            <div class="w-full lg:w-1/2 p-4">
                <div class="lg:max-w-md lg:ml-auto">
                    <p class="text-xl font-bold mb-1">Address</p>
                    <p class="text-gray-600 mb-6">1686  Geraldine Lane New York, NY 10013</p>
                    <p class="text-xl font-bold mb-1">Contacts</p>
                    <p class="text-gray-600">hello@cronos.org.com</p>
                </div>
            </div>
        </div>
    </div>
    <div class="relative">
        <img class="absolute hidden lg:block top-0 right-0 -mt-20" src="cronos-assets/elements/warning-light-small.svg" alt="">
        <img class="absolute hidden lg:block left-0 bottom-0 -mb-20" src="cronos-assets/elements/green-light-left.svg" alt="">
        <img class="w-full object-cover" style="height: 448px;" src="cronos-assets/images/maps/map.png" alt="">
    </div>
</section>

Contact from NEUB

Tailwind CSS

NEUB

Contact Section with Address Card and Map

A contact section with a bold two-line heading, a yellow outlined card listing address and email, and a wide map banner below with decorative yellow and pink offset squares. The layout places the heading on the left and the contact card on the right above a full-width map.

<section class="pb-8 pt-8 md:pt-12 lg:pt-20">
  <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/3 xl:w-1/2 px-4 mb-8 lg:mb-0">
        <div class="max-w-lg">
          <div class="mb-8 inline-block px-4 py-2 bg-black text-white font-bold text-sm tracking-wider uppercase">
            CONTACT SECTION
          </div>
          <h2 class="text-5xl sm:text-6xl md:text-7xl font-black font-heading leading-[0.9] tracking-tight uppercase">
            GET IN<br>
            <span class="text-pink-500">TOUCH</span><br>
            WITH US
          </h2>
        </div>
      </div>
      <div class="w-full lg:w-2/3 xl:w-1/2 px-4">
        <div class="lg:max-w-xl lg:ml-auto flex flex-wrap bg-yellow-300 border-4 border-black p-8 shadow-[8px_8px_0px_0px_#000000]">
          <div class="w-full md:w-1/2">
            <h3 class="mb-4 text-2xl text-pink-500 font-black font-heading tracking-wider">ADDRESS</h3>
            <p class="mb-8 text-xl font-medium text-gray-800">1686 Geraldine Lane<br>New
              York, NY 10013</p>
          </div>
          <div class="w-full md:w-1/2">
            <h3 class="mb-4 text-2xl text-pink-500 font-black font-heading tracking-wider">CONTACTS
            </h3>
            <p class="text-xl font-medium text-gray-800">hello@shuffle.dev</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="relative mx-5">
    <div class="absolute inset-0 bg-pink-500 translate-x-4 translate-y-4 border-4 border-black"></div>
    <img class="relative w-full h-96 object-cover border-4 border-black" src="neub-assets/images/map.png" alt="">
    <div class="absolute -bottom-2 -right-2 w-24 h-24 bg-yellow-300 border-4 border-black"></div>
    <div class="absolute -top-4 -left-4 w-16 h-16 bg-yellow-300 border-4 border-black"></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 Casper

Tailwind CSS

Casper

Dark Contact Form with Gradient Contact Info Card

A two-column contact section with a dark background, featuring a form for name, email, and message with a privacy checkbox and purple submit button on the left, and a gradient card with phone and email contact details on the right.

<section class="relative py-12 md:py-24 lg:py-32 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
        <div class="relative z-10 max-w-lg lg:max-w-md mx-auto lg:mx-0">
          <span class="block text-sm font-medium text-sky-900 mb-4">CONTACT US</span>
          <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl xl:text-7xl font-medium text-white tracking-tight mb-16">Get in touch!</h2>
          <form action="">
            <label class="block mb-1 text-sm font-medium text-white" for="">Name</label>
            <input class="block w-full h-12 py-2 px-4 mb-5 text-sm placeholder-gray-600 text-gray-200 border border-gray-700 rounded-lg bg-gray-800 outline-none focus:border-violet-600" type="text" placeholder="Enter your name">
            <label class="block mb-1 text-sm font-medium text-white" for="">Email</label>
            <input class="block w-full h-12 py-2 px-4 mb-5 text-sm placeholder-gray-600 text-gray-200 border border-gray-700 rounded-lg bg-gray-800 outline-none focus:border-violet-600" type="email" placeholder="pat@saturn.dev">
            <label class="block mb-1 text-sm font-medium text-white" for="">Message</label>
            <textarea class="w-full h-24 py-2 px-4 mb-5 text-sm placeholder-gray-600 text-gray-200 border border-gray-700 rounded-lg bg-gray-800 outline-none focus:border-violet-600 resize-none" name="" id="" placeholder="Enter your message" cols="30" rows="10"></textarea>
            <div class="mb-5">
              <label class="custom-checkbox flex items-center relative h-8 cursor-pointer">
                <p class="inline-block ml-6 text-sm text-gray-400">
                  <span>I agree with</span>
                  <a class="inline-block text-sky-900 hover:text-violet-500" href="#">Privacy Policy</a>
                  <span>and</span>
                  <a class="inline-block text-sky-900 hover:text-violet-500" href="#">Terms of Conditions</a>
                </p>
                <input class="absolute top-0 left-0 transform translate-y-1/2 w-4 h-4 opacity-0" type="checkbox" checked="">
                <span class="custom-check absolute top-0 left-0 transform translate-y-1/2 flex h-4 w-4 items-center justify-center bg-violet-400 border border-violet-700 rounded">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.4733 4.80667C12.4114 4.74418 12.3376 4.69458 12.2564 4.66074C12.1752 4.62689 12.088 4.60947 12 4.60947C11.912 4.60947 11.8249 4.62689 11.7436 4.66074C11.6624 4.69458 11.5886 4.74418 11.5267 4.80667L6.56001 9.78L4.47334 7.68667C4.40899 7.62451 4.33303 7.57563 4.2498 7.54283C4.16656 7.51003 4.07768 7.49394 3.98822 7.49549C3.89877 7.49703 3.8105 7.51619 3.72844 7.55185C3.64639 7.58751 3.57217 7.63898 3.51001 7.70333C3.44785 7.76768 3.39897 7.84364 3.36617 7.92688C3.33337 8.01011 3.31728 8.099 3.31883 8.18845C3.32038 8.2779 3.33953 8.36618 3.37519 8.44823C3.41085 8.53028 3.46233 8.60451 3.52667 8.66667L6.08667 11.2267C6.14865 11.2892 6.22238 11.3387 6.30362 11.3726C6.38486 11.4064 6.472 11.4239 6.56001 11.4239C6.64802 11.4239 6.73515 11.4064 6.81639 11.3726C6.89763 11.3387 6.97137 11.2892 7.03334 11.2267L12.4733 5.78667C12.541 5.72424 12.595 5.64847 12.632 5.56414C12.6689 5.4798 12.688 5.38873 12.688 5.29667C12.688 5.2046 12.6689 5.11353 12.632 5.02919C12.595 4.94486 12.541 4.86909 12.4733 4.80667Z" fill="currentColor"></path>
                  </svg>
                </span>
              </label>
            </div>
            <button class="group inline-flex w-full h-14 px-7 items-center justify-center text-base font-medium text-black hover:text-violet-800 bg-violet-500 hover:bg-white transition duration-200 rounded-full" type="submit">
              <span class="mr-2">SUBMIT</span>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="currentColor"></path>
              </svg>
            </button>
          </form>
        </div>
      </div>
      <div class="relative w-full lg:w-1/2 px-4">
        <div class="absolute top-0 left-0 -mt-112 ml-40 w-186 h-186 bg-gradient-to-t from-blue-500 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
        <div class="absolute top-0 left-0 -mt-112 -ml-72 w-186 h-186 bg-gradient-to-t from-purple-600 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
        <div class="relative max-w-lg mx-auto lg:mr-0 pt-12 px-12 pb-14 rounded-3xl overflow-hidden">
          <img class="absolute top-0 left-0 w-full h-full" src="casper-assets/contact/bg-gradient.png" alt="">
          <div class="relative">
            <h3 class="text-5xl font-semibold mb-3">Let’s stay connected</h3>
            <span class="block text-xl text-gray-900 tracking-tight mb-20 sm:mb-36">We’re 24/7 ready to help you at anytime</span>
            <div class="flex mb-12 items-center">
              <div class="flex-shrink-0 flex mr-4 items-center justify-center w-12 sm:w-20 h-12 sm:h-20 rounded-full bg-white">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M25.92 17.3333C25.6267 17.3333 25.32 17.24 25.0267 17.1733C24.4326 17.0424 23.8489 16.8686 23.28 16.6533C22.6614 16.4283 21.9815 16.44 21.3711 16.6861C20.7606 16.9323 20.2628 17.3955 19.9733 17.9867L19.68 18.5867C18.3813 17.8642 17.188 16.967 16.1333 15.92C15.0864 14.8654 14.1891 13.672 13.4667 12.3733L14.0267 12C14.6178 11.7106 15.081 11.2127 15.3272 10.6023C15.5733 9.9918 15.585 9.31188 15.36 8.69333C15.1483 8.12323 14.9746 7.53973 14.84 6.94667C14.7733 6.65333 14.72 6.34667 14.68 6.04C14.5181 5.10083 14.0262 4.25032 13.2928 3.64165C12.5595 3.03298 11.6329 2.70615 10.68 2.72H6.68C6.10537 2.71461 5.53633 2.83309 5.01161 3.06737C4.48689 3.30166 4.01881 3.64626 3.63924 4.07771C3.25966 4.50916 2.97751 5.01733 2.81198 5.56762C2.64645 6.11791 2.60144 6.69741 2.68 7.26667C3.39031 12.8525 5.94137 18.0425 9.9302 22.0168C13.919 25.9912 19.1183 28.5233 24.7067 29.2133H25.2133C26.1966 29.2148 27.1459 28.854 27.88 28.2C28.3018 27.8227 28.6388 27.3602 28.8686 26.8431C29.0985 26.3259 29.216 25.7659 29.2133 25.2V21.2C29.197 20.2738 28.8597 19.3821 28.2591 18.6769C27.6585 17.9717 26.8318 17.4968 25.92 17.3333ZM26.5867 25.3333C26.5864 25.5226 26.5459 25.7097 26.4677 25.8822C26.3895 26.0546 26.2756 26.2084 26.1333 26.3333C25.9872 26.4665 25.8133 26.5655 25.6242 26.6231C25.4351 26.6808 25.2356 26.6956 25.04 26.6667C20.0465 26.0264 15.4083 23.742 11.857 20.1737C8.30559 16.6055 6.04321 11.9565 5.42666 6.96C5.40544 6.76469 5.42404 6.56711 5.48133 6.37919C5.53863 6.19127 5.63342 6.01692 5.76 5.86667C5.88494 5.72444 6.03875 5.61046 6.21117 5.53229C6.38359 5.45413 6.57068 5.41357 6.76 5.41333H10.76C11.0701 5.40644 11.3728 5.50784 11.6162 5.7001C11.8595 5.89235 12.0283 6.16343 12.0933 6.46667C12.1467 6.83111 12.2133 7.19111 12.2933 7.54667C12.4474 8.24953 12.6523 8.94024 12.9067 9.61333L11.04 10.48C10.8804 10.5532 10.7368 10.6573 10.6175 10.7861C10.4983 10.915 10.4056 11.0662 10.3449 11.2309C10.2842 11.3957 10.2566 11.5708 10.2638 11.7463C10.271 11.9218 10.3127 12.0941 10.3867 12.2533C12.3056 16.3637 15.6097 19.6677 19.72 21.5867C20.0446 21.72 20.4087 21.72 20.7333 21.5867C20.8996 21.5272 21.0524 21.4353 21.1829 21.3162C21.3134 21.1972 21.4189 21.0535 21.4933 20.8933L22.32 19.0267C23.0093 19.2732 23.7128 19.478 24.4267 19.64C24.7822 19.72 25.1422 19.7867 25.5067 19.84C25.8099 19.9051 26.081 20.0738 26.2732 20.3171C26.4655 20.5605 26.5669 20.8633 26.56 21.1733L26.5867 25.3333ZM25.3333 13.3333C25.687 13.3333 26.0261 13.1929 26.2761 12.9428C26.5262 12.6928 26.6667 12.3536 26.6667 12V6.66667C26.6667 6.31305 26.5262 5.97391 26.2761 5.72386C26.0261 5.47381 25.687 5.33333 25.3333 5.33333C24.9797 5.33333 24.6406 5.47381 24.3905 5.72386C24.1405 5.97391 24 6.31305 24 6.66667V12C24 12.3536 24.1405 12.6928 24.3905 12.9428C24.6406 13.1929 24.9797 13.3333 25.3333 13.3333ZM20 13.3333C20.3536 13.3333 20.6928 13.1929 20.9428 12.9428C21.1929 12.6928 21.3333 12.3536 21.3333 12V6.66667C21.3333 6.31305 21.1929 5.97391 20.9428 5.72386C20.6928 5.47381 20.3536 5.33333 20 5.33333C19.6464 5.33333 19.3072 5.47381 19.0572 5.72386C18.8071 5.97391 18.6667 6.31305 18.6667 6.66667V12C18.6667 12.3536 18.8071 12.6928 19.0572 12.9428C19.3072 13.1929 19.6464 13.3333 20 13.3333Z" fill="black"></path>
                </svg>
              </div>
              <div>
                <span class="block text-lg tracking-tight text-gray-700">Phone</span>
                <span class="sm:text-2xl">+1 892 3298</span>
              </div>
            </div>
            <div class="flex items-center">
              <div class="flex-shrink-0 flex mr-4 items-center justify-center w-12 sm:w-20 h-12 sm:h-20 rounded-full bg-white">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.6667 15.3467H21.8933C22.0688 15.3477 22.2428 15.314 22.4052 15.2477C22.5677 15.1813 22.7154 15.0836 22.84 14.96L28.9467 8.85333C29.0716 8.72938 29.1708 8.58191 29.2385 8.41943C29.3062 8.25695 29.3411 8.08267 29.3411 7.90666C29.3411 7.73064 29.3062 7.55637 29.2385 7.39389C29.1708 7.23141 29.0716 7.08394 28.9467 6.95999L25.72 3.73333C25.5961 3.60835 25.4486 3.50916 25.2861 3.44147C25.1236 3.37378 24.9494 3.33893 24.7733 3.33893C24.5973 3.33893 24.423 3.37378 24.2606 3.44147C24.0981 3.50916 23.9506 3.60835 23.8267 3.73333L17.72 9.83999C17.4764 10.0955 17.3383 10.4336 17.3333 10.7867V14.0133C17.3333 14.3669 17.4738 14.7061 17.7239 14.9561C17.9739 15.2062 18.3131 15.3467 18.6667 15.3467ZM20 11.3467L24.7733 6.57333L26.1067 7.90666L21.3333 12.68H20V11.3467ZM28 14.0133C27.6464 14.0133 27.3072 14.1538 27.0572 14.4038C26.8071 14.6539 26.6667 14.993 26.6667 15.3467V24.68C26.6667 25.0336 26.5262 25.3728 26.2761 25.6228C26.0261 25.8728 25.687 26.0133 25.3333 26.0133H6.66667C6.31305 26.0133 5.97391 25.8728 5.72386 25.6228C5.47381 25.3728 5.33334 25.0336 5.33334 24.68V11.8667L13.1733 19.72C13.5454 20.0969 13.9887 20.3962 14.4773 20.6005C14.966 20.8047 15.4904 20.9099 16.02 20.9099C16.5496 20.9099 17.074 20.8047 17.5627 20.6005C18.0514 20.3962 18.4946 20.0969 18.8667 19.72C19.111 19.4708 19.2478 19.1357 19.2478 18.7867C19.2478 18.4377 19.111 18.1026 18.8667 17.8533C18.7425 17.7263 18.5942 17.6254 18.4305 17.5565C18.2668 17.4876 18.091 17.4522 17.9133 17.4522C17.7357 17.4522 17.5599 17.4876 17.3962 17.5565C17.2325 17.6254 17.0842 17.7263 16.96 17.8533C16.7108 18.0976 16.3757 18.2345 16.0267 18.2345C15.6777 18.2345 15.3426 18.0976 15.0933 17.8533L7.21334 9.98666H13.3333C13.687 9.98666 14.0261 9.84618 14.2761 9.59614C14.5262 9.34609 14.6667 9.00695 14.6667 8.65333C14.6667 8.2997 14.5262 7.96057 14.2761 7.71052C14.0261 7.46047 13.687 7.31999 13.3333 7.31999H6.66667C5.60581 7.31999 4.58839 7.74142 3.83824 8.49157C3.0881 9.24171 2.66667 10.2591 2.66667 11.32V24.6533C2.66667 25.7142 3.0881 26.7316 3.83824 27.4818C4.58839 28.2319 5.60581 28.6533 6.66667 28.6533H25.3333C26.3942 28.6533 27.4116 28.2319 28.1618 27.4818C28.9119 26.7316 29.3333 25.7142 29.3333 24.6533V15.32C29.3333 14.9664 29.1929 14.6272 28.9428 14.3772C28.6928 14.1271 28.3536 13.9867 28 13.9867V14.0133Z" fill="black"></path>
                </svg>
              </div>
              <div>
                <span class="block text-lg tracking-tight text-gray-700">Email</span>
                <span class="sm:text-2xl">hello@yourdomain.com</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Contact from Mirga

Tailwind CSS

Mirga

Contact us section with office address, contact details, and live chat cards

A dark-background contact section headed by 'Contact us' and a question prompt, followed by a white office address card with a Maps button and two lower cards: one listing phone, email, social icons, and FAQ/Helpdesk buttons, and one offering a live chat with an avatar and Open Chat button.

<section class="py-12 md:py-24 bg-neutral-900">
  <div class="container mx-auto px-4">
    <h2 class="flex flex-wrap mb-2 pb-14 text-6xl sm:text-9xl xl:text-11xl text-white font-semibold border-b border-neutral-600 font-heading">
      <span class="mr-4">Contact us</span>
      <svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M22.1104 0H7.89656C3.53541 0 0 3.54358 0 7.9148V22.1614C0 26.5327 3.53541 30.0763 7.89656 30.0763H22.1104C26.4715 30.0763 30.0069 26.5327 30.0069 22.1614V7.9148C30.0069 3.54358 26.4715 0 22.1104 0Z" fill="#FEE34E"></path>
        <path d="M15.3529 7.38071C14.3388 6.36424 12.6946 6.36424 11.6805 7.38071C10.6663 8.39718 10.6663 10.0452 11.6805 11.0617L15.812 15.2028C16.8261 16.2192 18.4704 16.2192 19.4845 15.2028C20.4986 14.1863 20.4986 12.5383 19.4845 11.5218L15.3529 7.38071Z" fill="#19191B"></path>
        <path d="M13.4047 14.3978C12.3906 13.3813 10.7464 13.3813 9.73223 14.3978C8.71811 15.4143 8.71811 17.0623 9.73223 18.0788L13.8638 22.2199C14.8779 23.2363 16.5221 23.2363 17.5362 22.2199C18.5504 21.2034 18.5504 19.5554 17.5362 18.5389L13.4047 14.3978Z" fill="#19191B"></path>
      </svg>
    </h2>
    <h4 class="mb-8 text-4xl text-white font-semibold tracking-tight font-heading">Do you have any question?</h4>
    <div class="flex flex-wrap -m-2">
      <div class="w-full p-2">
        <div class="h-full py-10 px-12 bg-white rounded-4xl">
          <div class="flex flex-wrap justify-between items-center -m-4">
            <div class="w-auto p-4">
              <h4 class="text-4xl font-medium tracking-tight font-heading">Office in Chester, UK</h4>
            </div>
            <div class="w-auto p-4">
              <div class="flex flex-wrap items-center justify-between -m-5">
                <div class="w-auto p-5">
                  <p class="text-xl text-neutral-600 font-semibold tracking-tight">Anfield Rd 88, M11349, Chester, United Kingdom</p>
                </div>
                <div class="w-auto p-5"><a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-lg text-white bg-neutral-900 hover:bg-neutral-800 focus:bg-neutral-800 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">Maps</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-2/3 p-2">
        <div class="h-full p-10 bg-white rounded-4xl">
          <div class="flex flex-col justify-between h-full">
            <div class="w-full">
              <div class="max-w-lg">
                <h4 class="mb-2 text-4xl font-medium tracking-tight font-heading">Contact</h4>
                <p class="mb-12 text-lg text-neutral-600 font-medium tracking-tight">Can create, connect, verify, and search across all you knowledge platforms is one centralized.</p>
              </div>
              <ul class="mb-10">
                <li class="mb-6 flex">
                  <div class="flex items-center justify-center w-6 h-6 mr-4">
                    <svg width="16" height="24" viewBox="0 0 16 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11 24H5C2.243 24 0 21.757 0 19V5C0 2.243 2.243 0 5 0H11C13.757 0 16 2.243 16 5V19C16 21.757 13.757 24 11 24ZM5 2C3.346 2 2 3.346 2 5V19C2 20.654 3.346 22 5 22H11C12.654 22 14 20.654 14 19V5C14 3.346 12.654 2 11 2H5ZM10 19C10 18.448 9.552 18 9 18H7C6.448 18 6 18.448 6 19C6 19.552 6.448 20 7 20H9C9.552 20 10 19.552 10 19Z" fill="#19191B"></path>
                    </svg>
                  </div>
                  <span class="text-xl font-medium tracking-tight">+41 3372 003 00</span>
                </li>
                <li class="flex">
                  <div class="flex items-center justify-center w-6 h-6 mr-4">
                    <svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M19 0H5C3.67441 0.00158786 2.40356 0.528882 1.46622 1.46622C0.528882 2.40356 0.00158786 3.67441 0 5L0 17C0.00158786 18.3256 0.528882 19.5964 1.46622 20.5338C2.40356 21.4711 3.67441 21.9984 5 22H19C20.3256 21.9984 21.5964 21.4711 22.5338 20.5338C23.4711 19.5964 23.9984 18.3256 24 17V5C23.9984 3.67441 23.4711 2.40356 22.5338 1.46622C21.5964 0.528882 20.3256 0.00158786 19 0ZM5 2H19C19.5988 2.00118 20.1835 2.18151 20.679 2.5178C21.1744 2.85409 21.5579 3.33095 21.78 3.887L14.122 11.546C13.5584 12.1073 12.7954 12.4225 12 12.4225C11.2046 12.4225 10.4416 12.1073 9.878 11.546L2.22 3.887C2.44215 3.33095 2.82561 2.85409 3.32105 2.5178C3.81648 2.18151 4.40121 2.00118 5 2ZM19 20H5C4.20435 20 3.44129 19.6839 2.87868 19.1213C2.31607 18.5587 2 17.7956 2 17V6.5L8.464 12.96C9.40263 13.8963 10.6743 14.422 12 14.422C13.3257 14.422 14.5974 13.8963 15.536 12.96L22 6.5V17C22 17.7956 21.6839 18.5587 21.1213 19.1213C20.5587 19.6839 19.7956 20 19 20Z" fill="#19191B"></path>
                    </svg>
                  </div>
                  <span class="text-xl font-medium tracking-tight">contactcontact@email.com</span>
                </li>
              </ul>
              <ul class="flex flex-wrap -m-1.5 mb-16">
                <li class="p-1.5">
                  <a class="flex items-center justify-center w-12 h-12 bg-neutral-50 hover:bg-opacity-80 rounded-full transition duration-200" href="#">
                    <img class="h-5" src="mirga-assets/images/contact/fb.svg" alt="">
                  </a>
                </li>
                <li class="p-1.5">
                  <a class="flex items-center justify-center w-12 h-12 bg-neutral-50 hover:bg-opacity-80 rounded-full transition duration-200" href="#">
                    <img class="h-5" src="mirga-assets/images/contact/instagram.svg" alt="">
                  </a>
                </li>
                <li class="p-1.5">
                  <a class="flex items-center justify-center w-12 h-12 bg-neutral-50 hover:bg-opacity-80 rounded-full transition duration-200" href="#">
                    <img class="h-5" src="mirga-assets/images/contact/x.svg" alt="">
                  </a>
                </li>
              </ul>
            </div>
            <div class="w-full">
              <div class="flex flex-wrap -m-1.5">
                <div class="w-auto p-1.5"><a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">FAQs</a></div>
                <div class="w-auto p-1.5"><a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">Helpdesk</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:flex-1 p-2">
        <div class="h-full p-10 bg-white rounded-4xl">
          <div class="flex flex-col justify-between h-full">
            <div class="mb-8 w-full">
              <h4 class="mb-2 text-4xl font-medium tracking-tight font-heading">Live chat</h4>
              <p class="mb-8 text-lg text-neutral-600 font-medium tracking-tight">Chat with Jesse for expert help!</p>
              <img class="mx-auto h-56 object-cover" src="mirga-assets/images/contact/woman.png" alt="">
            </div>
            <div class="w-full"><a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">Open Chat</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Contact from Flow

Tailwind CSS

Flow

Contact Us Split-Screen Form Section

A contact section with a heading, short intro text, and email and phone links on the left, paired with a white rounded form card on the right containing Full Name, Email, Company (optional), and Service select fields plus a dark green Submit button. The layout is a two-column split screen on a light green gradient background.

<section class="py-12 lg:py-24 relative overflow-hidden">
        <img class="absolute top-0 left-0 w-full h-full" src="flow-assets/contact/waves-bg-lime.png" alt="">
        <div class="container mx-auto px-4 relative">
            <div class="max-w-lg mx-auto lg:max-w-none">
                <div class="flex flex-wrap -mx-4 mb-16">
                    <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
                        <h1 class="font-heading text-4xl sm:text-6xl md:text-7xl tracking-sm mb-6">Contact us</h1>
                        <p class="text-lg text-gray-700 mb-16 ">We are here to help you make a first move to greener choice. </p>
                        <div class="flex mb-4 items-center">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4 4H16C16.825 4 17.5 4.675 17.5 5.5V14.5C17.5 15.325 16.825 16 16 16H4C3.175 16 2.5 15.325 2.5 14.5V5.5C2.5 4.675 3.175 4 4 4Z" stroke="#022C22" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M17.5 5.5L10 10.75L2.5 5.5" stroke="#022C22" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>                            
                            <span class="ml-2 font-medium">hello@example.com</span>
                        </div>
                        <div class="flex items-center">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M17.5001 13.69V15.94C17.5009 16.1489 17.4581 16.3556 17.3745 16.547C17.2908 16.7384 17.168 16.9102 17.0141 17.0514C16.8602 17.1926 16.6785 17.3001 16.4806 17.367C16.2828 17.4339 16.0731 17.4588 15.8651 17.44C13.5572 17.1892 11.3403 16.4006 9.39257 15.1375C7.58044 13.986 6.04407 12.4496 4.89257 10.6375C3.62506 8.68088 2.83625 6.45323 2.59007 4.13498C2.57133 3.92758 2.59598 3.71855 2.66245 3.5212C2.72892 3.32385 2.83575 3.1425 2.97615 2.9887C3.11654 2.8349 3.28743 2.71201 3.47792 2.62787C3.6684 2.54373 3.87433 2.50018 4.08257 2.49998H6.33257C6.69655 2.4964 7.04942 2.62529 7.32539 2.86263C7.60137 3.09997 7.78163 3.42957 7.83257 3.78998C7.92754 4.51003 8.10366 5.21703 8.35757 5.89748C8.45848 6.16592 8.48032 6.45767 8.4205 6.73814C8.36069 7.01862 8.22172 7.27606 8.02007 7.47998L7.06757 8.43248C8.13524 10.3101 9.68991 11.8648 11.5676 12.9325L12.5201 11.98C12.724 11.7783 12.9814 11.6394 13.2619 11.5796C13.5424 11.5197 13.8341 11.5416 14.1026 11.6425C14.783 11.8964 15.49 12.0725 16.2101 12.1675C16.5744 12.2189 16.9071 12.4024 17.145 12.6831C17.3828 12.9638 17.5092 13.3222 17.5001 13.69Z" stroke="#022C22" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>                                                     
                            <span class="ml-2 font-medium">(239) 555-0108</span>
                        </div>
                    </div>
                    <div class="w-full lg:w-1/2 px-4">
                        <div class="relative max-w-lg lg:ml-auto p-8 bg-white rounded-2xl shadow-md overflow-hidden">
                            <div class="absolute top-0 left-0 w-full pt-1 bg-lime-500"></div>
                            <div>
                                <h4 class="text-2xl font-medium mb-8">Fill out the form</h4>
                                <form action="">
                                    <label for="" class="block pl-4 mb-1 text-sm font-medium">Full Name</label>
                                    <input type="text" class="w-full px-4 py-3 mb-6 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full">
                                    <label for="" class="block pl-4 mb-1 text-sm font-medium">Email</label>
                                    <input type="text" class="w-full px-4 py-3 mb-6 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full">
                                    <label for="" class="block pl-4 mb-1 text-sm font-medium">
                                        <span>Company</span> 
                                        <span class="text-gray-700">(optional)</span>
                                    </label>
                                    <input type="text" class="w-full px-4 py-3 mb-6 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full">
                                    <label for="" class="block pl-4 mb-1 text-sm font-medium">Service</label>
                                    <div class="relative w-full mb-8 bg-white rounded-full">
                                        <span class="absolute top-1/2 right-0 mr-4 transform -translate-y-1/2">
                                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M6.3999 8.2L9.9999 11.8L13.5999 8.2" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                            </svg>  
                                        </span>    
                                        <select name="" id="" class="w-full px-4 py-3 text-gray-600 border rounded-full appearance-none cursor-pointer outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 bg-transparent relative">
                                            <option value="1">Select service</option>
                                            <option value="2">Sales</option>
                                            <option value="3">Marketing</option>
                                        </select>
                                    </div>
                                    <button class="flex w-full py-3 px-5 items-center justify-center font-medium text-white hover:text-teal-900 border border-teal-900 hover:border-lime-500 bg-teal-900 hover:bg-lime-500 rounded-full transition duration-200">
                                        <span class="mr-2">Submit</span>
                                        <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M5.25 10H15.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                            <path d="M10.5 4.75L15.75 10L10.5 15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg>                                        
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Contact from Vista

Tailwind CSS

Vista

Dark Contact Us Form with Heading and Pink Send Button

A centered contact section with a bold heading, introductory paragraph, and a rounded contact form containing Name, Email, and Message fields with required markers and a pink Send Message button. The dark background and nested bordered card give the form a focused, minimal presentation.

<section class="bg-darkPink-900 pt-24 pb-32">
    <div class="container mx-auto px-4">
        <h1 class="font-heading text-white text-center text-4xl md:text-6xl font-bold mb-6">Contact Us</h1>
        <p class="text-white text-opacity-70 text-center text-lg mb-20 max-w-2xl mx-auto">Our team is here to help you access capital and grow on your terms. Check out the resources below and reach out directly if you have any questions.</p>
        <div class="rounded-2xl border border-white border-opacity-20 p-3 bg-white bg-opacity-10 max-w-xl mx-auto">
            <div class="rounded-2xl bg-darkPink-900 w-full p-8">
                <form action="">
                    <label for="name" class="block text-sm mb-2 text-white font-medium">
                        <span>Name</span>
                        <span class="text-pink-500">*</span>
                    </label>
                    <input type="text" id="name" class="px-4 py-3 mb-8 rounded-full border border-white border-opacity-10 bg-white bg-opacity-5 text-sm placeholder-white placeholder-opacity-50 text-white focus:border-white focus:border focus:border-opacity-50 transition duration-200 outline-none w-full" placeholder="Name">
                    <label for="email" class="block text-sm mb-2 text-white font-medium">
                        <span>Email</span>
                        <span class="text-pink-500">*</span>
                    </label>
                    <input type="email" id="email" class="px-4 py-3 mb-8 rounded-full border border-white border-opacity-10 bg-white bg-opacity-5 text-sm placeholder-white placeholder-opacity-50 text-white focus:border-white focus:border focus:border-opacity-50 transition duration-200 outline-none w-full" placeholder="Email address">
                    <label for="message" class="block text-sm mb-2 text-white font-medium">Message</label>
                    <textarea id="message" rows="5" class="px-4 py-3 mb-8 rounded-2xl resize-none border border-white border-opacity-10 bg-white bg-opacity-5 text-sm placeholder-white placeholder-opacity-50 text-white focus:border-white focus:border focus:border-opacity-50 transition duration-200 outline-none w-full" placeholder="Enter a message..."></textarea>
                    <button type="submit" class="group relative inline-block p-0.5 w-full font-semibold overflow-hidden rounded-full shadow-pink hover:shadow-none focus:shadow-none">
                        <div class="absolute inset-0 bg-gradient-to-b from-pink-400 to-pink-500 group-hover:from-white group-focus:from-white group-hover:to-transparent group-focus:to-white group-hover:opacity-40 group-focus:opacity-20 rounded-full"></div>
                        <div class="relative z-50 py-3 px-4 bg-pink-500 group-hover:bg-pinkSecondary-900 group-focus:bg-pinkSecondary-900 rounded-full transition duration-200">
                            <p class="text-white group-focus:text-opacity-40 transition duration-200">Send Message</p>
                        </div>
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>

Contact from Cyber

Tailwind CSS

Cyber

Establish Connection Contact Hero with Map

A dark hero section with a bold outlined "ESTABLISH CONNECTION" headline on the left and a glassy contact info card on the right listing coordinates and an email channel. A Bay Area map with a glowing location marker and a "LOCATION LOCKED" badge fills the lower portion.

<section class="relative pt-20 scan-lines">
        <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
            <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
            <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
            <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
        </div>
        
        <div class="container px-4 mx-auto mb-12 lg:mb-20 relative z-10">
            <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 relative">
                        <div class="absolute -top-2 -left-2 w-full h-full border-2 border-blue-400 opacity-20 transform rotate-1 z-n1"></div>
                        <h2 class="text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-black font-heading tracking-wider bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent animate-glitch">ESTABLISH CONNECTION</h2>
                    </div>
                </div>
                <div class="w-full lg:w-1/2 px-4">
                    <div class="hologram-effect p-6 rounded-lg border border-blue-400 border-opacity-30 animate-float relative">
                        <div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                        <h3 class="mb-1 text-2xl font-black font-heading tracking-wider text-blue-400">COORDINATES</h3>
                        <p class="mb-4 lg:mb-8 text-lg text-green-400 hover:text-blue-400 transition-colors duration-300">1686 GERALDINE LANE NEW YORK, NY 10013</p>
                        <h3 class="mb-1 text-2xl font-black font-heading tracking-wider text-purple-500">DATA CHANNELS</h3>
                        <p class="text-lg text-green-400 hover:text-blue-400 transition-colors duration-300">hello@wireframes.org</p>
                        <div class="absolute bottom-4 left-4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-75"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="relative">
            <div class="absolute inset-0 bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 opacity-20"></div>
            <div class="relative hologram-effect border-t-2 border-b-2 border-blue-400 border-opacity-30">
                <img class="w-full h-96 object-cover opacity-60 hover:opacity-80 transition-opacity duration-300" src="cyber-assets/images/map.png" alt="">
                <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-10"></div>
                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                    <div class="w-16 h-16 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full flex items-center justify-center relative animate-pulse-neon">
                        <div class="absolute inset-2 border-2 border-green-400 rounded-full animate-spin"></div>
                        <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                    </div>
                </div>
                <div class="absolute bottom-4 right-4 text-xs text-blue-400 bg-gray-950 bg-opacity-80 px-2 py-1 rounded border border-blue-400 border-opacity-30">
                    LOCATION LOCKED
                </div>
            </div>
        </div>
    </section>

Contact from FilyTreck

Tailwind CSS

FilyTreck

Dark Gradient Contact Section with Heading and Message Form

A split-screen contact section with a large white heading and supporting paragraph on the left and a translucent dark card containing first name, last name, email, subject, and message fields with a blue Send message button on the right. The purple-to-magenta gradient background gives it a marketing-style presentation.

<section class="py-24 md:py-36" style="background: url('fily-assets/gradients/gradient-contact.jpg'); background-size: cover;">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-8">
            <div class="w-full md:w-1/2 p-8">
                <div class="pt-18">
                    <h2 class="mb-9 font-heading text-4xl md:text-5xl font-bold text-white">Let us know how we can help you</h2>
                    <p class="text-xl text-white font-light leading-normal">Nullam dignissim diam sed velit molestie, at auctor lectus finibus. Phasellus risus nisl, cursus dictum orci fermentum</p>
                </div>
            </div>
            <div class="w-full md:w-1/2 p-8">
                <form action="#" class="pt-24 pb-28 px-16 max-w-2xl mx-auto bg-white bg-opacity-5 w-full rounded-3xl">
                    <div class="flex flex-wrap -m-2.5 mb-4">
                        <div class="w-full md:w-1/2 p-2.5">
                            <label for="contact-input-01-1" class="mb-2 inline-block text-sm text-gray-500 font-medium">First name</label>
                            <input id="contact-input-01-1" type="text" placeholder="Type here" class="w-full bg-transparent px-6 h-14 font-semibold text-white placeholder-gray-500 outline-none focus:border-white border border-gray-500 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                        </div>
                        <div class="w-full md:w-1/2 p-2.5">
                            <label for="contact-input-01-2" class="mb-2 inline-block text-sm text-gray-500 font-medium">Last name</label>
                            <input id="contact-input-01-2" type="text" placeholder="Type here" class="w-full bg-transparent px-6 h-14 font-semibold text-white placeholder-gray-500 outline-none focus:border-white border border-gray-500 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                        </div>
                    </div>
                    <div class="flex flex-wrap -m-3 mb-11">
                        <div class="w-full p-3">
                            <label for="contact-input-01-3" class="mb-2 inline-block text-sm text-gray-500 font-medium">Address email</label>
                            <input id="contact-input-01-3" type="text" placeholder="Type here" class="w-full bg-transparent px-6 h-14 font-semibold text-white placeholder-gray-500 outline-none focus:border-white border border-gray-500 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                        </div>
                        <div class="w-full p-3">
                            <label for="contact-input-01-4" class="mb-2 inline-block text-sm text-gray-500 font-medium">Subject</label>
                            <input id="contact-input-01-4" type="text" placeholder="Type here" class="w-full bg-transparent px-6 h-14 font-semibold text-white placeholder-gray-500 outline-none focus:border-white border border-gray-500 focus:ring focus:ring-blue-200 rounded-full transition duration-200">
                        </div>
                        <div class="w-full p-3">
                            <label for="contact-textarea-01-1" class="mb-2 inline-block text-sm text-gray-500 font-medium">Message</label>
                            <textarea id="contact-textarea-01-1" placeholder="Type message here" class="w-full bg-transparent p-6 h-28 overflow-hidden font-semibold text-white placeholder-gray-500 outline-none focus:border-white border border-gray-500 focus:ring focus:ring-blue-200 rounded-3xl resize-none transition duration-200"></textarea>
                        </div>
                    </div>
                    <button type="submit" class="inline-flex justify-center items-center text-center h-14 py-6 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Send message</button>
                </form>  
            </div>
        </div>
    </div>
</section>

Contact from Aurora

Tailwind CSS

Aurora

Contact Support Split-Screen Form Section

A contact section with a dark green left column containing a Contact Support badge, heading, supporting text, and responder avatar, beside a white card containing first name, last name, email, phone, message fields and a green gradient Submit button with a privacy policy note.

<section class="py-12 md:py-24 bg-teal-900">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-5/12 xl:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="max-w-sm">
          <span class="inline-flex items-center h-7 mb-6 px-2 text-sm font-medium text-white bg-teal-800 rounded-full">
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 5.5C10 3.29086 8.20914 1.5 6 1.5C3.79086 1.5 2 3.29086 2 5.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M2.34038 8.83509L2.21268 8.80317C1.49998 8.62499 1 7.98463 1 7.25C1 6.51537 1.49998 5.87501 2.21268 5.69683L2.34038 5.66491C2.67543 5.58114 3 5.83456 3 6.17992V8.32008C3 8.66544 2.67543 8.91886 2.34038 8.83509Z" stroke="currentColor"></path>
              <path d="M9.65962 8.83509L9.78732 8.80317C10.5 8.62499 11 7.98463 11 7.25C11 6.51537 10.5 5.87501 9.78732 5.69683L9.65962 5.66491C9.32457 5.58114 9 5.83456 9 6.17992V8.32008C9 8.66544 9.32457 8.91886 9.65962 8.83509Z" stroke="currentColor"></path>
              <path d="M10 9V9C10 9.69036 9.44036 10.25 8.75 10.25H7.25" stroke="currentColor"></path>
              <path d="M6.75 11H5.25C4.83579 11 4.5 10.6642 4.5 10.25C4.5 9.83579 4.83579 9.5 5.25 9.5H6.75C7.16421 9.5 7.5 9.83579 7.5 10.25C7.5 10.6642 7.16421 11 6.75 11Z" stroke="currentColor"></path>
            </svg>
            <span class="ml-1">Contact Support</span>
          </span>
          <h1 class="font-heading tracking-tight text-4xl xs:text-5xl font-bold text-white mb-4">How can we help you today?</h1>
          <p class="text-lg text-gray-400 mb-10">Submit your info and we’ll get back to you as soon as possible.</p>
          <div class="flex items-center">
            <img class="block w-10 h-10 rounded-full" src="aurora-assets/blog/avatar-medium.png" alt="">
            <span class="ml-4 text-sm font-medium text-white">Responds in ≺ 1-2 hours</span>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-7/12 xl:w-1/2 px-4">
        <div class="p-8 bg-white rounded-xl">
          <form action="">
            <div class="flex flex-wrap -mx-4 mb-8 items-center">
              <div class="w-full md:w-1/2 px-4 mb-4">
                <label class="block mb-1 text-sm font-medium" for="">First name</label>
                <input class="py-2 px-4 h-11 w-full text-gray-500 placeholder-gray-500 bg-gray-50 bg-opacity-40 border border-gray-200 focus:border-yellowGreen-500 rounded-lg outline-none ring ring-transparent focus:ring-yellowGreen-500" type="text" placeholder="First name">
              </div>
              <div class="w-full md:w-1/2 px-4 mb-4">
                <label class="block mb-1 text-sm font-medium" for="">Last name</label>
                <input class="py-2 px-4 h-11 w-full text-gray-500 placeholder-gray-500 bg-gray-50 bg-opacity-40 border border-gray-200 focus:border-yellowGreen-500 rounded-lg outline-none ring ring-transparent focus:ring-yellowGreen-500" type="text" placeholder="Last name">
              </div>
              <div class="w-full md:w-1/2 px-4 mb-4">
                <label class="block mb-1 text-sm font-medium" for="">Email</label>
                <input class="py-2 px-4 h-11 w-full text-gray-500 placeholder-gray-500 bg-gray-50 bg-opacity-40 border border-gray-200 focus:border-yellowGreen-500 rounded-lg outline-none ring ring-transparent focus:ring-yellowGreen-500" type="email" placeholder="john@email.com">
              </div>
              <div class="w-full md:w-1/2 px-4 mb-4">
                <label class="block mb-1 text-sm font-medium" for="">Phone number</label>
                <div class="flex h-11 bg-gray-50 bg-opacity-40 border border-gray-200 rounded-md">
                  <div class="relative">
                    <select class="relative z-10 pl-3 pr-6 w-full h-full bg-transparent focus:outline-none appearance-none cursor-pointer" name="" id="">
                      <option value="">US</option>
                      <option value="">GB</option>
                      <option value="">EU</option>
                    </select>
                    <div class="absolute top-1/2 right-0 transform -translate-y-1/2">
                      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5 7.5L10 12.5L15 7.5" stroke="#6C7F73" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                  </div>
                  <input class="py-2 pl-2 pr-4 h-full text-gray-500 placeholder-gray-500 border-0 bg-transparent focus:outline-none" type="text" placeholder="+1 (555) 000-0000">
                </div>
              </div>
              <div class="w-full px-4">
                <label class="block mb-1 text-sm font-medium" for="">Message</label>
                <textarea class="block py-2 px-4 w-full h-44 text-gray-500 placeholder-gray-500 bg-gray-50 bg-opacity-40 border border-gray-200 focus:border-yellowGreen-500 rounded-lg outline-none ring ring-transparent focus:ring-yellowGreen-500 resize-none" placeholder="Enter your message"></textarea>
              </div>
            </div>
            <button class="group relative flex items-center justify-center px-5 h-12 w-full mb-8 text-base font-semibold text-white bg-gradient-to-br from-cyanGreen-800 to-cyan-800 rounded-lg transition-all duration-300" type="submit">
              <div class="absolute top-0 left-0 w-full h-full rounded-lg ring ring-green-300 animate-pulse group-hover:ring-0 transition duration-300"></div>
              <span>Submit</span>
            </button>
            <p class="text-sm text-gray-500">
              <span class="mr-1">We process your information in accordance with our</span>
              <a class="inline-block font-semibold text-yellowGreen-700 hover:text-yellowGreen-600" href="#">Privacy Policy</a>
            </p>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Contact from asitrastudio

Tailwind CSS

asitrastudio

Split-screen contact section with heading, contact cards, social links, trusted-by logos, and contact form

A two-column contact section with a large "Let's talk" heading, introductory copy, phone and email cards, social links, and a trusted-by logo row on the left. The right side holds a white rounded "Contact Us" form with pill-shaped inputs, a dropdown, a message textarea, and a black full-width submit button.

<section class="py-12 md:py-20 bg-coolGray-50">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="max-w-xl mx-auto lg:mx-0">
          <div class="max-w-lg mb-10">
            <h1 class="font-heading text-6xl xs:text-8xl sm:text-9xl xl:text-10xl tracking-tighter mb-8">Let`s talk</h1>
            <p class="text-xl text-coolGray-600">Whereby Embedded is the easiest way to embed video calls directly into your app, website, or anywhere else you need beautiful, custom video chat – that just works.</p>
          </div>
          <div class="flex flex-wrap -mx-4 mb-20">
            <div class="w-full sm:w-1/2 px-4 mb-6 sm:mb-0">
              <div class="py-6 text-center border border-coolGray-300 rounded-3xl">
                <span class="block mb-2 text-sm text-coolGray-500">Call us</span>
                <span class="font-medium">+48 291 821 114</span>
              </div>
            </div>
            <div class="w-full sm:w-1/2 px-4">
              <div class="py-6 text-center border border-coolGray-300 rounded-3xl">
                <span class="block mb-2 text-sm text-coolGray-500">Email us</span>
                <span class="font-medium">contact@example.com</span>
              </div>
            </div>
          </div>
          <div class="mb-16">
            <span class="block mb-5 font-medium text-lg">Socials</span>
            <div class="flex flex-wrap items-center">
              <a class="inline-flex mr-8 items-center hover:underline font-medium" href="#">
                <svg width="17" height="13" viewBox="0 0 17 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.0828 1.7882C15.5128 2.0352 14.9238 2.2062 14.2968 2.2822C14.9428 1.9022 15.4368 1.2942 15.6648 0.553195C15.0568 0.914195 14.3918 1.1612 13.6888 1.3132C13.1188 0.705195 12.3018 0.325195 11.4088 0.325195C9.67981 0.325195 8.29281 1.7312 8.29281 3.4412C8.29281 3.6882 8.31181 3.91619 8.36881 4.1442C5.78481 4.03019 3.50481 2.7762 1.96581 0.895195C0.863813 2.8712 2.09881 4.5052 2.91581 5.0562C2.42181 5.0562 1.92781 4.9042 1.50981 4.6762C1.50981 6.2152 2.59281 7.4882 3.99881 7.7732C3.69481 7.8682 3.01081 7.9252 2.59281 7.8302C2.99181 9.0652 4.15081 9.9772 5.49981 9.9962C4.43581 10.8322 2.87781 11.4972 0.882812 11.2882C2.26981 12.1812 3.90381 12.6942 5.67081 12.6942C11.4088 12.6942 14.5248 7.9442 14.5248 3.8402C14.5248 3.7072 14.5248 3.5742 14.5058 3.4412C15.1518 2.9662 15.6838 2.4152 16.0828 1.7882Z" fill="black"></path>
                </svg>
                <span class="ml-3">Twitter</span>
              </a>
              <a class="inline-flex mr-8 items-center hover:underline font-medium" href="#">
                <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.0038 4.8916C7.7351 4.8916 5.89844 6.73027 5.89844 8.99694C5.89844 11.2656 7.7371 13.1023 10.0038 13.1023C12.2724 13.1023 14.1091 11.2636 14.1091 8.99694C14.1091 6.72827 12.2704 4.8916 10.0038 4.8916ZM10.0038 11.6616C8.5311 11.6616 7.3391 10.4689 7.3391 8.99694C7.3391 7.52494 8.53177 6.33227 10.0038 6.33227C11.4758 6.33227 12.6684 7.52494 12.6684 8.99694C12.6691 10.4689 11.4764 11.6616 10.0038 11.6616Z" fill="black"></path>
                  <path d="M13.2988 1.05026C11.8268 0.981591 8.18082 0.984924 6.70749 1.05026C5.41282 1.11092 4.27082 1.42359 3.35015 2.34426C1.81148 3.88292 2.00815 5.95626 2.00815 8.99692C2.00815 12.1089 1.83482 14.1343 3.35015 15.6496C4.89482 17.1936 6.99815 16.9916 10.0028 16.9916C13.0855 16.9916 14.1495 16.9936 15.2395 16.5716C16.7215 15.9963 17.8402 14.6716 17.9495 12.2923C18.0188 10.8196 18.0148 7.17426 17.9495 5.70092C17.8175 2.89226 16.3102 1.18892 13.2988 1.05026ZM15.6288 14.6316C14.6202 15.6403 13.2208 15.5503 9.98349 15.5503C6.65015 15.5503 5.31348 15.5996 4.33815 14.6216C3.21482 13.5036 3.41815 11.7083 3.41815 8.98626C3.41815 5.30292 3.04015 2.65026 6.73682 2.46092C7.58615 2.43092 7.83615 2.42092 9.97415 2.42092L10.0042 2.44092C13.5568 2.44092 16.3442 2.06892 16.5115 5.76492C16.5495 6.60826 16.5582 6.86159 16.5582 8.99626C16.5575 12.2909 16.6202 13.6356 15.6288 14.6316Z" fill="black"></path>
                  <path d="M14.2718 5.6882C14.8017 5.6882 15.2312 5.25869 15.2312 4.72886C15.2312 4.19904 14.8017 3.76953 14.2718 3.76953C13.742 3.76953 13.3125 4.19904 13.3125 4.72886C13.3125 5.25869 13.742 5.6882 14.2718 5.6882Z" fill="black"></path>
                </svg>
                <span class="ml-3">Instagram</span>
              </a>
              <a class="inline-flex items-center hover:underline font-medium" href="#">
                <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.0984 16.0993V11.3016C16.0984 8.94368 15.5908 7.14249 12.8399 7.14249C11.5136 7.14249 10.6293 7.86297 10.2691 8.55069H10.2364V7.35536H7.63281V16.0993H10.351V11.7601C10.351 10.6139 10.5639 9.51679 11.9721 9.51679C13.3639 9.51679 13.3803 10.8104 13.3803 11.8256V16.083H16.0984V16.0993Z" fill="black"></path>
                  <path d="M3.21094 7.35538H5.92911V16.0994H3.21094V7.35538Z" fill="black"></path>
                  <path d="M4.57195 2.99991C3.7041 2.99991 3 3.70401 3 4.57186C3 5.43971 3.7041 6.16019 4.57195 6.16019C5.4398 6.16019 6.14391 5.43971 6.14391 4.57186C6.14391 3.70401 5.4398 2.99991 4.57195 2.99991Z" fill="black"></path>
                </svg>
                <span class="ml-3">Linkedin</span>
              </a>
            </div>
          </div>
          <div>
            <span class="block mb-5 text-lg">Trusted by:</span>
            <div class="flex flex-wrap items-center">
              <img class="block mb-8 mr-16" src="asitrastudio-assets/contacts/pinterest.svg" alt="">
              <img class="block mb-8 mr-16" src="asitrastudio-assets/contacts/brex.svg" alt="">
              <img class="block mb-8 mr-16" src="asitrastudio-assets/contacts/instacart.svg" alt="">
              <img class="block mb-8 mr-16" src="asitrastudio-assets/contacts/general-motors.svg" alt="">
              <img class="block mb-8 mr-16" src="asitrastudio-assets/contacts/openai.svg" alt="">
              <img class="block mb-8 mr-16" src="asitrastudio-assets/contacts/faire.svg" alt="">
              <img class="block mb-8" src="asitrastudio-assets/contacts/paypal.svg" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="py-12 px-8 md:px-10 bg-white rounded-4xl max-w-xl mx-auto lg:mr-0">
          <h3 class="text-3xl tracking-tight mb-8">Contact Us</h3>
          <form action="">
            <input class="block w-full py-4 px-8 h-16 mb-6 text-coolGray-500 bg-white border border-coolGray-400 rounded-full" type="text" placeholder="First Name*">
            <input class="block w-full py-4 px-8 h-16 mb-6 text-coolGray-500 bg-white border border-coolGray-400 rounded-full" type="text" placeholder="Last Name*">
            <input class="block w-full py-4 px-8 h-16 mb-6 text-coolGray-500 bg-white border border-coolGray-400 rounded-full" type="email" placeholder="E-mail">
            <input class="block w-full py-4 px-8 h-16 mb-6 text-coolGray-500 bg-white border border-coolGray-400 rounded-full" type="text" placeholder="Phone number">
            <div class="relative">
              <span class="absolute top-1/2 right-0 mr-10 transform -translate-y-1/2">
                <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.33203 1.66439L5.9987 6.33105L10.6654 1.66439" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </span>
              <select class="relative block w-full py-4 px-8 h-16 mb-6 text-coolGray-500 bg-transparent border border-coolGray-400 rounded-full appearance-none outline-none">
                <option selected="">What can we help you with?</option>
                <option>Marketing</option>
                <option>Selling</option>
              </select>
            </div>
            <textarea class="w-full h-52 py-5 px-8 text-coolGray-500 bg-white border border-coolGray-400 rounded-3xl resize-none mb-8" placeholder="Message" rows="3"></textarea>
            <button class="block w-full py-5 px-8 text-center font-medium text-white leading-none bg-black hover:bg-blue-500 rounded-full transition duration-150" type="submit">Send message</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Contact from Consulty

Tailwind CSS

Consulty

Contact Form with Split Photo Collage – Get In Touch

A light-themed contact section with a left-aligned heading and a form containing name, email, subject, and message fields plus a black rounded Send Message button. The right side shows a stacked collage of two rounded photographs, one of an interior space and one of a woman, arranged in a split-screen layout.

<section class="px-8 md:px-24 py-32">
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-2/3 p-4">
            <p class="tracking-tight text-gray-600 mb-4">Contact us</p>
            <h1 class="font-heading tracking-tight text-5xl md:text-6xl font-medium mb-14">Get In Touch</h1>
            <form action="#">
                <div class="max-w-2xl">
                    <div class="flex flex-wrap -m-4 mb-3">
                        <div class="w-full sm:w-1/2 p-4">
                            <label for="contact1-input1" class="block mb-3 text-sm font-medium tracking-tight">Your name</label>
                            <input type="text" id="contact1-input1" class="w-full px-6 py-4 rounded-full border border-gray-900 placeholder-gray-500 focus:ring-4 focus:ring-orange-200 outline-none transition duration-200" placeholder="John Doe">
                        </div>
                        <div class="w-full sm:w-1/2 p-4">
                            <label for="contact1-input2" class="block mb-3 text-sm font-medium tracking-tight">Email</label>
                            <input type="email" id="contact1-input2" class="w-full px-6 py-4 rounded-full border border-gray-900 placeholder-gray-500 focus:ring-4 focus:ring-orange-200 outline-none transition duration-200" placeholder="john@email.com">
                        </div>
                    </div>
                    <label for="contact1-input3" class="block mb-3 text-sm font-medium tracking-tight">Subject</label>
                    <input type="text" id="contact1-input3" class="w-full mb-3 px-6 py-4 rounded-full border border-gray-900 placeholder-gray-500 focus:ring-4 focus:ring-orange-200 outline-none transition duration-200" placeholder="Add a subject">
                    <label for="contact1-input4" class="block mb-3 text-sm font-medium tracking-tight">Message</label>
                    <textarea id="contact1-input4" rows="5" class="w-full mb-4 px-6 py-4 rounded-3xl resize-none border border-gray-900 placeholder-gray-500 focus:ring-4 focus:ring-orange-200 outline-none transition duration-200" placeholder="Write your message"></textarea>
                    <button type="submit" class="bg-black h-16 rounded-full px-6 py-4 inline-flex items-center justify-center gap-2 hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 transition duration-200">
                        <span class="text-white font-bold tracking-tight">Send Message</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M14 6.66669H7.33333C4.38781 6.66669 2 9.0545 2 12V13.3334M14 6.66669L10 10.6667M14 6.66669L10 2.66669" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </button>
                </div>
            </form>
        </div>
        <div class="w-full lg:w-1/3 p-4">
            <img class="rounded-2xl w-full object-cover" style="height:600px;" src="consulty-assets/contact/picture1.png" alt="">
        </div>
    </div>
</section>

Contact from Suncealand

Tailwind CSS

Suncealand

Contact Us Section with Chat and Social Cards

A light-background contact section with a serif "Contact us" heading, supporting text, Messenger and Snapchat handles, and a blue CONTACT button. A left cluster of portrait photo, Slack and Chat cards, and a Hello greeting bubble illustrates contact channels.

<section class="py-20 md:py-40 bg-yellowGray-500 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full xl:w-1/2 px-4 order-last xl:order-first">
        <div class="sm:flex items-start max-w-2xl mx-auto">
          <div class="mr-6">
            <div class="flex mb-8 items-end">
              <div class="flex mr-8 items-center justify-center w-40 h-14 text-center bg-white rounded-3xl">
                <span class="text-2xl font-medium leading-none">Hello!👋</span>
              </div>
              <div>
                <img src="suncealand-assets/images/photo-man-purple-bg.png" alt="">
              </div>
            </div>
            <div class="ml-auto w-52 px-8 pt-10 pb-8 rounded-3xl bg-gray-800">
              <img class="block mb-10" src="suncealand-assets/logos/chat-logo.svg" alt="">
              <h5 class="text-2xl font-medium text-white">Chat</h5>
              <span class="text-gray-300">Livechat w/ Tony</span>
            </div>
          </div>
          <div class="w-52 mt-10 px-8 pt-10 pb-8 rounded-3xl bg-gray-800">
            <img class="block mb-10" src="suncealand-assets/logos/slack-logo.svg" alt="">
            <h5 class="text-2xl font-medium text-white">Slack</h5>
            <span class="text-gray-300">Contact on Slack</span>
          </div>
        </div>
      </div>
      <div class="w-full xl:w-1/2 px-4 mb-24 xl:mb-0">
        <div class="max-w-lg mx-auto">
          <div class="inline-flex items-center px-5 py-2 bg-white rounded-full mb-10">
            <span class="block w-2 h-2 mr-2 rounded-full bg-indigo-500"></span>
            <span class="uppercase text-sm font-medium tracking-tighter">CONTACT</span>
          </div>
          <h1 class="max-w-md text-5xl sm:text-7xl xl:text-8xl font-heading font-semibold mb-10">Contact us</h1>
          <p class="text-2xl mb-14">Questions, feedback. We’re here for it all.</p>
          <div class="-mb-4">
            <a class="inline-flex mb-4 mr-8 items-center" href="#">
              <img class="mr-4" src="suncealand-assets/logos/messanger-logo.svg" alt="">
              <span>suncea_land</span>
            </a>
            <a class="inline-flex mb-4 items-center" href="#">
              <img class="mr-4" src="suncealand-assets/logos/snapchat-logo.svg" alt="">
              <span>suncea_land</span>
            </a>
          </div>
          <a class="group relative inline-block h-16 mt-16 w-full sm:w-44 bg-blueGray-900 rounded" href="#">
            <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
              <div class="flex h-full w-full items-center justify-center bg-blue-500 border-2 border-blueGray-900 rounded">
                <span class="text-base font-semibold uppercase">Contact</span>
              </div>
            </div>
          </a>
        </div>
      </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 Shuffle UX

Contact Section with Heading, Address, and Map Preview

Contact from Cronos

Contact Section with Address, Email, and Embedded Map

Contact from NEUB

Contact Section with Address Card and Map

Your next website starts here

Contact from Casper

Dark Contact Form with Gradient Contact Info Card

Contact from Mirga

Contact us section with office address, contact details, and live chat cards

Contact from Flow

Contact Us Split-Screen Form Section

Contact from Vista

Dark Contact Us Form with Heading and Pink Send Button

Contact from Cyber

Establish Connection Contact Hero with Map

Contact from FilyTreck

Dark Gradient Contact Section with Heading and Message Form

Contact from Aurora

Contact Support Split-Screen Form Section

Contact from asitrastudio

Split-screen contact section with heading, contact cards, social links, trusted-by logos, and contact form

Contact from Consulty

Contact Form with Split Photo Collage – Get In Touch

Contact from Suncealand

Contact Us Section with Chat and Social Cards

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