JSFiddle - React, Tailwind, and code Playground

by Rishi Gautam

HTML

<input id="cellphone" value='9782637481' />

<div id='phoneField'>
  <div class='input'>
    <a href='tel:9782637481'>9782637481</a>
  </div>
</div>

CSS

.input {
  border: 1px solid #888;
  box-sizing: border-box;
  display: block;
  font-family: sans-serif;
  font-size: 13px;
  line-height: 16px;
  margin: 10px 0;
  padding: 2px 5px;
  vertical-align: baseline;
  width: 166px;
}

JavaScript

var field = document.getElementById('cellphone');

field.addEventListener("focus", function(e) {
  e.target.style.background = '#ddd'
})

field.addEventListener('blur', function(e) {
e.target.style.background = ''
})