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">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#reserveTable">
  Launch reserve table modal
</button>

<div id="reserveTable" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg" role="content">

    <!-- convert modal-content div into form element -->
    <form class="modal-content">

      <!-- then our modal-header div -->
      <div class="modal-header">
        <h4 class="modal-title">Reserve a Table </h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- then our modal-body div -->
      <div class="modal-body">

        <!-- then our number of guests form-group -->
        <div class="form-group">
          <label>Number of Guests</label>
          <div>
            <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&nbsp;</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&nbsp; </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&nbsp; </label>
            </div>
            <div class="form-check form-check-inline">
              <input...