JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://webdevelopersource.net/js/jquery-1.7.0.min.js"></script>
<script src="http://webdevelopersource.net/js/featherlight.js"></script>
<link rel="stylesheet" href="http://webdevelopersource.net/js/featherlight.css">
<link rel="stylesheet" href="http://webdevelopersource.net/js/featherlight-style.css">
<button id="openbox" href="#fl1">Load Lightbox on click event</button>
<div class="lightbox" id="fl1">
     <h2>Delete Item</h2>

    <div class="row">
        <div class="twelve columns"> <strong>Are you Sure?</strong>

            <br>blubblub?</div>
    </div>
    <div class="right"> <a href="#" class="btn btn_gray no text_none" id="close_button">Close</a>
 <a href="#" class="btn btn_red text_none">Yes</a>

    </div>
</div>

CSS

@media all {
			    .lightbox {
			        display: none;
			    }
			    .fl-page h1, .fl-page h3, .fl-page h4 {
			        font-family:'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', Arial, Helvetica, sans-serif;
			        font-weight: 100;
			        letter-spacing: 1px;
			    }
			    .fl-page h1 {
			        font-size: 110px;
			        margin-bottom: 0.5em;
			    }
			    .fl-page h1 i {
			        font-style: normal;
			        color: #ddd;
			    }
			    .fl-page h1 span {
			        font-size: 30px;
			        color: #333;
			    }
			    .fl-page h3 {
			        text-align: right;
			    }
			    .fl-page h3 {
			        font-size: 15px;
			    }
			    .fl-page h4 {
			        font-size: 2em;
			    }
			    .fl-page .jumbotron {
			        margin-top: 2em;
			    }
			    .fl-page .doc {
			        margin: 2em 0;
			    }
			    .fl-page .btn-download {
			        float: right;
			    }
			    .fl-page .btn-default {
			        vertical-align: bottom;
			    }
			    .fl-page .btn-lg span {
			        font-size: 0.7em;
			    }
			    .fl-page .footer {
			        margin-top: 3em;
			        color: #aaa;
			        font-size: 0.9em;
			    }
			    .fl-page .footer a {
			        color: #999;
			        text-decoration: none;
			        margin-right: 0.75em;
			    }
			    .fl-page .github {
			        margin: 2em 0;
			    }
			    .fl-page .github a {
			        vertical-align: top;
			    }
			    .fl-page .marketing a {
			        color: #999;
			    }
			    /* override default feather style... */
			    .fixwidth {
			        background: rgba(256, 256, 256, 0.8);
			    }
			    .fixwidth .featherlight-content {
			        width: 500px;
			        padding: 25px;
			        color: #fff;
			        background: #111;
			    }
			    .fixwidth .featherlight-close {
			        color: #fff;
			        background: #333;
			    }
			}
			@media(max-width: 768px) {
			    .fl-page h1 span {
			        display: block;
			  ...

JavaScript

$('button.#openbox').featherlight({
    targetAttr: 'href',
    beforeOpen: function (event) {
        alert('beforeOpen');
    },
    afterOpen: function (event) {
        alert('afterOpen');
    }
});