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:

export default function Background() {
  return (
    <>
        <section className="relative flex-col h-screen overflow-hidden" 
            style={{
                backgroundImage: `
                  repeating-linear-gradient(
                    90deg,
                    hsla(78, 0%, 63%, 0.05) 0,
                    hsla(78, 0%, 63%, 0.05) 1px,
                    transparent 1px,
                    transparent 104px
                  ),
                  repeating-linear-gradient(
                    0deg,
                    hsla(78, 0%, 63%, 0.05) 0,
                    hsla(78, 0%, 63%, 0.05) 1px,
                    transparent 1px,
                    transparent 104px
                  ),
                  repeating-linear-gradient(
                    0deg,
                    hsla(78, 0%, 63%, 0.08) 0,
                    hsla(78, 0%, 63%, 0.08) 1px,
                    transparent 1px,
                    transparent 26px
                  ),
                  repeating-linear-gradient(
                    90deg,
                    hsla(78, 0%, 63%, 0.08) 0,
                    hsla(78, 0%, 63%, 0.08) 1px,
                    transparent 1px,
                    transparent 26px
                  ),
                  linear-gradient(45deg, #fff, #fff)
                  `
                }}
                >
                <svg className="absolute blur-3xl -right-96 -top-80" fill="none" viewBox="0 0 400 400" height="80%" width="80%" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_10_20)">
                    <g filter="url(#filter0_f_10_20)">
                      <path d="M128.6 0H0V322.2L106.2 134.75L128.6 0Z" fill="#000"></path>
                      <path d="M0 322.2V400H240H320L106.2 134.75L0 322.2Z" fill="#7C87F8"></path>
                      <path d="M320 400H400V78.75L106.2 134.75L320 400Z" fill="#000"></path>
                      <path d="M400 0H128.6L106.2 134.75L400 78.75V0Z" fill="#6551f3"></path>
                    </g>
                  </g>
                  <defs>
                    <filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="720.666" id="filter0_f_10_20" width="720.666" x="-160.333" y="-160.333">
                      <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                      <feBlend in="SourceGraphic" in2="BackgroundImageFix" mode="normal" result="shape"></feBlend>
                      <feGaussianBlur result="effect1_foregroundBlur_10_20" stdDeviation="80.1666"></feGaussianBlur>
                    </filter>
                  </defs>
                </svg>
                
                <svg className="absolute blur-3xl -bottom-44 left-[-30rem]" fill="none" viewBox="0 0 400 400" height="60%" width="60%" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_10_20)">
                    <g filter="url(#filter0_f_10_20)">
                      <path d="M128.6 0H0V322.2L106.2 134.75L128.6 0Z" fill="#000"></path>
                      <path d="M0 322.2V400H240H320L106.2 134.75L0 322.2Z" fill="#7C87F8"></path>
                      <path d="M320 400H400V78.75L106.2 134.75L320 400Z" fill="#000"></path>
                      <path d="M400 0H128.6L106.2 134.75L400 78.75V0Z" fill="#6551f3"></path>
                    </g>
                  </g>
                  <defs>
                    <filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="720.666" id="filter0_f_10_20" width="720.666" x="-160.333" y="-160.333">
                      <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                      <feBlend in="SourceGraphic" in2="BackgroundImageFix" mode="normal" result="shape"></feBlend>
                      <feGaussianBlur result="effect1_foregroundBlur_10_20" stdDeviation="80.1666"></feGaussianBlur>
                    </filter>
                  </defs>
                </svg>

                {your page / component}
                
         </section>      
   </>
  );
}

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.