JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table" id="table">
<thead>
	<tr>
		<th id="name">Teacher</th>
		<th id="courses">Courses</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td><a data-toggle="modal" href="#myModal" id="s-1">Katherine Crowley</a></td>
		<td>English</td>
	</tr>
	<tr>
		<td><a data-toggle="modal" href="#myModal" id="s-2">Seraphine Hamilton</a></td>
		<td>History</td>
	</tr>
	</tbody>
</table>
<div class="modal" id="myModal">
	<div class="modal-header">
		<div class="header-left">
			<h4 class="modal-title" href="#name"></h4>
		</div>
		<div class="header-right">
			<button type="button" class="close_btn" data-dismiss="modal" aria-hidden="true">×</button>
		</div><!-- .header-right -->
	</div><!-- .modal-header -->
	<div class="container">
		<div class="modal-body">
            <div class="modal-body-inner"></div>
		</div><!-- .modal-body -->
		<div class="modal-footer">
			<a href="#" data-dismiss="modal" class="btn close_btn">Close</a>
			<a href="#" class="btn btn-primary">Save changes</a>
		</div><!-- .modal-footer -->
	</div><!-- .container -->
</div><!-- #myModal -->
<div id="overlay"></div>

CSS

th, td{border:1px solid lightgrey;width:150px;text-align:center;}

#myModal{width:50%;height:50%;position:absolute;top:20%;left:25%;}
#myModal{background:wheat;z-index:10;display:none;}

.modal-header{width:100%;height:15%;background:grey;color:white;}
.header-left {width:90%;height:100%;float:left;}
.header-left h4{padding:0;margin:0;}
.header-right{width:10%;height:100%;float:right;}
.close {float:right;}

.container{width:100%;height:85%;}
.modal-body{width:90%;height:70%;}
.modal-body-inner{width:60%;height:60%;padding-top:20%;padding-left:20%;}
.modal-footer{width:90%;height:30%;padding-left:10%;border-top:1px solid lightgrey;}
.modal-footer a {padding:0 10px;margin-top:15px;}

#overlay{width:100%;height:100%;position:absolute;top:0;left:0;}
#overlay{background:black;opacity:0.8;z-index:5;display:none;}

JavaScript

$('[id^=s-]').click(function(){
    var name = $(this).text();
    var course = $(this).parent().next().text();
    $('.modal-title').html(name);
    $('.modal-body-inner').html(course);
    $('#overlay').show();
    $('#myModal').show();
});
$('.close_btn').click(function(){
    $('#overlay').hide();
    $('#myModal').hide();
});

$('.btn').button(); //Sole line that requires jQueryUI lib