JSFiddle - React, Tailwind, and code Playground

by Alex Cougarman

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#onload-popup">
  Launch modal
</button>

<div class="modal fade" role="dialog" aria-hidden="true" id="onload-popup">
    <div class="modal-dialog center-block">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4> 
        </div>
        <div class="modal-body">
          <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    Content goes here!
                </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

CSS

.modal {
		  top:10%;  
    
		}
        .modal-backdrop {
          top:10%;
        }        
.modal-dialog {
          min-height:92%;
		  width: 95%;
		  height: 92%;
		  padding: 0;
		}
		
		.modal-content {
		  min-height: 100% !important; 
		  height: auto;
		  border-radius: 0;
          overflow:auto;
          position:relative;
		}
.modal-footer {
      position: fixed;
  bottom: 0;
  width: 100%;
}
.modal-content {
    background-size: cover;
	background-image:  url('data:image/jpg;base64,...