Sections
Tailwind CSS Contact Pages - Madhuranjan UI
Explore our diverse collection of Contact page designs, each crafted to facilitate communication with your audience. Whether you need a simple contact form or a detailed layout with address and FAQs, these templates help you engage effortlessly.
Contact Page Component
A versatile layout ideal for basic inquiries and quick contact options.
Let's Connect
We'd love to hear from you. Send us a message!
Prefer direct contact? Email us at [email protected]
or call +1 (234) 567-890
1 <div class="flex min-h-screen items-center justify-center bg-gradient-to-br from-indigo-50 to-purple-50 p-4 transition-all duration-300 dark:from-gray-900 dark:to-gray-800">
2 <div class="w-full max-w-lg overflow-hidden rounded-2xl border border-white/30 bg-white/80 shadow-2xl backdrop-blur-lg dark:border-gray-700/50 dark:bg-gray-800/90">
3 <div class="relative bg-gradient-to-r from-indigo-500 to-purple-600 p-6 text-white">
4 <div class="absolute top-0 right-0 h-32 w-32 translate-x-16 -translate-y-16 transform rounded-full bg-white/10"></div>
5 <div class="relative z-10">
6 <h2 class="text-3xl font-bold">Let's Connect</h2>
7 <p class="mt-2 opacity-90">We'd love to hear from you. Send us a message!</p>
8 </div>
9 </div>
10Contact Page
A clean, modern design providing a straightforward contact experience.
Contact Us
We're here to help! Reach out with questions, feedback, or partnership opportunities.
Other Ways to Connect
Visit Us
123 Business Ave
San Francisco, CA 94107
Call Us
+1 (555) 123-4567
Mon-Fri, 9am-5pm PST
Support
[email protected]
24/7 customer support
1 <div class="flex min-h-screen items-center justify-center bg-gray-50 p-4 transition-colors duration-300 dark:bg-gray-900">
2 <div class="flex w-full transform flex-col overflow-hidden bg-white shadow-xl transition-transform duration-300 md:flex-row dark:bg-gray-800">
3 <div class="w-full p-8 sm:p-10 md:w-1/2 lg:p-12">
4 <div class="mb-6 flex items-center">
5 <svg class="mr-3 h-10 w-10 text-purple-600 dark:text-purple-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
6 <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
7 <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
8 </svg>
9 <h1 class="bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-3xl font-bold text-transparent dark:from-purple-400 dark:to-blue-300">Contact Us</h1>
10 </div>Contact Page With Address
Highlight your office location and contact details with this informative layout.
Get In Touch
Find Us
Our Location
1234 Main Street, Suite 500
Example City, XY 12345
Contact Info
Business Hours
Monday - Friday: 9AM - 5PM
Saturday: 10AM - 2PM
Sunday: Closed
1 <div class="bg-gradient-to-br from-violet-50 to-blue-50 px-4 py-12 transition-colors duration-300 sm:px-6 dark:from-gray-900 dark:to-blue-950/50">
2 <div class="mx-auto grid max-w-6xl grid-cols-1 gap-8 md:grid-cols-2">
3 <div class="rounded-xl border border-white/30 bg-white/80 p-6 text-gray-800 shadow-lg backdrop-blur-sm transition-shadow duration-300 hover:shadow-xl sm:p-8 dark:border-gray-700/50 dark:bg-gray-800/90 dark:text-gray-50">
4 <div class="mb-6 flex items-center gap-3">
5 <svg class="h-8 w-8 text-violet-600 dark:text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
6 <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
7 <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
8 </svg>
9 <h3 class="bg-gradient-to-r from-violet-600 to-blue-600 bg-clip-text text-2xl font-bold text-transparent dark:from-violet-400 dark:to-blue-400">Get In Touch</h3>
10 </div>Contact Page With Card
Engage visitors with a card-based design that neatly organizes contact options.
Let's Create Something Amazing
Whether you have a project in mind or just want to explore possibilities, we're excited to connect with you.
Live Chat Support
Get instant answers from our friendly support team available 24/7 to assist you.
Start ChatReady to Start Your Project?
Send us a message and we'll get back to you within 24 hours to discuss how we can help bring your vision to life.
Contact Our Team1<div class="bg-gradient-to-br from-violet-50 to-blue-50 px-4 py-9 transition-colors duration-300 sm:px-6 dark:from-gray-900 dark:to-blue-950">
2 <div class="mx-auto mb-16 max-w-4xl text-center">
3 <h2 class="mb-4 bg-gradient-to-r from-violet-600 to-blue-600 bg-clip-text text-4xl font-bold text-transparent sm:text-5xl dark:from-violet-400 dark:to-blue-400">Let's Create Something Amazing</h2>
4 <p class="mx-auto max-w-2xl text-lg text-gray-600 dark:text-gray-300">Whether you have a project in mind or just want to explore possibilities, we're excited to connect with you.</p>
5 </div>
6
7 <div class="mx-auto grid max-w-7xl grid-cols-1 gap-8 px-4 md:grid-cols-2 lg:grid-cols-3">
8 <div class="group relative overflow-hidden rounded-xl border border-white/30 bg-white/80 p-8 shadow-lg backdrop-blur-sm transition-all duration-300 hover:shadow-xl dark:border-gray-700/50 dark:bg-gray-800/90">
9 <div class="absolute inset-0 bg-gradient-to-br from-violet-100/50 to-blue-100/50 opacity-0 transition-opacity duration-500 group-hover:opacity-100 dark:from-blue-900/30 dark:to-violet-900/30"></div>
10 <div class="relative z-10">Contact Page With FAQ
Include frequently asked questions to provide instant support and clarity.
Get In Touch
Have questions or need assistance? Our team is ready to help you with any inquiries.
Contact Information
Reach out directly or browse our FAQ section for quick answers.
Email Address
[email protected]Phone Number
(555) 123-4567Office Location
123 Business Ave, Suite 400
San Francisco, CA 94107
Send Us a Message
Frequently Asked Questions
Find quick answers to common questions below
How quickly will I receive a response?
Our support team typically responds within 24 hours during business days. For urgent matters, please call our support line.
Where can I find service details?
Visit our Services page for comprehensive information about all offerings. You can also request a custom quote through our contact form.
What are your business hours?
Our office is open Monday-Friday from 9AM to 6PM EST. After-hours support is available for premium service plans.
Do you offer emergency support?
Yes, we provide 24/7 emergency support for critical issues. Additional fees may apply for after-hours emergency services.
Still have questions? Contact our support team
1 <div class="bg-gradient-to-b from-violet-50 to-white px-4 py-16 dark:from-blue-900 dark:to-gray-900">
2 <div class="mx-auto max-w-6xl text-gray-800 dark:text-gray-50">
3 <div class="mb-12 flex flex-col items-center md:flex-row">
4 <div class="mb-6 flex items-center justify-center md:mb-0 md:w-1/3">
5 <div class="rounded-full bg-gradient-to-r from-violet-600 to-blue-500 p-2">
6 <img src="https://via.placeholder.com/150" alt="Company Logo" class="h-24 w-24 rounded-full border-4 border-white object-cover dark:border-gray-900" />
7 </div>
8 </div>
9 <div class="text-center md:w-2/3 md:pl-8 md:text-left">
10 <h2 class="bg-gradient-to-r from-violet-600 to-blue-500 bg-clip-text text-4xl font-extrabold text-transparent dark:from-violet-400 dark:to-blue-300">Get In Touch</h2>