JSFiddle - React, Tailwind, and code Playground

by mgrcic

HTML

<div class="dd-seemore-wrapper"><div class="ebayLVTracking_inpageclicks btn btn-m btn-prim dd-seemore" clickid="OTHERSM6p2051642.m1888">Less <span class="dd-seemore-icon dd-icon-less"> </span></div></div>

CSS

.dd-seemore-wrapper {
background-image: url(http://pics.ebaystatic.com/aw/images/lsdeals/sprLDMoreLessDivider.png);
width: 760px;
height: 36px;
background-position: -20px 0px;
margin-top: 15px;
}

.btn-prim, a.btn-prim, a.btn-prim:visited, .btn-split, a.btn-split, a.btn-split:visited {
color: #fff !important;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
text-decoration: none;
background: #00509d;
background: -webkit-gradient(linear, left top, left bottom, from(#0079bc), to(#00509d));
background: -moz-linear-gradient(top, #0079bc, #00509d);
}


.btn {
display: inline-block;
zoom: 1;
vertical-align: baseline;
cursor: pointer;
text-align: center;
text-decoration: none;
font-weight: 500;
text-shadow: 0 1px 0px rgba(0, 0, 0, 0.2);
border-radius: 3px;
box-shadow: 0 3px 0px #ddd;
font-size: 16px;
padding: 0.5em 1.2em;
white-space: nowrap;
}

.dd-seemore {
margin-left: 340px;
}


.dd-seemore-icon.dd-icon-less {
background-position: -834px -10px;
}

.dd-seemore-icon {
display: inline-block;
zoom: 1;
background-image: url(http://pics.ebaystatic.com/aw/images/lsdeals/sprLDMoreLessDivider.png);
width: 12px;
height: 12px;
background-position: -814px -10px;
background-repeat: no-repeat;
}