JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div id='slide-left-modal' class="modal hide fade">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Woohoo sliding from the left!</h3>
</div>
<div class="modal-body">
<p>Some fancy slid in text</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
<a class="btn" data-toggle="modal" href="#slide-left-modal" >Launch Modal</a>
CSS
.modal.fade {
left: -25%;
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
-o-transition: opacity 0.3s linear, left 0.3s ease-out;
transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.fade.in {
left: 50%;
}