JSFiddle - React, Tailwind, and code Playground

HTML

<div class="share-wrapper">
<a id="share" href="#" data-share="https://www.facebook.com/sharer/sharer.php?u=http://flatuicolors.com/" class="groupBtn">Share in Group</a>
    
<a id="share" href="#" data-share="https://www.facebook.com/sharer/sharer.php?u=http://flatuicolors.com/" class="friendBtn">Share on Friend Timeline</a>
</div>

CSS

.share-wrapper{
    display:table;
    margin:20px auto;
}
a {
    margin:2px;
}
.groupBtn {
    background-color:#bd1550;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:13px;
	font-weight:bold;
	padding:6px 12px;
	text-decoration:none;
}

.groupBtn:active {
	position:relative;
	top:1px;
}

.friendBtn {
	background-color:#f33c4e;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:13px;
	font-weight:bold;
	padding:6px 12px;
	text-decoration:none;
}

.friendBtn:active {
	position:relative;
	top:1px;
}

JavaScript

$('[id="share"]').click( function () {

    window.open( $(this).data('share'), 
                 'facebook-share-dialog', 
                 'width=626,height=436' ); 
})