JSFiddle - React, Tailwind, and code Playground

by barrycorrigan

HTML

<script src="http://www.barrycorrigan.com/assets/js/vendor/jquery.maskedinput.min.js"></script>
<form method="post" name="form" id="form" class="form" action="">
    <div>
    <legend>Country</legend>

    <input id="usa" name="country" type="radio">
    <label for="usa">United States</label>

    <input id="argentina" name="country" type="radio">
    <label for="argentina">Argentina</label>
</div>

<div>
    <label>Phone Number</label>
    <input id="phone" name="phone" class="phone" type="tel" />
    <input id="phone_arg" name="phone_arg" class="phone_arg" type="tel" />
    <span>Example: 123-456-7890 or 12-34-5678-9000</span>
</div>
    
</form>

CSS

div {
    display: block;
}

JavaScript

$(function() {
    $(".phone").mask("999-999-9999", { placeholder: " " });
    $(".phone_arg").mask("99-99-9999-9999", { placeholder: " " });
});