JSFiddle - React, Tailwind, and code Playground

by Himanshu Joshi

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="social-section col-md-6">
  <div class="share-text col-xs-6 col-md-12">
    Share this:
  </div>
  <div class="social-header col-xs-6 col-md-12">
    <a class="icon" href="">
						<span class="btn-white">
							<i class="fa fa-twitter twitter-large"></i>
						</span>
					</a>
    <a class="icon" href="">
						<span class="btn-white">
							<i class="fa fa-facebook facebook-large"></i>
						</span>
					</a>
    <a class="icon" href="">
						<span class="btn-white">
							<i class="fa fa-linkedin linkedin-large"></i>
						</span>
					</a>
  </div>
</div>

JavaScript

$(".social-header .icon .fa-twitter").on("click", (event) => {
  open_popup("https://twitter.com/share?url=" + encodeURIComponent(document.location.href) +
    "&text=" + encodeURIComponent($(document).find("header-title").text()), 500, 400, true);
});
$(".social-header .icon .fa-linkedin").on("click", (event) => {
  open_popup("https://www.linkedin.com/shareArticle?mini=true&url=jsfiddle.net", 500, 400, true);
});
$(".social-header .icon .fa-facebook").on("click", (event) => {
  open_popup("https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(document.location.href), 600, 350);
});

function open_popup(url, width, height, scroll) {
  var left = ($(window).width() - width) / 2,
    top = ($(window).height() - height) / 2,
    opts = 'status=1,' + (scroll ? 'scrollbars=1,' : '') + 'width=' + width + ',height=' + height + ',top=' + top + ',left=' + left;

  window.open(url, "popUp", opts);
}