JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://lokeshdhakar.com/projects/lightbox2/js/lightbox-2.6.min.js"></script>
<link rel="stylesheet" href="http://lokeshdhakar.com/projects/lightbox2/css/lightbox.css">
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/img/demopage/image-1.jpg" data-lightbox="example-1">
    <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/img/demopage/thumb-1.jpg" alt="thumb-1" width="150" height="150" />
</a>

CSS

.filter-blur {
    border: #add solid 5px;
}

JavaScript

$('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(e) {
    
    $('#lightbox .lb-image')
        .addClass('filter-blur')
        .data('pb-blur-amount', 5);
});