JSFiddle - React, Tailwind, and code Playground

by sc0rp10

HTML

<div class="w">
	<span class="footer__social-link footer__social-link_vk"></span>
	<span class="footer__social-link footer__social-link_youtube"></span>
    <span class="footer__social-link footer__social-link_vimeo"></span>
	<span class="footer__social-link footer__social-link_google"></span>
	<span class="footer__social-link footer__social-link_fb"></span>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: 100%;
    background-color: #121111;
}
.w {
	padding: 100px;
}

.footer__social-link {
	cursor: pointer;
	display: block;
	width: 183px;
	height: 36px;
	border: 1px solid #363535;
	border-radius: 4px;
	margin-bottom: 2px;
	background-size: 40% 40%;
    background-position: center center;
	background-repeat: no-repeat;
}

.footer__social-link:hover,
.footer__social-link_hover {
	background-color: #181717;
    background-size: 50% 50%;
}

.footer__social-link:active {
	background-color: #363535;
}

.footer__social-link_youtube {
	background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20217.3%20153.1%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M215.7%2033.1s-2.2-15-8.6-21.6c-8.6-8.6-17.2-8.6-21.6-9.3C155.3%200%20109.3%200%20109.3%200s-46%200-76.2%202.2c-4.4.7-13.7.7-21.6%209.3-6.4%206.4-8.6%2021.6-8.6%2021.6S0%2050.4%200%2068.3v16.5C0%20102.7%202.2%20120%202.2%20120s2.2%2015%208.6%2021.6c8.6%208.6%2019.4%208.6%2023.8%209.3%2017.2%201.5%2074%202.2%2074%202.2s46%200%2076.2-2.2c4.4-.7%2013.7-.7%2021.6-9.3%206.4-6.4%208.6-21.6%208.6-21.6s2.2-17.9%202.2-35.2V68.3c.7-17.9-1.5-35.2-1.5-35.2zM87.2%20104.9V43.8l59%2030.9-59%2030.2z%22%2F%3E%3C%2Fsvg%3E');
}
.footer__social-link_fb {
	background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2079.7%20153.1%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M51.8%20153.1V83.3h23.4l3.6-27h-27V38.8c0-7.7%202.3-13.1%2013.5-13.1h14.5V.9C77%20.5%2068.5%200%2058.6%200%2037.9%200%2023.5%2012.6%2023.5%2036v20.3H0v27h23.4v69.8h28.4z%22%2F%3E%3C%2Fsvg%3E');
}
.footer__social-link_google {
	background-image:...