JSFiddle - React, Tailwind, and code Playground

by Che Sampat

HTML

<section class="container-fluid">
    <div class="col-10 mx-auto">
        <form method="post" action="#" accept-charset="utf-8">
            <div class="form-row mb-3 mt-5">
                <div class="form-group col-12 col-sm-6 col-md-4">
                    <label>prepend</label>
                    <div class="input-group input-group-sm">
                        <div class="input-group-prepend">
                             <span class="input-group-text rounded-0 fa fa-phone"></span>
                        </div>
                        <input id="phone2" type="tel" class="form-control form-control-sm rounded-0 w-100">
                    </div>
                </div>
                <div class="form-group col-12 col-sm-6 col-md-4">
                  <label>append</label>
                    <div class="input-group input-group-sm">
                        <input id="phone" type="tel" class="form-control form-control-sm rounded-0 w-100">
                        <div class="input-group-append">
                             <span class="input-group-text rounded-0 fa fa-phone"></span>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>

CSS

.input-group > .intl-tel-input.allow-dropdown {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
}

.input-group > .intl-tel-input.allow-dropdown > .flag-container {
	z-index: 4;
}

.iti-flag {
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.6/img/flags.png");
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .iti-flag {
      background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.6/img/[email protected]");
    }
}

JavaScript

let telInput = $("#phone")

// initialize
telInput.intlTelInput({
    initialCountry: 'auto',
    preferredCountries: ['us','gb','br','ru','cn','es','it'],
    autoPlaceholder: 'aggressive',
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.6/js/utils.js",
    geoIpLookup: function(callback) {
        fetch('https://ipinfo.io/json', {
            cache: 'reload'
        }).then(response => {
            if ( response.ok ) {
                 return response.json()
            }
            throw new Error('Failed: ' + response.status)
        }).then(ipjson => {
            callback(ipjson.country)
        }).catch(e => {
            callback('us')
        })
    }
})

let telInput2 = $("#phone2")

// initialize
telInput2.intlTelInput({
    initialCountry: 'br',
    preferredCountries: ['us','gb','br','ru','cn','es','it'],
    autoPlaceholder: 'aggressive',
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.6/js/utils.js"
})