JSFiddle - React, Tailwind, and code Playground
HTML
<div id="content">
<div class="storyboard-row">
<div class="storyboard-frame">
<div class="description">Scene 1</div>
<div class="scene"></div>
</div><div class="storyboard-frame">
<div class="description">Scene 2</div>
<div class="scene"></div>
</div>
</div><div class="storyboard-row">
<div class="storyboard-frame">
<div class="description">Scene 1</div>
<div class="scene"></div>
</div>
</div>
</div>
SCSS
* {
box-sizing: border-box;
}
body {
background-color: #fff;
color: #444;
margin: 0;
}
#content {
display: flex;
flex-wrap:wrap
}
.storyboard-frame {
position: relative;
display: inline-block;
border: solid thin #444;
.scene {
width: 200px;
height: 200px;
}
.description {
color: #888;
font-family: sans-serif;
font-size: large;
width: 200px;
margin-top: 0.5em;
}
}
.storyboard-row {
display: flex;
margin-left:auto;
margin-right:auto;
}