JSFiddle - React, Tailwind, and code Playground
by joshmoto
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div id="reserveTable" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Reserve a Table </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<legend class="col-form-label col-12 col-md-4">Number of Guests</legend>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests1" value="1">
<label class="form-check-label" for="guests1">1 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests2" value="2">
<label class="form-check-label" for="guests2">2 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests3" value="3">
<label class="form-check-label" for="guests3">3 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests4" value="4">
<label class="form-check-label" for="guests4">4 </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="numberGuests" id="guests5" value="5">
<label...