<div class="bg-white">
  <div class="min-w-32 my-4 mx-4 border-4 border-[#f4d03f] px-4 py-4">
    <div class= "flex flex-row justify-center">
      <h1 class="text-5xl rogue-script">RSVP</h1>
      <p class="text-xl px-8 ">Please respond by May 1, 2025</p>
    </div>
    <div class="flex flex-row justify-center pt-4">
      <span class="width-1/3">Name:</span>
      <input type="text" id="name" name="name" class="border border-b width-2/3"></input>
    </div>

    <div class="flex flex-col">
      <div class="flex items-center space-x-2">
	<label class="relative flex items-center cursor-pointer">
	  <input
	    type="radio"
	    id="attend-yes"
	    name="attend"
	    class="sr-only peer/attend-yes"
	    />

	  <div class="w-6 h-6 border-2 border-gray-400 peer-checked/attend-yes:bg-blue-500 peer-checked/attend-yes:text-white flex items-center justify-center">
	    <span class="hidden peer-checked/attend-yes:inline-block text-lg font-bold"></span>
	  </div>
	  <span class="ml-2 text-gray-700">Accept</span>
	</label>
      </div>
      <div class="flex items-center space-x-2">
	<label class="relative flex items-center cursor-pointer">
	  <input
	    type="radio"
	    id="attend-no"
	    name="attend"
	    class="sr-only peer/attend-no"
	    />

	  <div class="w-6 h-6 border-2 border-gray-400 peer-checked/attend-no:bg-blue-500 peer-checked/attend-no:text-white flex items-center justify-center">
	    <span class="invisible peer-checked/attend-no:visible text-lg font-bold">X</span>
	  </div>
	  <span class="ml-2 text-gray-700">Decline</span>
	</label>
      </div>
    </div>
  </div>
</div>


	<!-- <div class="flex flex-col justify-center mt-8 w-fit mx-auto"> -->
	<!--   <div class="flex flex-row items-center"> -->
	<!--     <input type="radio" id="attend-yes" name="attending" value="yes" -->
	<!-- 	   class="peer/attend-yes"></input> -->
	<!--     <label class="text-xl px-4" for="attend-yes">Accept</label> -->
	<!--     <input type="radio" id="attend-no" class="ml-4" name="attending" value="yes"></input> -->
	<!--     <label class="text-xl px-4" for="attend-no">Decline</label> -->
	<!--   </div> -->
	<!--   <div class="flex flex-row items-center justify-center"> -->
	<!--     <input type="text" class="w-8 border-b-4 border-t-0 border-l-0 border-r-0  border-black focus:outline-none p-2" id="additional_guests" name="additional_guests"></input> -->
	<!--     <label class="text-xl pl-4" for="additional_guests"># of Guests</label> -->
	<!--   </div> -->
	<!-- </div> -->
      </div>

    </div>
