JSFiddle - React, Tailwind, and code Playground

by Dhruvang Gajjar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
<a class="iframe-popup" href="https://cdn2.hubspot.net/hubfs/6730591/Realization%20Feb%202020/News%20PDF/Multitasking_HBR-Blogpost.pdf">Open Iframe PDF</a>
<iframe src="https://cdn2.hubspot.net/hubfs/6730591/Realization%20Feb%202020/News%20PDF/Multitasking_HBR-Blogpost.pdf"></iframe>

JavaScript

$(document).ready(function() {
    $('.iframe-popup').magnificPopup({
        type: 'iframe'
    });
});