Published on

The Ninja Guide To How To Make A Simple Donate Form With Tailwind CSS Better

Tags
Simple Donate Form

As a FrontEnd technology blogger, you may have heard of Tailwind CSS, a utility-first CSS framework that can help you create beautiful and responsive UI components quickly. In this article, we will guide you through creating a simple donate form with Tailwind CSS and show you how to make it better.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes that you can use to style your HTML elements. Unlike other CSS frameworks, Tailwind CSS does not have pre-built components. Instead, it provides a set of low-level utility classes that you can use to create your own custom components.

The description of Simple Donate Form ui component

A simple donate form is a UI component that allows users to donate money to a cause or organization. It typically includes fields for the user's name, email address, donation amount, and payment information.

Why use Tailwind CSS to create a Simple Donate Form ui component?

There are several reasons why you should use Tailwind CSS to create a simple donate form:

  • Tailwind CSS provides a set of pre-defined utility classes that you can use to style your form quickly.
  • Tailwind CSS is highly customizable, which means you can easily modify the default styles to match your brand's colors and typography.
  • Tailwind CSS is responsive by default, which means your form will look great on all screen sizes.

The preview of Simple Donate Form ui component

To give you an idea of what our simple donate form will look like, here is a preview:

Free download of the Simple Donate Form's source code

The source code of Simple Donate Form ui component

To create our simple donate form, we will use HTML and Tailwind CSS. Here is the source code:

<!doctype html>
<html>
<head>
  <title>Donate</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="bg-gradient-to-tr from-fuchsia-300 to-sky-500">
  <section id="login" class="p-4 flex flex-col justify-center min-h-screen max-w-md mx-auto">
    <div class="p-6 bg-sky-100 rounded">
      <div class="flex items-center justify-center font-black m-3 mb-12">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 mr-3 text-red-600 animate-pulse" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
        </svg>
      <h1 class="tracking-wide text-3xl text-gray-900">Buy Me a Laptop</h1>
      </div>
        <form id="login_form" action="api_login" method="POST"
        class="flex flex-col justify-center">
        <div class="flex justify-between items-center mb-3">
          <div class="inline-flex items-center self-start">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-3 bg-gradient-to-r from-pink-600 to-red-600 shadow-lg rounded p-1.5 text-gray-100" viewBox="0 0 20 20" fill="currentColor">
          <path d="M13 7H7v6h6V7z" />
          <path fill-rule="evenodd" d="M7 2a1 1 0 012 0v1h2V2a1 1 0 112 0v1h2a2 2 0 012 2v2h1a1 1 0 110 2h-1v2h1a1 1 0 110 2h-1v2a2 2 0 01-2 2h-2v1a1 1 0 11-2 0v-1H9v1a1 1 0 11-2 0v-1H5a2 2 0 01-2-2v-2H2a1 1 0 110-2h1V9H2a1 1 0 010-2h1V5a2 2 0 012-2h2V2zM5 5h10v10H5V5z" clip-rule="evenodd" />
          </svg>
          <span class="font-bold text-gray-900">$5 / Core</span>
          </div>
          <div class="flex">
             <button type="button" onclick="minus()" class="bg-yellow-600 p-1.5 font-bold rounded">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z" clip-rule="evenodd" />
              </svg>
            </button>
            
            <input id="item_count" type="number" value="1" class="max-w-[100px] font-bold font-mono py-1.5 px-2 mx-1.5
            block border border-gray-300 rounded-md text-sm shadow-sm  placeholder-gray-400
            focus:outline-none
            focus:border-sky-500
            focus:ring-1
            focus:ring-sky-500
            focus:invalid:border-red-500  focus:invalid:ring-red-500">
           
            <button type="button" onclick="plus()" class="bg-green-600 p-1.5 font-bold rounded">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
              </svg>
            </button>
          </div>
        </div>
          <label class="text-sm font-medium">From</label>
          <input class="mb-3 px-2 py-1.5
          mb-3 mt-1 block w-full px-2 py-1.5 border border-gray-300 rounded-md text-sm shadow-sm placeholder-gray-400
          focus:outline-none
          focus:border-sky-500
          focus:ring-1
          focus:ring-sky-500
          focus:invalid:border-red-500 focus:invalid:ring-red-500" type="text" name="username" placeholder="wahyusa">
          <label class="text-sm font-medium">Messages (optional)</label>
          <textarea class="
          mb-3 mt-1 block w-full px-2 py-1.5 border border-gray-300 rounded-md text-sm shadow-sm placeholder-gray-400
          focus:outline-none
          focus:border-sky-500
          focus:ring-1
          focus:ring-sky-500
          focus:invalid:border-red-500 focus:invalid:ring-red-500" name="messages" placeholder="Write something"></textarea>
          <button class="px-4 py-1.5 rounded-md shadow-lg bg-gradient-to-r from-pink-600 to-red-600 font-medium text-gray-100 block transition duration-300" type="submit">
            <span id="login_process_state" class="hidden">Sending :)</span>
            <span id="login_default_state">Donate<span id="subtotal"></span></span>
          </button>
        </form>
    </div>
  </section>

  <script>
    document.getElementById("login_form").onsubmit = function() {
      event.preventDefault()
      // animation
      document.getElementById("login_process_state").classList.remove("hidden")
      document.getElementById("login_process_state").classList.add("animate-pulse")

      document.getElementById("login_default_state").classList.add("hidden")
    }

    let current_count = parseInt(document.getElementById("item_count").value)
    let subtotal = parseInt(5)

    function plus() {
      document.getElementById("item_count").value = ++current_count
      document.getElementById("subtotal").innerHTML =` ${subtotal * document.getElementById("item_count").value}`

    }

    function minus() {
      if(current_count < 2) {
        current_count = 1
        document.getElementById("item_count").value = 1
        document.getElementById("subtotal").innerHTML =` ${subtotal * document.getElementById("item_count").value}`
      } else {
        document.getElementById("item_count").value = --current_count
        document.getElementById("subtotal").innerHTML =` ${subtotal * document.getElementById("item_count").value}`
      }
    }

  </script>
</div>
</body>
</html>

How to create a Simple Donate Form with Tailwind CSS?

Now that you have seen the preview and source code of our simple donate form, let's dive into the step-by-step process of creating it with Tailwind CSS.

Step 1: Set up your HTML

The first step is to set up your HTML. Here is the HTML code for our simple donate form:

<form class="max-w-md mx-auto">
  <div class="mb-4">
    <label class="block text-gray-700 font-bold mb-2" for="name">
      Name
    </label>
    <input
      class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
      id="name"
      type="text"
      placeholder="John Doe"
    />
  </div>
  <div class="mb-4">
    <label class="block text-gray-700 font-bold mb-2" for="email">
      Email
    </label>
    <input
      class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
      id="email"
      type="email"
      placeholder="[email protected]"
    />
  </div>
  <div class="mb-4">
    <label class="block text-gray-700 font-bold mb-2" for="donation-amount">
      Donation Amount
    </label>
    <div class="relative">
      <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
        <span class="text-gray-500 sm:text-sm sm:leading-5">
          $
        </span>
      </div>
      <input
        class="shadow appearance-none border rounded w-full py-2 pl-10 pr-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        id="donation-amount"
        type="text"
        placeholder="0.00"
      />
    </div>
  </div>
  <div class="mb-4">
    <label class="block text-gray-700 font-bold mb-2" for="card-number">
      Credit Card Number
    </label>
    <input
      class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
      id="card-number"
      type="text"
      placeholder="**** **** **** ****"
    />
  </div>
  <div class="mb-4">
    <label class="block text-gray-700 font-bold mb-2" for="expiration-date">
      Expiration Date
    </label>
    <div class="grid grid-cols-2 gap-4">
      <input
        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        id="expiration-date"
        type="text"
        placeholder="MM/YY"
      />
      <input
        class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        id="cvv"
        type="text"
        placeholder="CVV"
      />
    </div>
  </div>
  <div class="flex items-center justify-between">
    <button
      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
      type="button"
    >
      Donate
    </button>
  </div>
</form>

In this code, we have used several Tailwind CSS classes to style our form. For example, we have used the mb-4 class to add margin-bottom to our form elements, the shadow class to add a shadow effect to our input fields, and the bg-blue-500 and hover:bg-blue-700 classes to set the background color of our donate button.

Step 2: Customize your styles

Once you have set up your HTML, you can start customizing your styles. Here are some tips for customizing your styles with Tailwind CSS:

  • Use the bg- classes to set the background color of your form elements.
  • Use the text- classes to set the text color of your form elements.
  • Use the font- classes to set the font family and font size of your form elements.
  • Use the border and rounded classes to add borders and rounded corners to your form elements.
  • Use the px- and py- classes to add padding to your form elements.
  • Use the focus:outline-none and focus:shadow-outline classes to remove the default outline and add a shadow effect to your input fields when they are in focus.

Step 3: Add interactivity

Finally, you can add interactivity to your form using JavaScript. For example, you can use JavaScript to validate the user's input and submit the form to a server.

Conclusion

In this article, we have shown you how to create a simple donate form with Tailwind CSS and how to make it better. We hope this guide has been helpful and that you are now ready to create your own custom UI components with Tailwind CSS. Happy coding!