JSFiddle - React, Tailwind, and code Playground

by epinapala

HTML

<a class="hl-cta hl-banner__cta ebayui-ellipsis" style="color: rgb(17, 24, 32); border-color: rgb(17, 24, 32); box-shadow: rgb(17, 24, 32) 0px 0px 0px 0px inset;" onmouseover="this.style.color='#F2EBC8'; this.style['border-color']='#111820'; this.style['box-shadow']='#111820 0 0px 0px 70px inset'; this.querySelectorAll('.hl-cta__arrow').item(0).style['stroke']='#F2EBC8'" onmouseout="this.style.color='#111820'; this.style['border-color']='#111820'; this.style['box-shadow']='#111820 0 0px 0px 0px inset'; this.querySelectorAll('.hl-cta__arrow').item(0).style['stroke']='#111820'">Explore Now <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.93 30.26" class="hl-cta__arrow" style="stroke: rgb(17, 24, 32);"><defs><style>
            .hl-cta-svg {
                fill: none;
                stroke-miterlimit: 0;
                stroke-width: 2px;
            }
        </style></defs><polyline vector-effect="non-scaling-stroke" class="hl-cta-svg" points="23.16 29.55 37.52 15.13 23.16 0.7"></polyline><line vector-effect="non-scaling-stroke" class="hl-cta-svg" x1="37.51" y1="15.13" y2="15.13"></line></svg></a>

CSS

.ebayui-ellipsis {
  display: inline-block;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ebayui-ellipsis-2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

.ebayui-ellipsis-3 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical
}


.hl-image {
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  overflow: hidden;
  position: relative
}

.hl-image__background {
  background: #f0eeec;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
  width: 100%
}

.hl-image.hl-image__fill img {
  height: 1px;
  left: 0;
  position: absolute;
  top: 0;
  width: 1px
}

.hl-image img {
  left: 50%;
  max-height: 100%;
  max-width: 100%;
  opacity: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  -webkit-transition: opacity .5s;
  transition: opacity .5s
}

.hl-image__no-fill img {
  opacity: 1
}

.hl-cta {
  border: 1px solid #333;
  box-shadow: #333 0 0px 0px 0px inset;
  display: inline-block;
  font-size: .8125rem;
  padding: 11px 17px 10px;
  text-align: center;
  -webkit-transition: all 500ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
  transition: all 500ms cubic-bezier(0.39, 0.5, 0.15, 1.36)
}

@media screen and (min-width:2px) {
  .hl-cta {
    font-size: .9375rem
  }
}

.hl-cta:hover {
  text-decoration: none
}

.hl-cta__arrow {
  display: inline-block;
  height: 8px;
  width: 12px;
  margin-left: 4px;
  -webkit-transition: all 500ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
  transition: all 500ms cubic-bezier(0.39, 0.5, 0.15, 1.36)
}

@media screen and (min-width:2px) {
  .hl-cta__arrow {
    position: relative;
    top: -1px
  }
}



.hl-infinite-carousel__main {
  box-sizing:...