JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div class="cta-link__wrapper">
  <img class="cta-link__arrow" src="https://esurveydesigns.com/isa/JPOXEYMFMDPXCTCMLOAVEMKACDBAEFOF/CFP/arrow-previous.png" />
  <span class="cta-link__link" tabindex="-1">Previous</span>
</div>

CSS

.cta-link__wrapper {
  cursor: pointer;
  padding: 10px 0 0 50px;
}

.cta-link__link {
  font-family: sans-serif;
  font-weight: 700;
  width: auto;
}

.cta-link__arrow {
  transition: left 0.4s;
  position: relative;
  left: 0;
  transform: rotate(180deg);
  height: 15px;
  width: 18px;
}

.cta-link__wrapper:hover .cta-link__arrow {
  left: -10px;
}