In Tailwind CSS, you can add a custom color by defining it in the theme.extend section of your configuration file (tailwind.config.js).

Here's an example:

<form class="bg-white p-6 rounded-lg">
  <h2 class="text-lg font-medium mb-4">Contact Us</h2>
  <div class="mb-4">
    <label class="block font-medium mb-2" for="name">
      Name
    </label>
    <input
      class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
      id="name"
      type="text"
      placeholder="John Doe"
    />
  </div>
  <div class="mb-4">
    <label class="block font-medium mb-2" for="email">
      Email
    </label>
    <input
      class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
      id="email"
      type="email"
      placeholder="johndoe@example.com"
    />
  </div>
  <div class="mb-4">
    <label class="block font-medium mb-2" for="message">
      Message
    </label>
    <textarea
      class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500 h-32"
      id="message"
      placeholder="Enter your message here"
    ></textarea>
  </div>
  <button
    class="bg-purple-500 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded focus:outline-none focus:shadow-outline"
    type="submit"
  >
    Submit
  </button>
</form>