JSFiddle - React, Tailwind, and code Playground

by mytom

HTML

<div class="controls">
	<div class="controls_prev"></div>
	<div class="controls_toggle"></div>
	<div class="controls_next"></div>
</div>

CSS

.controls{
	position:absolute;
	width:100%;
	height:100px;
	top:50%;
	margin-top:-37px;
	display:block;
}

.controls_prev{
	opacity: 0.6;
	position:relative;
	width:78px;
	height:100px;
	top:0px;
	left:0px;
	float:left;
	border: solid 1px #40b2d6;
}

.controls_toggle{
	opacity: 0.6;
	position:relative;
	width:78px;
	height:100px;
	top:0px;
	left:0px;
	float:left;
	border: solid 1px #40b2d6;
}

.controls_next{
	opacity: 0.6;
	position:relative;
	width:78px;
	height:100px;
	top:0px;
	right:0px;
	float:left;
	border: solid 1px #40b2d6;
}