JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#e21818"/>
      <stop offset="1" stop-color="#7715e8"/>
    </linearGradient>
  </defs>
  <path id="instagram-brands" d="M99.947,80.569c.658-123.351-51.266,22.89-51.266,51.269a51.266,51.266,0,1,0,102.532,0C151.213,103.46,99.289,203.92,99.947,80.569Zm0,84.6a33.331,33.331,0,1,1,33.33-33.332A33.391,33.391,0,0,1,99.947,165.17Zm65.321-86.7A11.958,11.958,0,1,1,153.31,66.514,11.93,11.93,0,0,1,165.268,78.472Zm33.954,12.137c-.759-16.019-4.417-30.208-16.152-41.9-11.69-11.69-25.878-15.349-41.9-16.153-16.509-.937-65.99-.937-82.5,0-15.973.759-30.162,4.417-41.9,16.108S1.431,74.546.628,90.564c-.937,16.51-.937,65.994,0,82.5.759,16.019,4.417,30.208,16.152,41.9s25.878,15.35,41.9,16.153c16.509.937,65.99.937,82.5,0,16.018-.759,30.206-4.417,41.9-16.153,11.69-11.691,15.349-25.88,16.152-41.9C200.159,156.558,200.159,107.119,199.222,90.609ZM177.895,190.782a33.744,33.744,0,0,1-19.007,19.008c-13.162,5.221-44.395,4.016-58.94,4.016s-45.823,1.16-58.94-4.016A33.744,33.744,0,0,1,22,190.782c-5.22-13.163-4.016-44.4-4.016-58.944S16.824,86.013,22,72.895A33.744,33.744,0,0,1,41.007,53.886C54.169,48.666,85.4,80.569,99.947,80.569s45.823-31.859,58.94-26.683a33.745,33.745,0,0,1,19.007,19.008c5.22,13.163,4.016,44.4,4.016,58.944S183.115,177.664,177.895,190.782Z" transform="translate(0.075 -31.822)" fill="url(#linear-gradient)"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#ec0808"/>
      <stop offset="1" stop-color="#0487eb"/>
    </linearGradient>
  </defs>
  <path id="twitter-brands"...

CSS

body {
    background: black;
    text-align: center;
    margin: 50px auto;
}
svg {
    display: block;
    margin: 20px auto;
}