JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<a href="#" rel="nofollow"><div class="icon_small facebook"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="#ffffff" d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"/></svg></div></a>

<a href="#" rel="nofollow"><div class="icon_small instagram"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" xmlns:v="https://vecta.io/nano"><path fill="#ffffff" d="M7.03.084c-1.277.06-2.149.264-2.911.563-.789.308-1.457.72-2.123 1.388S.921 3.372.616 4.162C.321 4.926.12 5.799.064 7.076l-.063 4.947.083 4.947c.061 1.276.264 2.148.564 2.911.308.789.72 1.457 1.388 2.123a5.87 5.87 0 0 0 2.129 1.38c.763.295 1.636.496 2.913.552l4.946.063 4.948-.081c1.28-.061 2.147-.265 2.91-.563a5.88 5.88 0 0 0 2.123-1.388 5.88 5.88 0 0 0 1.38-2.128c.296-.763.497-1.636.552-2.912l.063-4.948-.082-4.946c-.061-1.28-.264-2.149-.563-2.912a5.89 5.89 0 0 0-1.388-2.123C21.298 1.33 20.628.921 19.838.617 19.074.321 18.202.12 16.924.065L11.977.001 7.03.084m.14 21.693c-1.17-.051-1.805-.245-2.229-.408-.561-.216-.96-.477-1.382-.895s-.681-.819-.9-1.378c-.164-.423-.362-1.058-.417-2.228l-.079-4.848.061-4.848c.05-1.169.246-1.805.408-2.228.216-.561.476-.96.895-1.382s.818-.681 1.378-.9c.423-.165 1.058-.361 2.227-.417l4.848-.079 4.849.061c1.169.051 1.805.244 2.228.408a3.71 3.71 0 0 1 1.382.895 3.7 3.7 0 0 1 .901 1.379c.165.422.362 1.056.417 2.226l.08 4.848-.061 4.848c-.051 1.17-.245 1.805-.408 2.229-.216.56-.476.96-.895 1.381s-.818.681-1.378.9c-.422.165-1.058.362-2.226.417l-4.849.079c-3.204.007-3.582-.006-4.848-.061m9.782-16.191a1.44 1.44 0 1 0 1.437-1.442 1.44 1.44 0 0 0-1.437 1.442M5.839 12.012c.007 3.403 2.771 6.156 6.173 6.149s6.157-2.77 6.151-6.173-2.771-6.156-6.174-6.15-6.156 2.771-6.15 6.174M8 12.008A4 4 0 1 1 12.008 16 4 4 0 0 1 8 12.008"/></svg></div></a>

<div class="social_icons">

<a href="#" rel="nofollow"><div class="icon facebook"><svg...

CSS

.icon {box-sizing: border-box;width:80px;height:80px;position:relative;padding:15px;text-align:center;border-radius:5px;}

.icon_small {box-sizing: border-box;width:50px;height:50px;position:relative;background-color:pink;padding:10px;text-align:center;border-radius:5px;margin-bottom:10px;}

.icon svg, .icon_small svg {width:auto;height:100%;margin:auto;color:#ffffff;}

.facebook {background-color:#3b5998;} .facebook:hover {opacity:0.9;}
.instagram {background-color:#E4405F;} .instagram:hover {opacity:0.9;}

.social_icons {width:100%;display:flex;justify-content:center;gap:10px;}

@media only screen and (max-width: 480px) {
.icon {box-sizing: border-box;width:50px;height:50px;position:relative;padding:10px;text-align:center;border-radius:5px;}  
}