JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<link rel="stylesheet" href="https://raw.github.com/twitter/bootstrap/master/docs/assets/css/bootstrap.css">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>


<div id="myModal" class="modal hide fade" style="display: none; ">
            <div class="modal-header">
              <button class="close" data-dismiss="modal">×</button>
              <h3>Modal Heading</h3>
            </div>
            <div class="modal-body">
              <h4>Text in a modal</h4>
              <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>

              <h4>Popover in a modal</h4>
              <p>This <a href="#" class="btn popover-test" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on hover.</p>

              <h4>Tooltips in a modal</h4>
              <p><a href="#" class="tooltip-test" data-original-title="Tooltip">This link</a> and <a href="#" class="tooltip-test" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p>

              <hr>

              <h4>Overflowing text to show optional scrollbar</h4>
              <p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p>
              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
              <p>Cras mattis consectetur purus sit...

CSS

LyohCiAqIEJvb3RzdHJhcCB2Mi4wLjMKICoKICogQ29weXJpZ2h0IDIwMTIgVHdpdHRlciwgSW5jCiAqIExpY2Vuc2VkIHVuZGVyIHRoZSBBcGFjaGUgTGljZW5zZSB2Mi4wCiAqIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMAogKgogKiBEZXNpZ25lZCBhbmQgYnVpbHQgd2l0aCBhbGwgdGhlIGxvdmUgaW4gdGhlIHdvcmxkIEB0d2l0dGVyIGJ5IEBtZG8gYW5kIEBmYXQuCiAqLwoKYXJ0aWNsZSwKYXNpZGUsCmRldGFpbHMsCmZpZ2NhcHRpb24sCmZpZ3VyZSwKZm9vdGVyLApoZWFkZXIsCmhncm91cCwKbmF2LApzZWN0aW9uIHsKICBkaXNwbGF5OiBibG9jazsKfQoKYXVkaW8sCmNhbnZhcywKdmlkZW8gewogIGRpc3BsYXk6IGlubGluZS1ibG9jazsKICAqZGlzcGxheTogaW5saW5lOwogICp6b29tOiAxOwp9CgphdWRpbzpub3QoW2NvbnRyb2xzXSkgewogIGRpc3BsYXk6IG5vbmU7Cn0KCmh0bWwgewogIGZvbnQtc2l6ZTogMTAwJTsKICAtd2Via2l0LXRleHQtc2l6ZS1hZGp1c3Q6IDEwMCU7CiAgICAgIC1tcy10ZXh0LXNpemUtYWRqdXN0OiAxMDAlOwp9CgphOmZvY3VzIHsKICBvdXRsaW5lOiB0aGluIGRvdHRlZCAjMzMzOwogIG91dGxpbmU6IDVweCBhdXRvIC13ZWJraXQtZm9jdXMtcmluZy1jb2xvcjsKICBvdXRsaW5lLW9mZnNldDogLTJweDsKfQoKYTpob3ZlciwKYTphY3RpdmUgewogIG91dGxpbmU6IDA7Cn0KCnN1YiwKc3VwIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgZm9udC1zaXplOiA3NSU7CiAgbGluZS1oZWlnaHQ6IDA7CiAgdmVydGljYWwtYWxpZ246IGJhc2VsaW5lOwp9CgpzdXAgewogIHRvcDogLTAuNWVtOwp9CgpzdWIgewogIGJvdHRvbTogLTAuMjVlbTsKfQoKaW1nIHsKICBtYXgtd2lkdGg6IDEwMCU7CiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTsKICBib3JkZXI6IDA7CiAgLW1zLWludGVycG9sYXRpb24tbW9kZTogYmljdWJpYzsKfQoKYnV0dG9uLAppbnB1dCwKc2VsZWN0LAp0ZXh0YXJlYSB7CiAgbWFyZ2luOiAwOwogIGZvbnQtc2l6ZTogMTAwJTsKICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlOwp9CgpidXR0b24sCmlucHV0IHsKICAqb3ZlcmZsb3c6IHZpc2libGU7CiAgbGluZS1oZWlnaHQ6IG5vcm1hbDsKfQoKYnV0dG9uOjotbW96LWZvY3VzLWlubmVyLAppbnB1dDo6LW1vei1mb2N1cy1pbm5lciB7CiAgcGFkZGluZzogMDsKICBib3JkZXI6IDA7Cn0KCmJ1dHRvbiwKaW5wdXRbdHlwZT0iYnV0dG9uIl0sCmlucHV0W3R5cGU9InJlc2V0Il0sCmlucHV0W3R5cGU9InN1Ym1pdCJdIHsKICBjdXJzb3I6IHBvaW50ZXI7CiAgLXdlYmtpdC1hcHBlYXJhbmNlOiBidXR0b247Cn0KCmlucHV0W3R5cGU9InNlYXJjaCJdIHsKICAtd2Via2l0LWJveC1zaXppbmc6IGNvbnRlbnQtYm94OwogICAgIC1tb3otYm94LXNpemluZzogY29udGVudC1ib3g7CiAgICAgICAgICBib3gtc2l6aW5nOiBjb250ZW50LWJveDsKICAtd2Via2l0LWFwcGVhcmFuY2U6IHRleHRmaWVsZDsKfQoKa...