galaxy/Forms/themrsami_stupid-stingray-40.html

72 lines
2.7 KiB
HTML

<!-- From Uiverse.io by themrsami - Tags: form, tailwind, tailwindcss, themrsami, shipping form, light version -->
<div class="mt-4 flex flex-col bg-gray-100 rounded-lg p-4 shadow-sm">
<h2 class="text-black font-bold text-lg">Shipping Label Address Form</h2>
<div class="mt-4">
<label class="text-black" for="name">Name</label>
<input placeholder="Your name" class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" type="text">
</div>
<div class="mt-4">
<label class="text-black" for="address">Address</label>
<textarea placeholder="Your address" class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" id="address"></textarea>
</div>
<div class="mt-4 flex flex-row space-x-2">
<div class="flex-1">
<label class="text-black" for="city">City</label>
<input placeholder="Your city" class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" id="city" type="text">
</div>
<div class="flex-1">
<label class="text-black" for="state">State</label>
<input placeholder="Your state" class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" id="state" type="text">
</div>
</div>
<div class="mt-4 flex flex-row space-x-2">
<div class="flex-1">
<label class="text-black" for="zip">ZIP</label>
<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">
</div>
<div class="flex-1">
<label class="text-black" for="country">Country</label>
<select class="w-full bg-white rounded-md border-gray-300 text-black px-2 py-1" id="country">
<option value="">Select a country</option>
<optgroup label="Africa">
<option value="AF">Afghanistan</option>
<option value="DZ">Algeria</option>
<option value="AO">Angola</option>
...
<option value="ZW">Zimbabwe</option>
</optgroup>
<optgroup label="Asia">
<option value="AM">Armenia</option>
<option value="AZ">Azerbaijan</option>
<option value="BH">Bahrain</option>
...
<option value="YE">Yemen</option>
</optgroup>
<optgroup label="South America">
<option value="AR">Argentina</option>
<option value="BO">Bolivia</option>
<option value="BR">Brazil</option>
...
<option value="VE">Venezuela</option>
</optgroup>
...
</select>
</div>
</div>
<div class="mt-4 flex justify-end">
<button class="bg-white text-black rounded-md px-4 py-1 hover:bg-gray-200 hover:text-gray-900" type="submit">Submit</button>
</div>
</div>