Home
Fathallah Anass
Responsive Contact Section Using Tailwind CSS

Responsive Contact Section Using Tailwind CSS

This HTML and Tailwind CSS snippet creates a visually appealing and responsive contact section. Designed to adapt seamlessly across different screen sizes, this component features two main areas: the contact information block and a contact form. The contact block displays essential details like phone, email, and address, alongside social media links, all encapsulated within a cyan-themed card with rounded corners and shadow effects for depth. The form area, highlighted with a contrasting white background, ensures a user-friendly interface for submitting contact details. This code snippet is perfect for integration into any modern web application requiring a responsive and stylish contact section.

This tailwind example is contributed by Fathallah Anass, on 27-Jun-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Form Login Form

Author Fathallah Anass

Fork Fullscreen

<body class="antialiased bg-primary-200 p-3">
    <div class="w-full  flex justify-center items-center">
      <div
        class="flex flex-col md:flex-row space-y-6 md:space-y-0 md:items-stretch md:space-x-12 bg-cyan-700 w-full max-w-4xl p-8 sm:px-12 sm:py-10 rounded-xl shadow-lg text-white overflow-hidden">
        <div class="md:py-4 flex-grow flex flex-col space-y-8 md:justify-between">
          <div class="">
            <h1 class="TitleDesgin font-bold text-4xl tracking-wide">{{$t('contactForm.title')}}</h1>
            <p class="text-cyan-100 text-sm pt-2 text-white">{{$t('contactForm.description')}}</p>
          </div>
          <div class="flex flex-col space-y-6">
            <div class="inline-flex space-x-2 items-center">
              <i class="bi bi-telephone-fill text-teal-300 text-xl"></i>
              <span class="select-all">+(123) 456 7890</span>
            </div>
            <div class="inline-flex space-x-2 items-center">
              <i class="bi bi-envelope-at-fill text-teal-300 text-xl"></i>
              <span class="select-all">contact@xyzwebsite.com</span>
            </div>
            <div class="inline-flex space-x-2 items-center">
              <i class="bi bi-geo-alt-fill text-teal-300 text-xl"></i>
              <span class="select-all">11, Street 342, Abcd Fgh</span>
            </div>
          </div>
          <div class="flex space-x-4 text-lg">
            <a href="#" class="hover:text-teal-300"><i class="bi bi-facebook"></i></a>
            <a href="#" class="hover:text-teal-300"><i class="bi bi-instagram"></i></a>
            <a href="#" class="hover:text-teal-300"> <i class="bi bi-linkedin"></i></a>
            <a href="#" class="hover:text-teal-300"> <i class="bi bi-youtube"></i></a>
          </div>
        </div>
        <div class="relative z-10">
          <div class="absolute -top-28 -right-28 z-0 bg-teal-400 w-40 h-40 rounded-full"></div>
          <div class="absolute -bottom-16 -left-28 z-0 bg-teal-400 w-40 h-40 rounded-full"></div>
          <div class="relative z-10 w-full md:w-80 h-full bg-white p-7 text-gray-600 rounded-xl shadow-lg"
            style="min-height: 300px">
            <form action="" class="flex flex-col space-y-6">
              <div>
                <label for="" class="text-sm">{{$t('contactForm.name')}}</label>
                <input type="text" placeholder="Your name"
                  class="ring-1 ring-gray-300 mt-2 w-full rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-teal-300" />
              </div>
              <div>
                <label for="" class="text-sm">{{$t('contactForm.email')}}</label>
                <input type="text" placeholder="Email Address"
                  class="ring-1 ring-gray-300 mt-2 w-full rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-teal-300" />
              </div>
              <div>
                <label for="" class="text-sm">{{$t('contactForm.message')}}</label>
                <textarea placeholder="Type your message here"
                  class="ring-1 ring-gray-300 mt-2 w-full rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-teal-300"
                  rows="4"></textarea>
              </div>
              <button
                class="startBtn inline-block self-end bg-cyan-700 text-white font-bold rounded-lg px-6 py-2 uppercase text-sm">{{$t('contactForm.button')}}</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </body>

Related Examples