Tailwind CSS Refund Forms

Basic refund application form

This example shows all the neccesory information to return your products amd refund back such as select return items, select reason for return, select method of delivery and select refund options.
Preview
Code
Figma File
                                                <style>
        input[type='checkbox']:checked {
            background-image: url(https://pagedone.io/asset/uploads/1689406942.svg);
        }
        select {
            text-indent: 1px;
            text-overflow: '';
            width: 50px;
            height: 50px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background: transparent url(https://pagedone.io/asset/uploads/1716542745.png) no-repeat 97% center;
        }
    </style> 
 <section class="py-24 relative">
        <div class="w-full max-w-7xl px-4 md:px-5 lg:px-5 mx-auto">
            <div class="w-full flex-col justify-start items-end lg:gap-16 gap-12 inline-flex">
                <div class="w-full flex-col justify-start items-center gap-14 flex">
                    <div class="w-full flex-col justify-start items-start gap-3 flex">
                        <h2 class="w-full text-center text-gray-900 text-3xl font-bold font-manrope leading-normal">Product Return Application</h2>
                        <p class="w-full text-center text-gray-500 text-base font-medium leading-relaxed">fill out the return request form below to initiate the return process for your item.</p>
                    </div>
                    <div class="w-full flex-col justify-start items-start gap-8 flex">
                        <div class="w-full flex-col justify-start items-start gap-5 flex">
                            <h4 class="text-black text-xl font-semibold leading-8">Item Select for Return</h4>
                            <div class="w-full p-8 rounded-xl border border-gray-200 flex-col justify-start items-start gap-8 flex">
                                <div class="w-full justify-between items-center gap-4 flex sm:flex-row flex-col pb-8 border-b border-gray-200">
                                    <h5 class="text-gray-900 text-lg font-semibold leading-normal">Oder:
                                        <span class="text-gray-500 font-medium">#2015656</span>
                                    </h5>
                                    <h5 class="text-gray-900 text-lg font-semibold leading-normal">Oder Date:
                                        <span class="text-gray-500 font-medium">25th May, 2024 2:00 PM</span>
                                    </h5>
                                </div>
                                <div class="w-full flex-col justify-start items-start gap-6 flex">
                                    <div class="w-full justify-start sm:items-start items-center sm:gap-8 gap-4 flex sm:flex-row flex-col">
                                        <img class="w-[122px] h-[120px] rounded-lg" src="https://pagedone.io/asset/uploads/1701158078.png" alt="UV Protected Lens image" />
                                        <div class="w-full pt-1 flex-col justify-start sm:items-start items-center gap-3 inline-flex">
                                            <div class="w-full justify-between items-center sm:gap-5 gap-3 flex sm:flex-row flex-col">
                                                <h4 class="text-gray-900 text-xl font-semibold leading-8 sm:text-start text-center">Golden Frame & Blue Round Sunglasses with UV Protected Lens</h4>
                                                <div class="flex items-center">
                                                    <input id="checkbox-default1" type="checkbox" value="" class="w-5 h-5 appearance-none border cursor-pointer border-gray-300 rounded-md checked:bg-no-repeat checked:bg-center checked:border-indigo-600 checked:bg-indigo-50" checked>
                                                </div>
                                            </div>
                                            <div class="flex-col justify-center sm:items-start items-center gap-1 flex">
                                                <h6 class="text-gray-900 text-base font-medium leading-relaxed">Color: 
                                                    <span class="text-gray-500">Blue & Golden</span>
                                                </h6>
                                                <h6 class="text-gray-900 text-base font-medium leading-relaxed">QTY: 
                                                    <span class="text-gray-500">1</span>
                                                </h6>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="w-full justify-start sm:items-start items-center sm:gap-8 gap-4 flex sm:flex-row flex-col">
                                        <img class="" src="https://pagedone.io/asset/uploads/1718103938.png" alt="Two Tone Casual Watch image" />
                                        <div class="w-full pt-1 flex-col justify-start sm:items-start items-center gap-3 inline-flex">
                                            <div class="w-full justify-between items-center sm:gap-5 gap-3 flex sm:flex-row flex-col">
                                                <h4 class="text-gray-900 text-xl font-semibold leading-8 sm:text-start text-center">Rolex Datejust Lexington Two Tone Casual Watch</h4>
                                                <div class="flex items-center">
                                                    <input id="checkbox-default2" type="checkbox" value="" class="w-5 h-5 appearance-none border cursor-pointer bg-white border-gray-300 rounded-md checked:bg-no-repeat checked:bg-center checked:border-indigo-600 checked:bg-indigo-50">
                                                </div>
                                            </div>
                                            <div class="flex-col justify-center sm:items-start items-center gap-1 flex">
                                                <h6 class="text-gray-900 text-base font-medium leading-relaxed">Color: 
                                                    <span class="text-gray-500">Silver & Golden</span>
                                                </h6>
                                                <h6 class="text-gray-900 text-base font-medium leading-relaxed">QTY: 
                                                    <span class="text-gray-500">1</span>
                                                </h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full flex-col justify-start items-start gap-8 flex">
                            <h4 class="text-black text-xl font-semibold leading-8">Select Reason for Returning</h4>
                            <div class="w-full justify-start items-start lg:gap-8 gap-3.5 flex sm:flex-row flex-col">
                                <div class="w-full flex-col justify-start items-start gap-1.5 flex">
                                    <div class="justify-start items-center gap-1 inline-flex">
                                        <h6 class="text-gray-600 text-sm font-medium leading-normal">Choose Reason</h6>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="7" height="7" viewBox="0 0 7 7" fill="none">
                                            <path d="M3.11222 6.04545L3.20668 3.94744L1.43679 5.08594L0.894886 4.14134L2.77415 3.18182L0.894886 2.2223L1.43679 1.2777L3.20668 2.41619L3.11222 0.318182H4.19105L4.09659 2.41619L5.86648 1.2777L6.40838 2.2223L4.52912 3.18182L6.40838 4.14134L5.86648 5.08594L4.09659 3.94744L4.19105 6.04545H3.11222Z" fill="#EF4444"/>
                                        </svg>
                                    </div>
                                    <div class="flex w-full">
                                        <div class="relative w-full ">
                                            <select id="countries" class="h-12 border border-gray-300 text-gray-900 text-base rounded-lg block w-full py-2.5 px-4 focus:outline-none  font-normal leading-relaxed
                                            shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] placeholder-gray-400">
                                                <option value="1">Other</option>
                                                <option value="2" selected="">Medical Leave</option>
                                                <option value="3">Personal Reason</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="w-full flex-col justify-start items-start gap-1.5 flex">
                                    <label class="text-gray-600 text-sm font-medium leading-normal">Write Reason</label>
                                    <input type="text" class="w-full h-12 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] focus:outline-none px-4 py-2.5 rounded-lg  border border-gray-300 justify-start items-center gap-2 inline-flex text-gray-900 placeholder-gray-400 text-base font-normal leading-relaxed" placeholder="Write here...">
                                </div>
                            </div>
                        </div>
                        <div class="w-full flex-col justify-start items-start gap-8 flex">
                            <h4 class="text-black text-xl font-semibold leading-8">Select the Method of Delivery of Product</h4>
                            <div class="w-full justify-start items-start gap-8 inline-flex">
                                <div class="w-full flex gap-3.5 md:flex-row flex-col">
                                    <div class="w-full flex items-center border px-4 py-2.5 border-gray-300 rounded-lg shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)]">
                                        <input id="radio_1" type="radio" name="radio" class="hidden sr-only peer" checked="">
                                        <label for="radio_1" class="text-gray-600 text-base font-normal leading-6 w-full flex items-center gap-2 cursor-pointer">                                   
                                        <span class="w-5 h-5 rounded-full border border-gray-300 checked:border-indigo-600"></span>
                                        <div class="w-fit flex-col justify-start items-start gap-1 inline-flex">
                                            <h6 class="text-gray-600 text-base font-normal leading-relaxed">Express Courier - $29</h6>
                                            <p class="sm:max-w-xs text-gray-400 text-base font-normal leading-relaxed">Return Item to our courier service via post office pr dropp-off point</p>
                                        </div>
                                        </label>
                                    </div>
                                    <div class="w-full flex items-center border px-4 py-2.5 border-gray-300 rounded-lg shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)]">
                                        <input id="radio_2" type="radio" name="radio" class="hidden sr-only peer">
                                        <label for="radio_2" class="text-gray-600 text-base font-normal leading-6 w-full flex items-center gap-2 cursor-pointer">                                   
                                        <span class="w-5 h-5 rounded-full border border-gray-300 checked:border-indigo-600"></span>
                                        <div class="w-fit flex-col justify-start items-start gap-1 inline-flex">
                                            <h6 class="text-gray-600 text-base font-normal leading-relaxed">At Store - Free</h6>
                                            <p class="text-gray-400 text-base font-normal leading-relaxed">You can return item to our stores</p>
                                        </div>
                                        </label>
                                    </div>
                                    <div class="w-full flex items-center border px-4 py-2.5 border-gray-300 rounded-lg shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)]">
                                        <input id="radio_3" type="radio" name="radio" class="hidden sr-only peer">
                                        <label for="radio_3" class="text-gray-600 text-base font-normal leading-6 w-full flex items-center gap-2 cursor-pointer">                                   
                                        <span class="w-5 h-5 rounded-full border border-gray-300 checked:border-indigo-600"></span>
                                        <div class="w-fit flex-col justify-start items-start gap-1 inline-flex">
                                            <h6 class="text-gray-600 text-base font-normal leading-relaxed">Pickup - $36</h6>
                                            <p class="sm:max-w-xs text-gray-400 text-base font-normal leading-relaxed">Your item our delivery boy pickup direct your address</p>
                                        </div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full flex-col justify-start items-start gap-8 flex">
                            <h4 class="text-black text-xl font-semibold leading-8">Select Refund Option</h4>
                            <div class="w-full justify-start items-start lg:gap-8 gap-3.5 grid md:grid-cols-3 grid-cols-1">
                                <div class="w-full h-full flex items-center border px-4 py-2.5 border-gray-300 rounded-lg shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)]">
                                    <input id="radio_4" type="radio" name="radio1" class="hidden sr-only peer" checked>
                                    <label for="radio_4" class="text-gray-600 text-base font-normal leading-relaxed w-full flex items-center gap-2 cursor-pointer">                                   
                                    <span class="w-5 h-5 rounded-full border border-gray-300 checked:border-indigo-600"></span>
                                        I want a Gift Card
                                    </label>
                                </div>
                                <div class="w-full h-full flex items-center border px-4 py-2.5 border-gray-300 rounded-lg shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)]">
                                    <input id="radio_5" type="radio" name="radio1" class="hidden sr-only peer">
                                    <label for="radio_5" class="text-gray-600 text-base font-normal leading-relaxed w-full flex items-center gap-2 cursor-pointer">                                   
                                    <span class="w-5 h-5 rounded-full border border-gray-300 checked:border-indigo-600"></span>
                                    I want my money back
                                    </label>
                                </div>
                                <div class="w-full h-full flex items-center border px-4 py-2.5 border-gray-300 rounded-lg shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)]">
                                    <input id="radio_6" type="radio" name="radio1" class="hidden sr-only peer">
                                    <label for="radio_6" class="text-gray-600 text-base font-normal leading-relaxed w-full flex items-center gap-2 cursor-pointer">                                   
                                    <span class="w-5 h-5 rounded-full border border-gray-300 checked:border-indigo-600"></span>
                                    I want exchange my product
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="sm:w-fit w-full px-5 py-2.5 bg-indigo-600 hover:bg-indigo-800 transition-all duration-700 ease-in-out rounded-xl shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] justify-center items-center flex">
                    <span class="px-2 text-white text-base font-semibold leading-7">Save Application</span>
                </button>
            </div>
        </div>
    </section>
HTML Copy
Refund request process

Following example of tailwind refund form shows all your purchased items from which you can select perticular item for refund and to show refund options.
Preview
Code
Figma File
Product reason selection form

This example of Tailwind CSS Refund Form exmaple can be used to built refund forms to know reason behind a refund request.
Preview
Code
Figma File