JSFiddle - React, Tailwind, and code Playground
by Simon Price
HTML
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="contentPane study-program-subject">
<section id="video-space">
<div class="container">
<div id="contentfulVideo" class="">
</div>
</div>
</section>
<section id="accordions">
<div class="container">
<div class="l-accordian-container">
<a class="accordian-control">
<span>
<em></em>
</span>
</a>
<div class="l-accordian">
<div>
</div>
</div>
</div>
<div class="l-accordian-container">
<a class="accordian-control">
<span>
<em></em>
</span>
</a>
<div class="l-accordian">
<div>
<p>As part of your degree, you could:</p>
<ul>
<li>visit major engineering sites</li>
<li>use industry-standard laboratory facilities, such as wind tunnels and flight simulators</li>
<li>benefit from strong industry links</li>
<li>undertake a placement year</li>
<li>work on real consultancy-style or research projects</li>
<li>graduate with an accredited degree</li>
</ul>
</div>
</div>
...
CSS
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}