<div class="contact-2 bg-gray-100 py-6 md:py-12">
  <div class="container px-4 mx-auto">

    <div class="text-center md:max-w-2xl md:mx-auto px-2 md:pb-4">
      <strong class="text-gray-500 uppercase">Get Started</strong>
      <h1 class="text-3xl md:text-4xl font-medium my-2">Get in Touch with Us</h1>
      <div class="contact-form mt-6 md:mt-12">

        <div class="mb-4">
          <textarea name="message" id="message" cols="30" rows="5" placeholder="Send us your queries or feedback" class="border-2 border-solid rounded py-2 px-3 placeholder-gray-500 placeholder-opacity-100 w-full focus:border-indigo-300 input transition-colors transtion-"></textarea>
        </div>

        <div class="mb-4 flex">
          <div class="flex-grow">
            <input type="text" placeholder="Your E-mail" class="border-2 border-solid rounded py-2 px-3 placeholder-gray-500 placeholder-opacity-100 w-full focus:border-indigo-300 input">
          </div>
          <button class="bg-indigo-600 hover:bg-indigo-700 text-white border-2 border-solid border-indigo-600 rounded py-2 px-4 flex-shrink-0 ml-4 transition-colors duration-300">
            <i class="fab fa-telegram-plane"></i>
          </button>
        </div>

      </div>
    </div>

    <div class="md:flex md:-mx-4 text-center mt-6 md:mt-12 pt-6 border-t-2 border-solid">
      <div class="md:px-4 md:w-1/3">
        <address>
          <div class="font-bold mb-2">West Chicago, IL</div>
          <span>
            44 Shirley Ave.<br>
            West Chicago, IL 60185
          </span>
        </address>
      </div>
      <div class="md:px-4 md:w-1/3 mt-8 md:mt-0">
        <address>
          <div class="font-bold mb-2">Orlando, FL</div>
          <span>
            514 S. Magnolia St.<br>
            Orlando, FL 32806
          </span>
        </address>
      </div>
      <div class="md:px-4 md:w-1/3 mt-8 md:mt-0">
        <address>
          <div class="font-bold mb-2">West Chicago, IL</div>
          <span>
            4 Goldfield Rd.<br>
            Honolulu, HI 96815
          </span>
        </address>
      </div>
    </div>

  </div>
</div>
.input:focus {
  box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.15);
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.