JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<div id="catering-footer">
	<div id="catering-footer-inner">
		<div id="catering-button">
			<a href="#catering-form">test<img src="/assets/images/cateringform/book_event_button.gif" id="catering-button-image" /></a>
		</div>
		<div id="catering-inner-wrapper">
			<div id="catering-inner">
				<form id="catering-form" action="/catering-events/event-inquiry" method="get">
					<div style="float: left; padding-left: 20px;"><img src="/assets/images/cateringform/city.gif" width="41" height="22" alt="city" /></div>
					<div style="float: left; padding-right: 20px;">
						<select id="catering-form-city" name="catering-form-city">
							<option value="" selected="selected">Select a City</option>
							<option label="Atlanta" value="atlanta">Atlanta</option>
							<option label="Atlantic City" value="atlantic-city">Atlantic City</option>
							<option label="Beaver Creek" value="beaver-creek">Beaver Creek</option>
							<option label="Boston" value="boston">Boston</option>
							<option label="Charlotte" value="charlotte">Charlotte</option>
							<option label="Chicago" value="chicago">Chicago</option>
							<option label="Dallas" value="dallas">Dallas</option>
							<option label="Las Vegas" value="las-vegas">Las Vegas</option>
							<option label="Los Angeles" value="los-angeles">Los Angeles</option>
							<option label="Maui" value="maui">Maui</option>
							<option label="New York City" value="new-york-city">New York City</option>
							<option label="Philadelphia" value="philadelphia">Philadelphia</option>
							<option label="San Diego" value="san-diego">San Diego</option>
							<option label="San Francisco" value="san-francisco">San Francisco</option>
							<option label="Seattle" value="seattle">Seattle</option>
							<option label="Washington, D.C." value="washington-dc">Washington, D.C.</option>
						</select>
					</div>
					<div style="float: left;"><img src="/assets/images/cateringform/date.gif" width="46" height="22" alt="Date"...

CSS

#catering-footer, #reservations-footer {
    bottom: 50px;
    overflow: hidden;
    position: fixed;
    width: 100%;
    z-index: 20;
}

#catering-inner-wrapper, #reservations-inner-wrapper {
    background-color: #656565;
    border-top: 1px solid #272727;
    height: 80px;
    position: relative;
    top: 1px;
    width: 100%;
}

#catering-inner {
    margin: 0 auto;
    padding-top: 28px;
    width: 660px;
}

JavaScript

$("#catering-form").submit(function()
        {
         alert('Form is submitting');
         return true;
        });