JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

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/js/bootstrap.bundle.min.js"></script>
<button id="modal1">Open 1 Columns</button>
<button id="modal2">Open 2 Columns</button>
<button id="modal3">Open 3 Columns</button>


<!-- 3 Column Modal -->
<div id="myTherapist1" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">Click on a picture to select your Therapist</h5>
      </div>

      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div class="col">
              <div class="bioData">
                <label>
                  <input type="radio" name="mychoice" value="3">
                  <img src="https://dummyimage.com/400x400/000/ffffff&text=+++pic1+++">
                </label>
                <p class="bioName">Dr. Larry Nogood</p>
                <button class="btn btn-outline-primary btn-sm">Read Bio</button>
              </div>
            </div>
            <div class="col">
              <div class="bioData">
                <label>
                  <input type="radio" name="mychoice" value="3">
                  <img src="https://dummyimage.com/400x400/000/ffffff&text=+++pic2+++">
                </label>
                <p class="bioName">Dr. Scott Ford</p>
                <button class="btn btn-outline-primary btn-sm">Read Bio</button>
              </div>
            </div>
            <div class="col">
              <div class="bioData">
                <label>
                  <input type="radio" name="mychoice" value="3">
                  <img src="https://dummyimage.com/400x400/000/ffffff&text=+++pic3+++">
                </label>
                <p class="bioName">Dr. Brent Grundy</p>
                <button...

CSS

.modal-dialog { max-width: 750px; }
.bioData { text-align: center; max-width: 200px; margin: 0 auto; }
.bioData img { max-width: 200px; }

JavaScript

$('#modal1').click(() => { $('#myTherapist1').modal({show : true}) })
$('#modal2').click(() => { $('#myTherapist2').modal({show : true}) })
$('#modal3').click(() => { $('#myTherapist3').modal({show : true}) })