How to implement:

With tailwind installed in your project tutorial, implement these tailwind classes in your parent div where it will reflect the background.

Code:

import React from 'react';

const Background: React.FC = () => {
  return (
    <div
      style={{
        minHeight: '100vh',
        backgroundColor: '#000000',
        backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Cellipse fill='none' stroke-width='10.1' stroke-opacity='0.49' id='a' rx='600' ry='450'/%3E%3C/defs%3E%3Cg transform='scale(0.775)' style='transform-origin:center'%3E%3Cg transform='rotate(174.6 0 0)' style='transform-origin:center'%3E%3Cg transform='rotate(-160 0 0)' style='transform-origin:center'%3E%3Cg transform='translate(1000 750)'%3E%3Cuse stroke='%2327002B' href='%23a' transform='rotate(-60 0 0) scale(0.4)'/%3E%3Cuse stroke='%23300030' href='%23a' transform='rotate(-50 0 0) scale(0.5)'/%3E%3Cuse stroke='%233a0034' href='%23a' transform='rotate(-40 0 0) scale(0.6)'/%3E%3Cuse stroke='%23440038' href='%23a' transform='rotate(-30 0 0) scale(0.7)'/%3E%3Cuse stroke='%234e003c' href='%23a' transform='rotate(-20 0 0) scale(0.8)'/%3E%3Cuse stroke='%2359003f' href='%23a' transform='rotate(-10 0 0) scale(0.9)'/%3E%3Cuse stroke='%23640041' href='%23a'/%3E%3Cuse stroke='%236f0043' href='%23a' transform='rotate(10 0 0) scale(1.1)'/%3E%3Cuse stroke='%237a0044' href='%23a' transform='rotate(20 0 0) scale(1.2)'/%3E%3Cuse stroke='%23850045' href='%23a' transform='rotate(30 0 0) scale(1.3)'/%3E%3Cuse stroke='%23910044' href='%23a' transform='rotate(40 0 0) scale(1.4)'/%3E%3Cuse stroke='%239c0044' href='%23a' transform='rotate(50 0 0) scale(1.5)'/%3E%3Cuse stroke='%23a70042' href='%23a' transform='rotate(60 0 0) scale(1.6)'/%3E%3Cuse stroke='%23b10040' href='%23a' transform='rotate(70 0 0) scale(1.7)'/%3E%3Cuse stroke='%23bc003e' href='%23a' transform='rotate(80 0 0) scale(1.8)'/%3E%3Cuse stroke='%23c6003a' href='%23a' transform='rotate(90 0 0) scale(1.9)'/%3E%3Cuse stroke='%23d00036' href='%23a' transform='rotate(100 0 0) scale(2)'/%3E%3Cuse stroke='%23d90032' href='%23a' transform='rotate(110 0 0) scale(2.1)'/%3E%3Cuse stroke='%23e2002c' href='%23a' transform='rotate(120 0 0) scale(2.2)'/%3E%3Cuse stroke='%23ea0026' href='%23a' transform='rotate(130 0 0) scale(2.3)'/%3E%3Cuse stroke='%23f2001e' href='%23a' transform='rotate(140 0 0) scale(2.4)'/%3E%3Cuse stroke='%23f90013' href='%23a' transform='rotate(150 0 0) scale(2.5)'/%3E%3Cuse stroke='%23FF0000' href='%23a' transform='rotate(160 0 0) scale(2.6)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
        backgroundAttachment: 'fixed',
        backgroundSize: '105%',
        backgroundPosition: 'center',
      }}
    >
        
    </div>
  );
};

export default Background;

View background:

Responsive: Mobile and desktop:

Note

If this background has served you in any way, consider following me on github or supporting me to continue working at BacksEasy.

Any questions, criticisms or improvements, please suggest them through my Linkdin..