JSFiddle - React, Tailwind, and code Playground

by Aleksey Losev

HTML

<div class="test"></div>

CSS

body {
 margin: 100px;
}
.test {
 display: inline-block;
 position: relative;
 width: 200px;
 height: 90px;
 background: #f9f9f9;
}
.test:before {
 position: absolute;
 left: -27px;
 top: 0px;
 content: '\25CA';
 display: inline-block;
 font-size: 90px;
 color: #666;
 width: 17px;
 height: 90px;
 overflow: hidden;
 text-indent: -0.8px;
 cursor: pointer;
}
.test:after {
 position: absolute;
 right: -27px;
 top: 0px;
 content: '\25CA';
 display: inline-block;
 font-size: 90px;
 color: #666;
 width: 17px;
 height: 90px;
 overflow: hidden;
 text-indent: -26px;
 cursor: pointer;
}
.test:hover:before,
.test:hover:after {
 color: #999;
}