JSFiddle - React, Tailwind, and code Playground

by Roger Sanchez

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/intlTelInput.min.js"></script>
<body>
  <form>
    <input type="tel" name="phone_number[main]" id="phone_number" />   
  </form>

</body>

CSS

.iti {
	position: relative;
	display: inline-block
}

.iti * {
	box-sizing: border-box;
	-moz-box-sizing: border-box
}

.iti__hide {
	display: none
}

.iti__v-hide {
	visibility: hidden
}

.iti input,
.iti input[type=tel],
.iti input[type=text] {
	position: relative;
	z-index: 0;
	margin-top: 0!important;
	margin-bottom: 0!important;
	padding-right: 36px;
	margin-right: 0
}

.iti__flag-container {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	padding: 1px
}

.iti__selected-flag {
	z-index: 1;
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 6px 0 8px
}

.iti__arrow {
	margin-left: -39px;
	width: 0;
	height: 0;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-top: 4px solid #555
}

.iti__arrow--up {
	border-top: none;
	border-bottom: 4px solid #555
}

.iti__country-list {
	position: absolute;
	z-index: 2;
	list-style: none;
	text-align: left;
	padding: 0;
	margin: 0 0 0 -1px;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, .2);
	background-color: #fff;
	border: 1px solid #ccc;
	white-space: nowrap;
	max-height: 200px;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch
}

.iti__country-list--dropup {
	bottom: 100%;
	margin-bottom: -1px
}

@media (max-width:500px) {
	.iti__country-list {
		white-space: normal
	}
}

.iti__flag-box {
	display: inline-block;
	width: 20px
}

.iti__divider {
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: 1px solid #ccc
}

.iti__country {
	padding: 5px 10px;
	outline: 0
}

.iti__dial-code {
	color: #999
}

.iti__country.iti__highlight {
	background-color: rgba(0, 0, 0, .05)
}

.iti__country-name,
.iti__dial-code,
.iti__flag-box {
	vertical-align: middle
}

.iti__country-name,
.iti__flag-box {
	margin-right: 6px
}

.iti--allow-dropdown input,
.iti--allow-dropdown input[type=tel],
.iti--allow-dropdown input[type=text],
.iti--separate-dial-code input,
.iti--separate-dial-code input[type=tel],
.iti--separate-dial-code input[type=text] {
	padding-right:...

JavaScript

var phone_number = window.intlTelInput(document.querySelector("#phone_number"), {
  separateDialCode: true,
  preferredCountries:["in"],
  hiddenInput: "full",
  utilsScript: "//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js"
});