JSFiddle - React, Tailwind, and code Playground

by Henry

HTML

<script src="bootstrap.min.css "></script>
<script src="bootstrap.min.js"></script>
 <div class="container">
            <div class="btn-group btn-input clearfix">
                <button type="button" class="btn btn-default dropdown-toggle modified" data-toggle="dropdown">
                    <span data-bind="label">Select the Module</span>
                </button>
                <button type="button" class="btn btn-default dropdown-toggle modified_caretsize" data-toggle="dropdown">
                    <span class="caret ccret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Routine Care</a></li>
                    <li><a href="#">Nurse Care</a></li>
                    <li><a href="#">Emergency Care</a></li>
                    <li><a href="#">Urgent Care</a></li>
                    <li><a href="#">Speciality Care</a></li>
                    <li><a href="#">Health Access</a></li>
                </ul>
            </div>
        </div>
        <br/><br/>

CSS

.btn-input {
    display: block; 
}
.btn-input .btn.form-control {
    text-align: left;    
}
.btn-group>.btn+.modified_caretsize{
    padding-right: 18px;
    padding-left: 18px;
    padding-top: 18px;
    padding-bottom: 8px;
}
.ccret{
    position: absolute;
    right: 25%;
    top: -1%;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 11px solid #000000;
}