JSFiddle - React, Tailwind, and code Playground

by poonia

HTML

<div class="mk-zoom-controls mk-control">
    <div class="mk-zoom-in" role="button" tabindex="0"></div>
    <div class="mk-divider"></div>
    <div class="mk-zoom-out" role="button" tabindex="0"></div>
</div>

CSS

.mk-zoom-controls {
    width: 23px;
    height: 47px;
    background: #FAFAFA;
    box-shadow: 0 0 0 1px rgba(0,0,0,.2);
    border-radius: 3px;
    pointer-events: auto;
}
.mk-zoom-controls .mk-zoom-in {
    position: relative;
    width: 23px;
    height: 23px;
    cursor: pointer;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.mk-zoom-in:before {
    content: '';
    position: absolute;
    top: 6px;
    left: 11px;
    width: 1px;
    height: 13px;
    background-color: red;
}
.mk-zoom-in:after {
    content: '';
    position: absolute;
    top: 12px;
    left: 5px;
    width: 13px;
    height: 1px;
    background-color: red;
}
.mk-zoom-controls .mk-divider {
    width: 23px;
    height: 1px;
    background: rgba(51,51,51,.1);
}
.mk-zoom-controls .mk-zoom-out {
    position: relative;
    width: 23px;
    height: 23px;
    cursor: pointer;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}
.mk-zoom-out:after {
    content: '';
    position: absolute;
    top: 12px;
    left: 5px;
    width: 13px;
    height: 1px;
    background-color: red;
}