JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Find Data</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <p>Search data across Dataverse Repositories through Harvard Dataverse.</p>
                        <div class="form-group">
                            <input type="search" class="form-control" id="searchInput" placeholder="Search Data..." />
                        </div>
                        <button type="submit" class="btn btn-primary" onclick="window.open('http://thedata.harvard.edu/dvn/faces/StudyListingPage.xhtml?mode=2&amp;searchValue=' + document.getElementById('searchInput').value + '', '_blank');"><span class="glyphicon glyphicon-search"></span> Find</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');