JSFiddle - React, Tailwind, and code Playground

by mattography

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div id='container'>
    <div id='content'>
        <div id='basic-modal'> <a href='#' class='basic'>Demo</a>

        </div>
        <!-- modal content -->
        <div id="basic-modal-content">
            <div class="modal-header" style="text-align: center;">
                <div class="col-lg-6">
                    <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="#">+1</a>
                                </li>
                                <li><a href="#">Another action</a>
                                </li>
                                <li><a href="#">Something else here</a>
                                </li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</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>
                    <!-- /input-group -->
                </div>
            </div>
        </div>
        <!-- preload the images -->
        <div style='display:none'>
            <img src='img/basic/x.png' alt='' />
        </div>
    </div>
</div>

CSS

.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{
	border-top-right-radius: 0!important;
	border-bottom-right-radius: 0!important;
	background-color: #ff9100!important;
	border-color: #ff9100!important;
}

JavaScript

$('.dropdown-menu').dropdown();