.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