JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height: 0; width: 0; position: absolute; visibility: hidden;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="200.4204" y1="2.6162" x2="200.4204" y2="278.9292">
                        <stop  offset="0" style="stop-color:#E52D27"/>
                        <stop  offset="1" style="stop-color:#BF171D"/>
                    </linearGradient>
		<symbol id="facebook" viewBox="0 0 400 400">
			<path id="Blue_1_" fill="#3D5A99" d="M376.199,397c12.039,0,21.801-9.762,21.801-21.801V23.801C398,11.759,388.238,2,376.199,2H24.8
				C12.756,2,2.999,11.759,2.999,23.801v351.398C2.999,387.238,12.756,397,24.8,397H376.199z"/>
			<path id="f" fill="#FFFFFF" d="M275.542,397V244.035h51.347l7.686-59.613h-59.032v-38.061c0-17.26,4.793-29.021,29.545-29.021
				l31.565-0.015V64.008c-5.46-0.726-24.197-2.349-45.998-2.349c-45.513,0-76.673,27.781-76.673,78.8v43.963h-51.477v59.613h51.477V397
				H275.542z"/>
		</symbol>
		<symbol id="twitter" viewBox="0 0 400 400">
			<rect x="0" y="0" fill="#55ACEE" width="400" height="400"/>
			<path fill="#FFFFFF"...