Contact us Form with Responsive

This tailwind example is contributed by KULDEEP, on 08-Jul-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner,Get in touch, Contact form,Register, Sign in

Card Call to Action Form Contact us Login Form Other

Author KULDEEP

Tailwind v3.4 1.1k 2

Fork Fullscreen

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<section class="contact-section">
  <div class="container mx-auto px-4 py-8">
    <div class="grid md:grid-cols-2 gap-8 bg-white rounded-lg shadow-lg overflow-hidden">
      
      
      <div class="p-8 bg-gray-800 text-white">
        <h2 class="text-2xl text-blue-400 mb-8 relative pb-4">
          Contact Information
          <span class="absolute bottom-0 left-0 w-12 h-0.5 bg-blue-500"></span>
        </h2>
        
        
        <div class="flex items-start gap-4 mb-8">
          <div class="w-12 h-12 bg-blue-500 flex items-center justify-center rounded-full text-xl">
            <i class="fas fa-map-marker-alt"></i>
          </div>
          <div>
            <h3 class="text-lg mb-1">Our Location</h3>
            <p class="text-gray-300 leading-relaxed">
              Lucknow
            </p>
          </div>
        </div>
        
        
        <div class="flex items-start gap-4 mb-8">
          <div class="w-12 h-12 bg-blue-500 flex items-center justify-center rounded-full text-xl">
            <i class="fas fa-phone-alt"></i>
          </div>
          <div>
            <h3 class="text-lg mb-1">Phone Numbers</h3>
            <p class="text-gray-300 leading-relaxed">
              <a href="tel:+978589658" class="hover:text-blue-400">+91 748598658</a><br />
              <a href="tel:+748596255" class="hover:text-blue-400">+91 789456123</a>
            </p>
          </div>
        </div>
        
        
        <div class="flex items-start gap-4 mb-8">
          <div class="w-12 h-12 bg-blue-500 flex items-center justify-center rounded-full text-xl">
            <i class="fas fa-envelope"></i>
          </div>
          <div>
            <h3 class="text-lg mb-1">Email Address</h3>
            <p class="text-gray-300 leading-relaxed">
              <a href="mailto:kuldeepprajapati2111@gmail.com" class="hover:text-blue-400">kuldeepprajapati2111@gmail.com</a><br />
             
            </p>
          </div>
        </div>
        
        
        <div class="flex gap-4 mt-8">
          <a href="#" class="w-10 h-10 bg-gray-700 flex items-center justify-center rounded-full text-white transition duration-300 hover:bg-blue-500 transform hover:-translate-y-1">
            <i class="fab fa-facebook-f"></i>
          </a>
          <a href="#" class="w-10 h-10 bg-gray-700 flex items-center justify-center rounded-full text-white transition duration-300 hover:bg-pink-500 transform hover:-translate-y-1">
            <i class="fab fa-instagram"></i>
          </a>
          <a href="#" class="w-10 h-10 bg-gray-700 flex items-center justify-center rounded-full text-white transition duration-300 hover:bg-blue-400 transform hover:-translate-y-1">
            <i class="fab fa-twitter"></i>
          </a>
          <a href="#" class="w-10 h-10 bg-gray-700 flex items-center justify-center rounded-full text-white transition duration-300 hover:bg-blue-700 transform hover:-translate-y-1">
            <i class="fab fa-linkedin-in"></i>
          </a>
        </div>
      </div>
      
      
      <div class="p-8">
        <h2 class="text-2xl text-blue-500 mb-8 relative pb-4">
          Send Us a Message
          <span class="absolute bottom-0 left-0 w-12 h-0.5 bg-blue-500"></span>
        </h2>
        <form class="space-y-6">
          
          <div>
            <label for="name" class="block mb-2 font-medium">Your Name</label>
            <input type="text" id="name" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 transition" required />
          </div>
          
          <div>
            <label for="email" class="block mb-2 font-medium">Email Address</label>
            <input type="email" id="email" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 transition" required />
          </div>
          
          <div>
            <label for="phone" class="block mb-2 font-medium">Phone Number</label>
            <input type="tel" id="phone" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 transition" />
          </div>
          
          <div>
            <label for="subject" class="block mb-2 font-medium">Subject</label>
            <input type="text" id="subject" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 transition" />
          </div>
          
          <div>
            <label for="message" class="block mb-2 font-medium">Your Message</label>
            <textarea id="message" class="w-full p-3 border border-gray-300 rounded-md min-h-[150px] resize-y focus:outline-none focus:ring-2 focus:ring-blue-300 transition" required></textarea>
          </div>
          
          
          <button type="submit" class="flex items-center gap-2 bg-gradient-to-br from-blue-500 to-blue-400 text-white font-semibold py-3 px-6 rounded-full hover:scale-105 hover:shadow-lg transition duration-300">
            <i class="fas fa-paper-plane"></i> Send Message
          </button>
        </form>
      </div>
    </div>
  </div>
</section>

Related Examples

Login Form with Icon

Prashant

4 years ago

18.8k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Akshay

4 years ago

24.8k
Login form

Gopi Yadav

3 years ago

12k
Sign in / Login Form

Bunny

4 years ago

14.5k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Bunny

4 years ago

50.6k
Login Form

Amit Pachange

4 years ago

13.7k
Contact me form

Arya

3 years ago

12.9k
Contact Form

Sophia Baker

3 years ago

11.1k
Sign In form

Amit Pachange

3 years ago

12.7k
Login form

Leon Bachmann

3 years ago

15.9k
User registration form

Leon Bachmann

3 years ago

25.8k
User registration form with Instructions

Fagundo67

3 years ago

25.2k