<body class="bg-gray-100 font-sans leading-normal tracking-normal h-screen flex items-center justify-center"> <div class="bg-white shadow-lg rounded-lg p-8 max-w-md w-full"> <h1 class="text-2xl font-bold mb-6 text-center">Submit a Proposal</h1> <form> <div class="mb-4"> <label for="buyer-requirement" class="block text-gray-700 mb-2">Buyer's Requirement</label> <textarea id="buyer-requirement" class="w-full p-2 border rounded" placeholder="Enter the buyer's requirement" rows="4"></textarea> </div> <div class="mb-4"> <label for="proposal-details" class="block text-gray-700 mb-2">Proposal Details</label> <textarea id="proposal-details" class="w-full p-2 border rounded" placeholder="Enter your proposal details" rows="4"></textarea> </div> <div class="mb-4"> <label for="price" class="block text-gray-700 mb-2">Price</label> <input type="text" id="price" class="w-full p-2 border rounded" placeholder="Enter your price"> </div> <div class="mb-6"> <label for="delivery-time" class="block text-gray-700 mb-2">Delivery Time</label> <input type="text" id="delivery-time" class="w-full p-2 border rounded" placeholder="Enter delivery time"> </div> <button type="button" class="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-400" onclick="document.getElementById('popup').classList.remove('hidden')">Submit Proposal</button> </form> </div> <div id="popup" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 hidden"> <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full"> <h2 class="text-xl font-bold mb-4">Confirmation</h2> <p class="mb-4">Are you sure you want to submit this proposal?</p> <div class="flex justify-between"> <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-400" onclick="document.getElementById('popup').classList.add('hidden')">Cancel</button> <button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-400">Confirm</button> </div> </div> </div> </body>