<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body class="bg-gray-50 flex items-center justify-center min-h-screen p-6">
<div class="w-full max-w-4xl bg-white shadow-lg rounded-lg p-8">
<!-- Contact Information Section -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center mb-8">
<!-- Company Information -->
<div>
<div class="flex justify-center mb-3">
<i class="fas fa-building text-gray-400 text-3xl"></i>
</div>
<h3 class="font-semibold text-gray-800">Company information:</h3>
<p class="text-gray-500">Flowbite LLC<br>Tax id: USXXXXXX</p>
</div>
<!-- Address -->
<div>
<div class="flex justify-center mb-3">
<i class="fas fa-map-marker-alt text-gray-400 text-3xl"></i>
</div>
<h3 class="font-semibold text-gray-800">Address:</h3>
<p class="text-gray-500">SILVER LAKE, United States<br>1941 Late Avenue<br>Zip Code/Postal code: 03875</p>
</div>
<!-- Contact Us -->
<div>
<div class="flex justify-center mb-3">
<i class="fas fa-phone-alt text-gray-400 text-3xl"></i>
</div>
<h3 class="font-semibold text-gray-800">Contact us:</h3>
<p class="text-gray-500">Email us for general queries, including marketing and partnership opportunities.</p>
<p class="text-blue-600 font-medium">hello@flowbite.com</p>
</div>
</div>
<!-- Contact Form Section -->
<form action="#" method="POST">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<!-- First Name -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2" for="first-name">First name</label>
<input type="text" id="first-name" name="first-name" placeholder="Bonnie" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-gray-900">
</div>
<!-- Last Name -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2" for="last-name">Last name</label>
<input type="text" id="last-name" name="last-name" placeholder="Green" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-gray-900">
</div>
<!-- Email -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2" for="email">Your email</label>
<input type="email" id="email" name="email" placeholder="name@flowbite.com" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-gray-900">
</div>
<!-- Phone Number -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2" for="phone">Phone number</label>
<input type="text" id="phone" name="phone" placeholder="+(12) 345 6789" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-gray-900">
</div>
<!-- Country -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2" for="country">Country <i class="fas fa-question-circle text-gray-400 ml-1"></i></label>
<select id="country" name="country" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-gray-900">
<option>United States</option>
<!-- Add more options as needed -->
</select>
</div>
<!-- Language -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2" for="language">Language <i class="fas fa-question-circle text-gray-400 ml-1"></i></label>
<select id="language" name="language" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-gray-900">
<option>English (US)</option>
<!-- Add more options as needed -->
</select>
</div>
</div>
<!-- Message -->
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2" for="message">Your message</label>
<textarea id="message" name="message" rows="4" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-gray-900"></textarea>
</div>
<!-- Terms and Conditions -->
<div class="flex items-start mb-6">
<input type="checkbox" id="terms" name="terms" class="h-4 w-4 text-blue-600 border-gray-300 rounded">
<label for="terms" class="ml-2 text-sm text-gray-500">I confirm that you have read and agreed to <a href="#" class="text-blue-600">Flowbite's Terms of Service</a> and <a href="#" class="text-blue-600">Privacy Statement</a>.</label>
</div>
<!-- Submit Button -->
<button type="submit" class="w-full md:w-auto bg-blue-600 text-white font-medium rounded-lg px-6 py-2.5 text-center">Send message</button>
</form>
</div>
</body>
</html>
HTML