JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 

<link rel="stylesheet" type="text/css" href="https://dimsemenov.com/plugins/magnific-popup/site-assets/all.min.css?v=1.1.0">
<script src="https://dimsemenov.com/plugins/magnific-popup/dist/jquery.magnific-popup.min.js?v=1.1.0"></script>

<div class="main-articles">

<article class="post-article">
    <h1 class="post-title"><a href="http://example.com/minha-news-01">Post 01 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h1>
    <a class="popup-modal" href="#test-modal"><i class="fa fa-share"></i> Compartilhar</a>
</article>


<article class="post-article">
    <h1 class="post-title"><a href="http://example.com/minha-news-02">Post 02 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h1>
    <a class="popup-modal" href="#test-modal"><i class="fa fa-share"></i> Compartilhar2</a>
</article>


<article class="post-article">
    <h1 class="post-title"><a href="http://example.com/minha-news-03">Post 03 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h1>
    <a class="popup-modal" href="#test-modal"><i class="fa fa-share"></i> Compartilhar</a>
</article>


<article class="post-article">
    <h1 class="post-title"><a href="http://example.com/minha-news-04">Post 04 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h1>
    <a class="popup-modal" href="#test-modal"><i class="fa fa-share"></i> Compartilhar</a>
</article>


<article class="post-article">
    <h1 class="post-title"><a href="http://example.com/minha-news-05">Post 05 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h1>
    <a class="popup-modal" href="#test-modal"><i class="fa fa-share"></i>...

CSS

.post-article {
    border-bottom: 1px solid #eee;
    padding: 10px;
    margin-bottom: 10px;
}
.post-article:nth-child(odd) {
    background: #eee;
}

.post-article:nth-child(even) {
    background: #fafafa;
}
.popup-modal-dismiss {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

JavaScript

$('.popup-modal').on('click', function(){
   
   var comp = $(this).closest("article").find("h1 a"),
       url_ = comp.attr("href"),
       tit_ = comp.text();
       
   $("#test-modal div b").text('Título do post: '+tit_);
   
   var fb_link = "http://www.facebook.com/sharer.php?u="+url_, // facebook
       gp_link = "https://plus.google.com/share?url="+url_, // google+
       li_link = "http://www.linkedin.com/shareArticle?mini=true&amp;url="+url_, // linkedin
       tw_link = "https://twitter.com/share?url="+url_+"&text="+tit_; // twitter
   
   $("#test-modal a").each(function(){
      
      var href = $(this).attr("href");

      if(~href.indexOf("facebook")) $(this).attr("href", fb_link);
      if(~href.indexOf("google")) $(this).attr("href", gp_link);
      if(~href.indexOf("linkedin")) $(this).attr("href", li_link);
      if(~href.indexOf("twitter")) $(this).attr("href", tw_link);
      
   });
   
});

jQuery(function($) {
    $('.popup-modal').magnificPopup({
        type: 'inline',
        preloader: false,
        focus: '#username',
      modal: true
   });
    $(document).on('click', '.popup-modal-dismiss', function (e) {
        e.preventDefault();
        $.magnificPopup.close();
    });
   
});