Home
KULDEEP
Contact us Form with Responsive

Contact us Form with Responsive

This tailwind example is contributed by KULDEEP, on 08-Jul-2025. Component is made with Tailwind CSS v3. 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

630

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

Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Author:
Hamza Atig

10 months ago

1.1k
login
html , css

Author:
Hacker Development

9 months ago

570
background animation
background animation

Author:
Jayendra Madara

1 year ago

3.2k
Pricing card
Reveal details on hover

Author:
Anonymous

1 year ago

4.4k
Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

3 years ago

17.7k
3D login form and responsive designe
Made a resposnvie form and 3d animation

Author:
Sufyan jutt

3 weeks ago

40
Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

2 years ago

13.8k
Chats Screen in neomorphism

Author:
Akram Khan

1 year ago

2.5k
Card

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

1.5k
Login Form
Admin Login Form

Author:
Khalid

1 year ago

2.3k
Welcome Back

Author:
Tanvir Islam

1 year ago

1.1k
Your upside-down text

Author:
Isabella Kowalski

3 years ago

13.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components