Approach to create Online Payment UI Template
- Firstly, Integrate the Tailwind CSS via CDN Link in an HTML file. Inside
body
, there is adiv
element with Tailwind CSS classes for styling. It contains aform
element for collecting billing address and payment information. - Tailwind CSS classes are to style elements. Classes like
container
,shadow-lg
,text-red-600
,mb-4
,bg-red-600
, andhover:bg-red-700, etc
define the appearance of the payment page. - The form is divided into two sections using a grid layout for billing address and payment details here each section contains input fields for collecting information such as full name, email, address, city, state, zip code, name on card, card number, expiration month and year, and CVV.
- The
checkoutBtn
button has an event listener attached to it, which listens for a click event. - When the button is clicked, it triggers an event handler function that prevents the default form submission behavior and displays an alert message indicating that the user is proceeding to checkout.
Example: Implementation of Online Payment UI design in Tailwind CSS and JavaScript
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >The Online Payment-Page</ title > < script src = "https://cdn.tailwindcss.com" ></ script > </ head > < body > < div class = "container mx-auto mt-10" > < form action = "#" class="max-w-xl mx-auto bg-white p-8 rounded shadow-lg"> < div class="grid grid-cols-1 md:grid-cols-2 gap-6"> < div > < h3 class="text-lg font-semibold text-red-600 mb-4"> Billing Address </ h3 > < div class = "mb-4" > < label for = "name" class="block text-sm font-medium text-gray-700"> Full Name: </ label > < input type = "text" id = "name" placeholder = "Enter your full name" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500"> </ div > < div class = "mb-4" > < label for = "email" class="block text-sm font-medium text-gray-700"> Email: </ label > < input type = "email" id = "email" placeholder = "Enter your email ID" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500"> </ div > < div class = "mb-4" > < label for = "address" class="block text-sm font-medium text-gray-700"> Address: </ label > < input type = "text" id = "address" placeholder = "Enter your Address" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500"> </ div > < div class = "mb-4" > < label for = "city" class="block text-sm font-medium text-gray-700"> City: </ label > < input type = "text" id = "city" placeholder = "Enter your city" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500"> </ div > < div class = "mb-4" > < label for = "state" class="block text-sm font-medium text-gray-700"> State: </ label > < input type = "text" id = "state" placeholder = "Enter your state" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500"> </ div > < div class = "mb-4" > < label for = "zip" class="block text-sm font-medium text-gray-700"> Zip code: </ label > < input type = "text" id = "zip" placeholder = "Enter your zip code" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500"> </ div > </ div > < div > < h3 class="text-lg font-semibold text-red-600 mb-4"> Payment </ h3 > < div class = "mb-4" > < label for = "cardName" class="block text-sm font-medium text-gray-700"> Name On Card: </ label > < input type = "text" id = "cardName" placeholder = "Enter card name" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500"> </ div > < div class = "mb-4" > < label for = "cardNumber" class="block text-sm font-medium text-gray-700"> Credit Card Number: </ label > < input type = "text" id = "cardNumber" placeholder = "Enter card number" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500"> </ div > < div class = "flex justify-between mb-4" > < div class = "w-1/2 mr-2" > < label for = "expMonth" class="block text-sm font-medium text-gray-700"> Expiration Month: </ label > < input type = "text" id = "expMonth" placeholder = "MM" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500"> </ div > < div class = "w-1/2 ml-2" > < label for = "expYear" class="block text-sm font-medium text-gray-700"> Expiration Year: </ label > < input type = "text" id = "expYear" placeholder = "YYYY" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500"> </ div > </ div > < div class = "mb-4" > < label for = "cvv" class="block text-sm font-medium text-gray-700"> CVV: </ label > < input type = "text" id = "cvv" placeholder = "Enter CVV" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500"> </ div > </ div > </ div > < input type = "submit" value = "Proceed to Checkout" id = "checkoutBtn" class="mt-6 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700"> </ form > </ div > < script > document.getElementById('checkoutBtn') .addEventListener('click', function (event) { event.preventDefault(); alert('Proceeding to checkout.'); }); </ script > </ body > </ html > |
Output:
Online Payment UI Template using Tailwind CSS
The Online Payment UI design creates a user-friendly interface for collecting billing and payment information, enhancing the checkout experience with visually appealing styling and organized form elements with styling done using Tailwind CSS and basic form functionality implemented with JavaScript.
Contact Us