<div class="grid place-items-center min-h-screen">
  <button id="share-button" class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">Share me</button>
</div>
const shareButton = document.getElementById("share-button");

shareButton.addEventListener("click", (event) => {
  if ("share" in navigator) {
    navigator
      .share({
        title: "Look at this native web share",
        url:
          "https://daily-dev-tips.com/posts/using-the-native-web-share-javascript-api/"
      })
      .then(() => {
        console.log("Callback after sharing");
      })
      .catch(console.error);
  } else {
    alert(`Sorry this browser doesn't have native share`)
  }
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.