JSFiddle - React, Tailwind, and code Playground

by Raj Shekhar

HTML

<h1 class="entry-title">Web Share API </h1>
<div class="share">
  <div id="share-btn" class="share-btn web-share">Share</div>
  <div id="share-fallback" class="share-buttons">
    <a class="share-btn fb" href="https://www.plants.com/p/majesty-palm-floor-plant-157652" target="_blank">Share</a>
  </div>
</div>

CSS

html {
  box-sizing: border-box;
}

*, ::after, ::before {
  box-sizing: inherit;
}

body {
  font-family: system-ui, sans-serif;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}

img {
  max-width: 100%;
}

.share {
  margin: 2em 0;
}

.share-buttons {
  display: none;
  justify-content: space-between;
}

.share-btn {
  display: inline-block;
  padding: 8px 20px;
  background: #00ad45;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  flex-grow: 1;
  text-align: center;
}

.share-btn:hover {
  opacity: .85;
  color: #fff;
}

.share-btn.web-share {
  cursor: pointer;
  width: 100%;
}

.share-btn.tw {
  background: #1da1f2;
  margin: 0 8px 0 0;
}

.share-btn.fb {
  background: #3b5998;
  margin: 0 8px 0 0;
}

.share-btn.pk {
  background: #ef4056;
}

JavaScript

var shareBtn = document.getElementById('share-btn');
    shareFallback = document.getElementById('share-fallback');
    pageTitle = document.querySelector('h1.entry-title').textContent;
    pageUrl = "https://www.plants.com/p/majesty-palm-floor-plant-157652";

shareBtn.addEventListener("click", function(ev) {
  if (navigator.share) {
    navigator.share({
        text: pageTitle,
        url: pageUrl
      });
  } else {
    shareFallback.style.display = 'flex';
    shareBtn.style.display = 'none';
  }
});