JSFiddle - React, Tailwind, and code Playground

by Michael Perrenoud

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
    <div class="prev2"></div>
    <div class="prev"></div>
    <div class="active"></div>
    <div class="next"></div>
    <div class="next2"></div>
</div>

CSS

.container {
    border: 1px solid #000;
    width: 80%;
    margin: 0 auto;
}
.container div {
    position: relative;
}
.prev, .prev2 {
    float: left;
}
.next, .next2 {
    float: left;
}
.active {
    float: left;
    z-index: 3;
}
.prev, .next {
    margin-top: 26.5%;
    width: 25%;
    background-color: green;
    z-index: 2;
}
.prev2, .next2 {
    margin-top: 28%;
    width: 20%;
    border: 1px solid red;
    z-index: 1;
}
.active {
    width: 30%;
    border: 1px solid blue;
    float: left;
}
.active:after, .prev2:after, .prev:after, .next:after, .next2:after {
    padding-top: 56.25%;
    /* 16:9 ratio */
    display: block;
    content:'';
}
.prev {
    margin-left: -5.20%;
}
.active {
    margin: 25% -5.20%;
}
.next {
    margin-right: -5.20%
}