<div class="flex items-center justify-center h-screen bg-gray-900" id="root"></div>
.social-link {
	&:before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		opacity: 0.5;
		background: #fff;
		transition: 0.5s ease;
		animation: blob 12s linear infinite alternate;
	}

	&:hover:before {
		opacity: 1;
	}

	&.twitter:before {
		background: linear-gradient(165deg, #1da1f2, #657786);
	}

	&.facebook:before {
		background: linear-gradient(165deg, #3c5a99, #dfe3ee);
	}

	&.instagram:before {
		background: linear-gradient(165deg, #405de6, #fd1d1d);
	}
}

@keyframes blob {
	0%,
	100% {
		border-radius: 77% 47% 61% 49%;
	}

	20% {
		border-radius: 89% 26% 70% 30%;
	}

	40% {
		border-radius: 56% 93% 56% 94%;
	}

	60% {
		border-radius: 68% 60% 94% 96%;
	}

	80% {
		border-radius: 34% 74% 59% 82%;
	}
}
View Compiled
const SocialLinks = (props) => {
	const socialAccounts = ["twitter", "facebook", "instagram"];
	const socialLinksHTML = socialAccounts.map((item) => (
		<a
			href={`https://${item}.com/beyonce`}
			className={`relative inline-flex items-center justify-center w-32 h-32 text-gray-900 social-link ${item}`}
			key={item}
			target="blank_"
		>
			<i className={`relative z-10 fa fa-3x fa-${item}`} />
		</a>
	));

	return <ul className="flex items-center space-x-12">{socialLinksHTML}</ul>;
};

const SocialApp = (props) => <SocialLinks />;

ReactDOM.render(<SocialApp />, document.getElementById("root"));
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.1/tailwind.min.css

External JavaScript

  1. //unpkg.com/react/umd/react.development.js
  2. //unpkg.com/react-dom/umd/react-dom.development.js