JSFiddle - React, Tailwind, and code Playground

by mattography

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/simplemodal/1.4.4/jquery.simplemodal.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="input-group">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">+1 <span class="caret"></span>

        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#" id="1">US: +1</a>

            </li>
            <li><a href="#" id="44">UK: +44</a>

            </li>
        </ul>
    </div>
    <!-- /btn-group -->
    <input type="text" class="form-control" aria-label="..." placeholder="Your phone number"> <span class="input-group-btn">
			                 <button class="btn btn-default" type="button">SUBMIT</button>
			              </span>

</div>
</div>

CSS

h5 {
    margin-top: 0px!important;
    font-family: Knowledge!important;
    color: #fff!important;
    size: 12px!important;
    font-weight: 400!important;
}
#basic-modal-content {
    display:none;
}
/* Overlay */
 #simplemodal-overlay {
    background-color:black;
    opacity: .75!important;
}
/* Container */
 #simplemodal-container {
    background: url(../img/popup-bg.jpg);
    height:439px;
    width:800px;
    color:#bbb;
    box-shadow: 3px 20px 66px 3px #000;
}
#simplemodal-container .simplemodal-data {
    padding:8px;
}
#simplemodal-container a {
    color:#ddd;
}
#simplemodal-container a.modalCloseImg {
    background:url(../img/close.png) no-repeat;
    width:15px;
    height:15px;
    display:inline;
    z-index:3200;
    position:absolute;
    top:42px;
    right:210px;
    cursor:pointer;
}
.input-group {
    margin: 0 auto;
    width: 42%;
    font-family: Knowledge!important;
}
#simplemodal-container h3 {
    color:#84b8d9;
}
.input-group-btn:first-child>.dropdown-toggle {
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
    background-color: #fff!important;
}
.input-group-btn:last-child>.btn {
    size: 12px!important;
    color: #fff!important;
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
    background-color: #ff9100!important;
    border-color: #ff9100!important;
}
.dropdown-menu>li>a {
    color: #000!important;
}
.open>.dropdown-menu {
    border-top-right-radius: 0px!important;
    border-top-left-radius: 0px!important;
    border-bottom-right-radius: 0px!important;
    border-bottom-left-radius: 0px!important;
}
.modal-header {
    min-height: 16.43px;
    padding: 15px;
    border-bottom: 0px!important;
    margin-top: -15px!important;
}

JavaScript

// Load dialog on page load
   $('#basic-modal-content').modal();

   // Load dialog on click
   $('#basic-modal .basic').click(function (e) {
       $('#basic-modal-content').modal();
       return false;
   });