JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<a class="fancybox fancybox-trigger" data-fancybox-type="iframe" href="http://www.amiestudycircle.com/download/examform_online_sample.pdf">Click Me</a>

CSS

.fancybox-trigger {
    border: 1px solid #333;
    color: #333;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    line-height: 24px;
    padding: 5px 7px;
}

.fancybox-trigger:hover {
    color: orangered;
}

JavaScript

$(".fancybox").fancybox({
    afterLoad: function() {
        setTimeout(function(){$.fancybox.close();}, 5000);
    }
});