JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<a href="#modal-test" data-toggle="modal">Trigger Modal</a>

<!-- Hidden modal -->
<div id="modal-test" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Test Modal</h3>
    </div>
    <div class="modal-body">
        <p>Test modal content</p>
        <input type="text" class="span7" placeholder="colors of the rainbow" data-provide="typeahead" data-items="4" data-source="[&quot;red&quot;,&quot;orange&quot;,&quot;yellow&quot;,&quot;green&quot;,&quot;blue&quot;,&quot;violet&quot;]">
    </div>
    <div class="modal-footer">
    xxxxx
    </div>
</div>

CSS

.typeahead {
    position:relative !important;
    z-index:10000 !important;
}