JSFiddle - React, Tailwind, and code Playground

HTML

<div id="searchContainer">
<h1>Search For Events:</h1>
<form id="search-form" action="/races/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="âś“">

<input type="text" name="first_name" id="first_name" value="Dave" placeholder="First Name">
<input type="text" name="last_name" id="last_name" value="" placeholder="Last Name">
<input type="text" name="event" id="event" value="" placeholder="Event">
<input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form></div>

CSS

.search_button { flex-shrink: 0; }


 */
@media screen and (max-width: 500px) {
  /* line 19, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  body {
    margin: 0px;
  }

  /* line 23, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #container {
    border-radius: 0px;
    background: #ffffff;
    padding: 2px;
    width: 100%;
  }
}
/* line 31, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
ul.nav {
  font-family: 'russo_oneregular';
  letter-spacing: 1px;
}

/* line 35, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
ul.nav li.ui-state-active,
ul.nav li.ui-tabs-selected {
  font-weight: bold;
  color: #000000;
}

/* line 40, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
ul.nav li.ui-tabs-active a,
ul.nav li.ui-tabs-selected a {
  background-color: silver;
  color: #ffffff;
}

/* line 46, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
.ui-tabs-panel {
  height: 0px;
}

/* line 50, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
#add_form {
  display: none;
  box-shadow: inset 0 0 10px #000000;
  padding: 20px;
  background-color: #f0f0f0;
}
/* line 59, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
#headerText {
  font-family: 'russo_oneregular';
  font-weight: bold;
  font-size: 24px;
  text-align: center;
}

/* line 66, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
.tab {
  font-family: 'russo_oneregular';
}

/* line 70, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
.field {
  font-family: Arial;
  font-size: 11px;
  padding: 5px;
}

/* line 76, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
.required {
  color: red;
}

/* line 80,...