SVG Image display issue

Header component

import React from 'react'

const Header = () => {
  return (
    <div>
        {/* Main-header */}
        <header className=''>
            {/* Header-background */}
            {/* <div className='w-full h-screen border-2 border-blue-500 bg-gradient-to-b from-very-light-red-gr to-light-red-gr'> */}

                {/* Header-svg */}
                <div className='bg-svg-mobile bg-350'>
                </div>

            {/* </div> */}
        </header>
    </div>
  )
}

export default Header

Tailwindconfig file

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['src/*.{js,jsx,html}',
            'src/components/*.{js,jsx,html}'],
  theme: {
    extend: {
      colors: {
        'light-red-cta-text': 'hsl(356, 100%, 66%)',
        'very-light-red-cta-hv-bg': 'hsl(355, 100%, 74%)',
        'very-dark-blue-hd': 'hsl(208, 49%, 24%)',
        'white': 'hsl(0, 0%, 100%)',
        'grayish-blue-footer': 'hsl(240, 2%, 79%)',
        'very-dark-grayish-blue': 'hsl(207, 13%, 34%)',
        'very-dark-black-blue-fbg': 'hsl(240, 10%, 16%)',
        'very-light-red-gr': 'hsl(13, 100%, 72%)',
        'light-red-gr': 'hsl(353, 100%, 62%)',
        'very-dark-gray-blue-gr': 'hsl(237, 17%, 21%)',
        'very-dark-desaturated-blue-gr': 'hsl(237, 23%, 32%)',
      },
      fontFamily: {
        'Overpass': ['Overpass', 'sans-serif'],
        'Ubuntu': ['Ubuntu', 'sans-serif']
      },
      backgroundImage: {
        'svg-mobile': "url('/src/images/bg-pattern-intro-mobile.svg')",
      },
      backgroundSize: {
        '350': '350%'
      }
  },
  plugins: [],
}

}

React folder structure

I am trying to add an svg in react but unable to do so. I have tried every possible way I knew but unable to do so. I am new to React.
Please tell me how can I do the same.

>Solution :

I think by adding height and width to the image you will be there. Something like this:

<div className='bg-svg bg-350 w-full h-screen"></div>