Form by themrsami
#212121
HTML +TailwindCSS
1<div class="mt-4 flex flex-col bg-gray-100 rounded-lg p-4 shadow-sm"> 2 <h2 class="text-black font-bold text-lg">Shipping Label Address Form</h2> 3 4 <div class="mt-4"> 5 <label class="text-black" for="name">Name</label> 6 <input placeholder="Your name" class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" type="text"> 7 </div> 8 9 <div class="mt-4"> 10 <label class="text-black" for="address">Address</label> 11 <textarea placeholder="Your address" class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" id="address"></textarea> 12 </div> 13 14 <div class="mt-4 flex flex-row space-x-2"> 15 <div class="flex-1"> 16 <label class="text-black" for="city">City</label> 17 <input placeholder="Your city" class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" id="city" type="text"> 18 </div> 19 20 <div class="flex-1"> 21 <label class="text-black" for="state">State</label> 22 <input placeholder="Your state" class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" id="state" type="text"> 23 </div> 24 </div> 25 26 <div class="mt-4 flex flex-row space-x-2"> 27 <div class="flex-1"> 28 <label class="text-black" for="zip">ZIP</label> 29 <input placeholder="Your ZIP code" class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" id="zip" type="text"> 30 </div> 31 32 <div class="flex-1"> 33 <label class="text-black" for="country">Country</label> 34 <select class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" id="country"> 35 <option value="">Select a country</option> 36 37 <optgroup label="Africa"> 38 <option value="AF">Afghanistan</option> 39 <option value="DZ">Algeria</option> 40 <option value="AO">Angola</option> 41 ... 42 <option value="ZW">Zimbabwe</option> 43 </optgroup> 44 45 <optgroup label="Asia"> 46 <option value="AM">Armenia</option> 47 <option value="AZ">Azerbaijan</option> 48 <option value="BH">Bahrain</option> 49 ... 50 <option value="YE">Yemen</option> 51 </optgroup> 52 53 <optgroup label="South America"> 54 <option value="AR">Argentina</option> 55 <option value="BO">Bolivia</option> 56 <option value="BR">Brazil</option> 57 ... 58 <option value="VE">Venezuela</option> 59 </optgroup> 60 61 ... 62 </select> 63 </div> 64 </div> 65 66 <div class="mt-4 flex justify-end"> 67 <button class="bg-white text-black rounded-md px-4 py-1 hover:bg-gray-200 hover:text-gray-900" type="submit">Submit</button> 68 </div> 69</div> 70
924 views
924 views
MIT License