JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <meta name="description" content="jQuery-Mask-Plugin - A jQuery plugin to make field masks" />
  <meta name="author" content="Igor Escobar" />
  <title>jQuery-Mask-Plugin - A jQuery plugin to make field masks.</title>

  <link rel="stylesheet" href="http://igorescobar.github.com/jQuery-Mask-Plugin/css/bootstrap.min.css" type="text/css" media="screen">

</head>
<body>
  <div class="container">
  <h2>Nova mascara para telefones de São Paulo com jQuery Mask Plugin</h1>
  <span> A jQuery Plugin for field masks. </span>
  <h2>Demos</h2>

  <form>
    <label>Mascara para Telefones de São Paulo</label>
    <input type="text" class="phone"/>
  </form>
  
  <p>jQuery Mask Plugin on <a href="https://github.com/igorescobar/jQuery-Mask-Plugin" target="_blank">GitHub</a> & Author <a href="http://blog.igorescobar.com/" rel="author" target="_blank">Igor Escobar</a> </p>
</div>
<br clear="all" />

</div>
</body>
</html>

JavaScript

var masks = ['(00) 00000-0000', '(00) 0000-00009'];
$('.phone').mask(masks[1], {onKeyPress: 
   function(val, e, field, options) {
       field.mask(val.length > 14 ? masks[0] : masks[1], options) ;
   }
});