JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<a class="time-href" href="#">

  <svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17 15" xml:space="preserve">
    <path d="M12,15c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S14.8,15,12,15z M12,6
	c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,7.8,14.2,6,12,6z M11,11v-1V8h1v2h2v1h-2H11z M2,4h6.4C8,4.3,7.5,4.6,7.1,5H2
	v1h4.3C6,6.3,5.9,6.7,5.7,7H2v1h3.3C5.1,8.6,5,9.3,5,10c0,1.5,0.5,2.9,1.3,4H0V0h12v3C10.5,3,2,3,2,3V4z" />
  </svg>
  Get Timer Here

</a>

SCSS

body {
  padding: 50px;
}

.time-href {
  position: relative;
  display: inline-block;
  padding-left: 25px;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 14px;
  text-decoration: none;
  color: #000;
  transition: color .2s;
  svg {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 17px;
    path {
      fill: #000;
      transition: fill .2s;
    }
  }
  &:hover {
    color: blue;
    svg {
      path {
        fill: blue;
      }
    }
  }
}