JSFiddle - React, Tailwind, and code Playground
HTML
<div class="bookingForm">
<form action="">
<img src="bookNow.png" alt="">
<label for="name">
NAME <input type="text" name="name"><br>
</label>
<label for="roomType">
TYPE OF ROOM<br>
<select name="type" id="roomType">
<option value="Normal">Normal</option>
<option value="Superior">Superior</option>
<option value="Penthouse">Penthouse</option>
</select> <br>
</label>
<table>
<tr>
<td>
<label for="numberRooms">
NUMBER OF ROOMS <br>
<select name="type" id ="numberRooms">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</label>
</td>
<td>
<label for="numberBeds">
NUMBER OF BEDS<br>
<select name="type" id="numberBeds">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br>
</label>
</td>
</tr>
</table>
<label for="arrivalDate">
ARRIVAL DATE <input type="date" name="arrival"><br>
</label>
<label for="checkoutDate">
CHECKOUT DATE <input type="date" name="checkout"><br>
</label>
<label for="questions">
QUESTIONS<br>
<textarea rows="10" cols="30" name="comment" form="usrform">Enter text here...</textarea>
</label>
</form>
CSS
.bookingForm {
position: absolute;
background-color:#F2C84B;
margin:15px 0 15px 0;
height: 430px;
width: 250px;
border-radius: 5px;
right:0px;
}
form {
padding:1.5em 1.5em 0 1.5em;
font-size:0.7em;
}
form input {
margin-bottom: 1em;
width:100%;
}
#roomType {
width: 218px;
}
label[for=numberBeds] {
margin-left: 30px;
}
#numberBeds, #numberRooms {
width: 100px;
}