<body class="bg-gray-100 font-sans leading-normal tracking-normal min-h-screen flex items-center justify-center"> <div class="max-w-7xl mx-auto p-6"> <div class="bg-opacity-85 p-2 pr-8 pl-8 rounded-lg shadow-2xl bg-white w-full flex flex-wrap justify-between items-center gap-x-4"> <div class="p-6 space-y-6"> <h1 class="text-2xl font-bold mb-4 text-center">Property Form</h1> <form> <div class="grid grid-cols-6 gap-6"> <div class="col-span-6 sm:col-span-3"> <label for="Property-Number" class="block mb-2 text-sm font-medium text-black">Property Number</label> <input type="text" name="Property Number" id="Property-Number" class="shadow-sm rounded-lg block w-full p-2.5 text-sm bg-gradient-to-b from-cyan-500 to-blue-500 text-white border border-gray-300 focus:border-blue-600 focus:ring-blue-600 placeholder-white/60" placeholder="Enter a Property-No .." required> </div> <div class="col-span-6 sm:col-span-3"> <label for="Owner-Name" class="block mb-2 text-sm font-medium text-black">Owner Name</label> <input type="text" name="Owner Name" id="Owner-Name" class="shadow-sm rounded-lg block w-full p-2.5 text-sm bg-gradient-to-b from-cyan-500 to-blue-500 text-white border border-gray-300 focus:border-blue-600 focus:ring-blue-600 placeholder-white/60" placeholder="Enter Owner Name" required> </div> <div class="col-span-6 sm:col-span-3"> <label for="Property-Type" class="block mb-2 text-sm font-medium text-black">Property Type</label> <select id="Property-Type" class="shadow-sm rounded-lg block w-full p-2.5 text-sm bg-gradient-to-b from-cyan-500 to-blue-500 text-white border border-gray-300 focus:border-blue-600 focus:ring-blue-600"> <option value="" disabled selected>Select Property Type</option> <option value="Residential">Residential</option> <option value="Commercial">Commercial</option> <option value="Industrial">Industrial</option> </select> </div> <div class="col-span-6 sm:col-span-3"> <label for="Property-Location" class="block mb-2 text-sm font-medium text-black">Property Location</label> <input type="text" name="Property Location" id="Property-Location" class="shadow-sm rounded-lg block w-full p-2.5 text-sm bg-gradient-to-b from-cyan-500 to-blue-500 text-white border border-gray-300 focus:border-blue-600 focus:ring-blue-600 placeholder-white/60" placeholder="Enter Property Location" required> </div> <div class="col-span-6"> <label for="Property-Description" class="block mb-2 text-sm font-medium text-black">Property Description</label> <textarea id="Property-Description" class="shadow-sm rounded-lg block w-full p-2.5 text-sm bg-gradient-to-b from-cyan-500 to-blue-500 text-white border border-gray-300 focus:border-blue-600 focus:ring-blue-600 placeholder-white/60" placeholder="Enter Property Description" rows="4" required></textarea> </div> </div> <button type="submit" class="mt-4 w-full bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-400 transition-all duration-300 ease-in-out">Submit</button> </form> </div> </div> </div> </body>