Tạo trang liên hệ bằng tailwindcss 3

Tạo trang liên hệ bằng tailwindcss 3

<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

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *