JSFiddle - React, Tailwind, and code Playground

by Shariq Khan

HTML

<div id="loginArea">


	<div id="searchForm">
	Search For Results<br> 
	<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" placeholder="First Name" class="searchField">
		<input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
		<input type="text" name="my_object" id="my_object" placeholder="Event" size="50" class="searchField">
		<input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form>	</div>

</div>

CSS

#loginArea {
    border-radius: 25px;
    font-family: 'russo_oneregular';
    font-size: 20px;
    padding: 20px;
    background-color: #000000;
    color: #ffffff;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.searchField {
    display: inline-block;
    width:33%;
    box-sizing:border-box;
    float:left;
}