JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<a class="tel" href="">1 (905)-456-7890</a>

CSS

a,
.a {
  text-decoration: none;
  border-bottom: 1px solid #f28f2d;
  //replace #f28f2d with colour of choice
  -moz-transition: 0.5s opacity ease, 0.25s color ease, 0.5s background-image ease, 0.25s background-color ease, 0.5s border-color ease;
  -webkit-transition: 0.5s opacity ease, 0.25s color ease, 0.5s background-image ease, 0.25s background-color ease, 0.5s border-color ease;
  transition: 0.5s opacity ease, 0.25s color ease, 0.5s background-image ease, 0.25s background-color ease, 0.5s border-color ease;
}

a:hover,
a:focus,
.a:hover,
.a:focus {
  color: #f28f2d;
}

JavaScript

jQuery(function($) {
  $(document).ready(function() {
    var href = $(".tel").attr("href");
    if (href == "" || href == null) {
      href = $(".tel").text();
      href = href.replace(/\s+/g, '');
      href = href.replace(/[{()}]/g, '');
      href = href.replace(/-/g, '');
    }
    if (href.indexOf("tel") < 0) {
      $(".tel").attr("href", ("tel:" + href));
    }

  });
});