Camp Form

We hope you are as excited about camp as we are! If there is anything we can do to answer your questions and help you to get signed up for camp, please let us know! You can email any of us by going to the contact page.

Dates

Week 1 - July 20 - July 24
Week 2 - July 27 - July 31

Cost

We have an early bird registration, so if you register by certain dates, you'll save some money!

By May 6: $85 with registration plus $100 due at camp and a free t shirt!
By June 24: $100 with registration plus $100 due at camp and a free t shirt!
After June 24: $100 with registration plus $100 due at camp... NO FREE T SHIRT!!!

Location

Camp Joy in Republican City, NE

70790 Corp Rd 23, Republican City, NE 68971

    <h3 class="basis-full">Camp Form</h3>
    <div class="basis-full flex flex-wrap my-4">
        <label for="first-name" class="basis-full my-2 mx-2">What is your first and last name?
            <span id="validate-name" class='<span class='inline-block text-[#f39] text-sm align-super'>* required</span>'>Both first and last name are required</span></label>
        <br/>
        <input type="text" id="first-name" name="first-name" 
               hx-post="/api/validate/camp-form"
               hx-trigger="keyup delay:300ms, input delay:300ms, load"
               hx-swap="none"
               placeholder="First Name" class="flex-1 form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
        <input type="text" id="last-name" name="last-name"
               hx-post="/api/validate/camp-form"
               hx-trigger="keyup delay:300ms, input delay:300ms, load"
               hx-swap="none"
               placeholder="Last Name" class="flex-1 form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">


        <label for="parent-first-name" class="basis-full my-2 mx-2">What is your guardian's first and last name?

<span id="validate-parent" class='* required'>Both first and last name are required

        <input type="text" id="parent-first-name" name="parent-first-name"
               hx-post="/api/validate/camp-form"
               hx-trigger="keyup delay:300ms, input delay:300ms, load"
               hx-swap="none"
               class="flex-1 form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
               placeholder="First Name">
        <input type="text" id="parent-last-name" name="parent-last-name"
               hx-post="/api/validate/camp-form"
               hx-trigger="keyup delay:300ms, input delay:300ms, load"
               hx-swap="none"
               class="flex-1 form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
               placeholder="Last Name">
    </div>

    <label for="birthdate" class="basis-full mx-2">
        When were you born?
        <span id="validate-birthdate" class='<span class='inline-block text-[#f39] text-sm align-super'>* required</span>'>
            Use the format <span id="validate-month">MM</span> <span id="validate-day">DD</span> <span id="validate-year">YYYY</span>
        </span>
    </label>
    <div class="flex flex-wrap mt-2 w-1/3"> 
        <label class="basis-full ml-2 mx-2" for="birthdate_month">Month</label>
        <input type="number" id="birthdate_month" name="birthdate_month"
               placeholder="MM"
               maxlength="2"
               max="12"
               hx-post="/api/validate/camp-form"
               hx-trigger="keyup delay:300ms, input delay:300ms, load"
               hx-swap="none"
               class="form-date w-full bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
    </div>
    <div class="flex flex-wrap mt-2 w-1/3"> 
        <label class="basis-full ml-2 mx-2" for="birthdate_day">Day</label>
        <input type="number" id="birthdate_day" name="birthdate_day"
               placeholder="DD"
               maxlength="2"
               max="31"
               hx-post="/api/validate/camp-form"
               hx-trigger="keyup delay:300ms, input delay:300ms, load"
               hx-swap="none"
               class="form-date w-full bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
    </div>
    <div class="flex flex-wrap mt-2 w-1/3"> 
        <label class="basis-full ml-2 mx-2" for="birthdate_year">Year</label>
        <input type="number" id="birthdate_year" name="birthdate_year"
               placeholder="YYYY"
               maxlength="4"
               max="2025"
               hx-post="/api/validate/camp-form"
               hx-trigger="keyup delay:300ms, input delay:300ms, load"
               hx-swap="none"
               class="form-date w-full bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
    </div>

    <label for="gender" class="basis-full mt-4 mx-2">Gender</label>
    <select id="gender" name="gender" class="basis-full form-select bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500 border-r-8 border-transparent" required>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
    </select>

    <div class="basis-full flex flex-wrap my-2">
        <label for="street" class="basis-full mx-2">What is your address? <span id="validate-address" class='<span class='inline-block text-[#f39] text-sm align-super'>* required</span>'>All fields are required</span></label>

        <input type="text" id="street" name="street"
               hx-post="/api/validate/camp-form"
               hx-trigger="keyup delay:300ms, input delay:300ms, load"
               hx-swap="none"
               class="basis-full form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
               placeholder="Street Address" >
        <input type="text" id="city" name="city"
               hx-post="/api/validate/camp-form"
               hx-trigger="keyup delay:300ms, input delay:300ms, load"
               hx-swap="none"
               class="basis-full form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
               placeholder="City" >
        <input type="text" id="state" name="state"
               hx-post="/api/validate/camp-form"
               hx-trigger="keyup delay:300ms, input delay:300ms, load"
               hx-swap="none"
               class="flex-auto form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
               placeholder="State" >
        <input type="text" id="zip" name="zip"
               hx-post="/api/validate/camp-form"
               hx-trigger="keyup delay:300ms, input delay:300ms, load"
               hx-swap="none"
               class="flex-auto form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500"
               placeholder="Zip Code" >
    </div>

    <label for="grade" class="basis-full mx-2 mt-2">Grade this fall</label>
    <div class="mx-2 mb-2 grid w-full lg:grid-cols-5 md:grid-cols-5 gap-2 rounded-xl bg-gray-500 p-2">
        <div>
            <input type="radio" name="grade" id="grade-6" value="6" class="peer hidden" checked />
            <label for="grade-6" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">6th</label>
        </div>

        <div>
            <input type="radio" name="grade" id="grade-7" value="7" class="peer hidden" checked />
            <label for="grade-7" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">7th</label>
        </div>

        <div>
            <input type="radio" name="grade" id="grade-8" value="8" class="peer hidden" checked />
            <label for="grade-8" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">8th</label>
        </div>

        <div>
            <input type="radio" name="grade" id="grade-freshman" value="freshman" class="peer hidden" />
            <label for="grade-freshman" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Freshman</label>
        </div>

        <div>
            <input type="radio" name="grade" id="grade-sophomore" value="sophomore" class="peer hidden" />
            <label for="grade-sophomore" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Sophomore</label>
        </div>
        <div>
            <input type="radio" name="grade" id="grade-junior" value="junior" class="peer hidden" />
            <label for="grade-junior" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Junior</label>
        </div>
        <div>
            <input type="radio" name="grade" id="grade-senior" value="senior" class="peer hidden" />
            <label for="grade-senior" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Senior</label>
        </div>
        <div>
            <input type="radio" name="grade" id="grade-college-freshman" value="college-freshman" class="peer hidden" />
            <label for="grade-college-freshman" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">College Freshman</label>
        </div>
    </div>

    <label for="parent-phone" class="basis-full mx-2 mt-2">
        Guardian's phone
        <span id="validate-parent-phone" class='inline-block text-[#f39] text-sm'>required</span>
    </label>

    <input type="tel" id="parent-phone" name="parent-phone"
           hx-post="/api/validate/camp-form"
           hx-trigger="keyup delay:300ms, input delay:300ms, load"
           hx-swap="none"
           class="basis-full peer form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500
                 invalid:text-[#f39] invalid:ring-[#f39]
                 focus:invalid:ring-[#f39]
                 focus:invalid:border-[#f39]"
           required pattern="\(?\d{3}\)? ?-?\d{3} ?-?\d{4}"/>

    <!-- <div id="warning-phone"
         class="invisible flex
         rounded-lg h-0
         peer-invalid:p-2
         peer-invalid:visible
         peer-empty:invisible
         peer-empty:h-0
         peer-empty:mb-0
         peer-invalid:basis-full
         peer-invalid:mb-32">

         <span class="text-[#f39] ltr:pr-3 rtl:pl-3 content-right float-right">
         Make sure you have included a valid phone number for your guardian so we can contact them. Numbers are in the format "999-999-9999 or 0123456789". Make sure to include an area code.
         </span>
         </div>
    -->
    <div class="basis-full flex flex-wrap mt-4">
        
        <label for="parent-email" class="basis-full mx-2">Guardian's Email
            <span class='inline-block text-[#f39] text-sm'> required</span>
        </label>
        <input type="email" id="parent-email" name="parent-email"
               class="basis-full peer form-input
                     bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500
                     invalid:text-[#F39]
                     invalid:ring-[#f39]
                     focus:invalid:ring-[#f39]
                     focus:invalid:border-[#f39]">

        <div id="warning-email"
             class="invisible flex
                 rounded-lg h-0
                 peer-invalid:p-2 peer-invalid:visible
                 peer-invalid:basis-full
                 peer-invalid:mb-24">

            <span class="text-[#f39] ltr:pr-3 rtl:pl-3 content-right float-right">
                Make sure you have included an email for your guardian so we can contact them. Emails are in the format "name@website.end".
            </span>
        </div>
    </div>
    <label for="allergies" class="basis-full mt-4 mx-2">Please list any allergies you have.</label>
    <input type="text" id="allergies" name="allergies"
           class="basis-full form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">


    <!-- <label for="week" class="basis-full mt-4 mx-2">My Camp Plan</label>
         <div class="mx-2 my-2 grid w-full lg:grid-cols-2 md:grid-cols-2 gap-2 rounded-xl bg-gray-500 p-2">
         <div>
         <input type="radio" name="week" id="week1" value="1" class="peer hidden" checked />
         <label for="week1" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Week 1: July 20-24</label>
         </div>
         <div>
         <input type="radio" name="week" id="week2" value="Waiting 2" class="peer hidden"/>
         <label for="week2" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Week 2: July 27-31 (Waiting list)</label>
         </div>
         </div>
    -->
    <label for="week" class="basis-full mt-4 mx-2">My Camp Plan</label>
    <div class="mx-2 my-2 grid w-full lg:grid-cols-2 md:grid-cols-2 gap-2 rounded-xl bg-gray-500 p-2">
        <div>
            <input type="radio" name="week" id="week1" value="1" class="peer hidden" checked />
            <label for="week1" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Week 1: July 20-24</label>
        </div>
        <div>
            <input type="radio" name="week" id="week2" value="2" class="peer hidden"/>
            <label for="week2" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Week 2: July 27-31</label>
        </div>
    </div>

    <!-- this is the t shirt element -->
    <label for="shirt" class="basis-full mx-2 mt-4">T-Shirt Size</label>
    <div class="mx-2 my-2 grid w-full lg:grid-cols-3 md:grid-cols-3 gap-2 rounded-xl bg-gray-500 p-2">
        <div>
            <input type="radio" name="shirt" id="shirt-small" value="small" class="peer hidden" checked />
            <label for="shirt-small" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Small</label>
        </div>
        <div>
            <input type="radio" name="shirt" id="shirt-medium" value="medium" class="peer hidden" />
            <label for="shirt-medium" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Medium</label>
        </div>
        <div>
            <input type="radio" name="shirt" id="shirt-large" value="large" class="peer hidden" />
            <label for="shirt-large" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">Large</label>
        </div>
        <div>
            <input type="radio" name="shirt" id="shirt-xl" value="xl" class="peer hidden" />
            <label for="shirt-xl" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">XL</label>
        </div>
        <div>
            <input type="radio" name="shirt" id="shirt-2xl" value="2xl" class="peer hidden" />
            <label for="shirt-2xl" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">2XL</label>
        </div>
        <div>
            <input type="radio" name="shirt" id="shirt-3xl" value="3xl" class="peer hidden" />
            <label for="shirt-3xl" class="block cursor-pointer select-none rounded-xl p-2 text-center peer-checked:bg-blue-700 peer-checked:font-bold peer-checked:text-white">3XL</label>
        </div>
    </div>

    <div class="basis-full my-2">
        <label for="final-agreement" class="mx-2">
            <blockquote class="my-[-0.6em] bg-gray-700 p-8 rounded-lg shadow-md">I understand that in order to go to camp I need to have this form, a health form, and the total cost paid.</blockquote>
        </label>
        <div class="my-4">
            <input type="radio" value="yes" id="final-agreement" name="final-agreement"
                   hx-post="/api/validate/camp-form"
                   hx-trigger="input delay:300ms"
                   hx-swap="none"
                   class="form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500" required>
            <label for="final-agreement" class="mt-4 mx-2">
                I understand
                <span id="validate-agreement" class='inline-block text-[#f39] text-sm ml-4'>required</span>
            </label>
        </div>
    </div>
    <label for="health-form" class="basis-full my-2 mx-2">
        Would you like to fill out the health form now or later? Your health form is not required right now, but you cannot go to camp without one.
    </label>
    <div class="basis-full mt-4">
        <input type="radio" value="now" id="health-form" name="health-form"
               class="form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500" checked>
        <label for="health-form" class="">
            Now
        </label>
    </div>
    <div class="basis-full mb-4">
        <input type="radio" value="later" id="health-form" name="health-form"
               class="form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
        <label for="health-form" class="">
            Later
        </label>
    </div>
    <label for="registration" class="basis-full my-2 mx-2">
        Would you like to pay the registration fee or the full cost now or later?
    </label>
    <!-- For early bird prices -->
    <div class="basis-full mt-4">
        <input type="radio" value="now" id="registration" name="registration"
               class="form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500" checked>
        <label for="registration" class="">
            Now - $100
        </label>
    </div>
    <div class="basis-full">
        <input type="radio" value="full" id="registration" name="registration"
               class="form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
        <label for="registration" class="">
            Full Cost - $200
        </label>
    </div>
    <div class="basis-full mb-4">
        <input type="radio" value="later" id="registration" name="registration"
               class="form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
        <label for="registration" class="">
            Later - Send $100 or $200 to the TFC Office
        </label>
    </div>
    <!-- For after early bird prices -->
    <!-- <div class="basis-full mt-4">
         <input type="radio" value="now" id="registration" name="registration"
         class="form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500" checked>
         <label for="registration" class="">
         Now - $100
         </label>
         </div>
         <div class="basis-full">
         <input type="radio" value="full" id="registration" name="registration"
         class="form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
         <label for="registration" class="">
         Full Cost - $200
         </label>
         </div>
         <div class="basis-full mb-4">
         <input type="radio" value="later" id="registration" name="registration"
         class="form-input bg-gray-300 text-gray-900 dark:bg-gray-500 dark:text-gray-50 placeholder-gray-900 dark:placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 checked:text-gray-900 dark:checked:text-gray-500">
         <label for="registration" class="">
         Later - Send $100 or $200 to the TFC Office
         </label>
         </div> -->
    <div class="basis-full mt-8">
        <button type="submit" class="content-right rounded-lg text-white bg-blue-800 px-4 py-2 text-neutral !no-underline hover:!bg-blue-500 dark:bg-blue-800 dark:hover:!bg-blue-700 float-right">Submit</button>
    </div>
</form>