JSFiddle - React, Tailwind, and code Playground

HTML

<div class="share-buttons-wrapper">
      <div class="buttons-wrapper">
        <div class="facebook share-button">F</div>
        <div class="twitter share-button">T</div>
        <div class="rendered-buttons">
            <div class="fb-like" data-send="false" data-width="450" data-show-faces="false"></div>
            <a href="https://twitter.com/share" class="twitter-share-button"></a>
        </div>
      </div>
    </div>

CSS

.share-buttons-wrapper{
	float:left;
	border-left:1px solid #dfdfdf;
	height:75px;
	width:55px;
	padding-left:20px;
    position:relative;
}


	.share-buttons-wrapper > .buttons-wrapper
	{
		cursor:pointer;
		float:left;
		height:100%;
		width:55px;
	}

	.share-buttons-wrapper  > .buttons-wrapper > div
	{
		float:left;
		height:20px;
		margin:0;
		padding:24px 0 0;
		position:relative;
		width:24px;
	}

		.share-buttons-wrapper > .buttons-wrapper > div.facebook
		{
			background:url(../images/social-sprite.png) no-repeat -40px bottom;
		}

		.share-buttons-wrapper > .buttons-wrapper > div.twitter
		{
			background:url(../images/social-sprite.png) no-repeat 0 bottom;	
		}


		.share-buttons-wrapper  > .buttons-wrapper > .rendered-buttons
		{
			height:100%;
			overflow: hidden;
			padding:0;
			position: absolute;
			top:0px;
			width:55px;
			visibility: hidden;
		}
.fb-like:hover,
twitter-share-button {visibility: visible;}


	.share-buttons-wrapper  > .buttons-wrapper:hover > .rendered-buttons
	{
		visibility: visible;
	}

	.share-buttons-wrapper .rendered-buttons > div
	{
		margin-left:1px;
		width:37px;
	}
	.share-buttons-wrapper .rendered-buttons > *
	{

		width:53px !important;
		overflow: hidden;
	}

JavaScript

/* hover fix for iframe issue */