JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
          />
  </head>
  <body>
    <p>
      <a data-fancybox href="https://www.google.com/maps/search/?api=1&query=Empire+State+Building&query_place_id=ChIJaXQRs6lZwokRY6EFpJnhNNE">#1 Launch Map</a><br />
      <a data-fancybox href="https://www.google.com/maps/place/Googleplex/@37.4220041,-122.0833494,17z/data=!4m5!3m4!1s0x0:0x6c296c66619367e0!8m2!3d37.4219998!4d-122.0840572">#2 Launch Map</a><br />
      <a data-fancybox href="https://maps.google.com/?ll=48.857995,2.294297&spn=0.007666,0.021136&t=m&z=16">#3 Launch Map</a><br />
      <a data-fancybox href="https://www.google.com/maps/@37.7852006,-122.4146355,14.65z">#4 Launch Map</a><br />
      <a data-fancybox href="https://www.google.com/maps/search/Empire+State+Building/">#5 Launch Map</a><br />
      <a data-fancybox href="https://www.google.com/maps/search/?api=1&query=centurylink+field">#6 Launch Map</a><br />
      <a data-fancybox href="https://www.google.com/maps/search/?api=1&query=47.5951518,-122.3316393">#7 Launch Map</a>
    </p>
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
    <script>
      Fancybox.bind('[data-fancybox]', {
        // Custom options for all galleries
      });    
    </script>
  </body>
</html>