Difficulty mapping background images in React app with Tailwind CSS


I am currently working on a React app where I’m using Tailwind CSS for styling. I have an array of items (trending), and I’m trying to map through them to create a set of divs with background images. However, I’m facing difficulties with the mapping and setting responsive background images based on the screen size.

{trending.map((value, i) => <div className={`w-[240px] h-[100px] bg-[url(${value.thumbnail.trending?.small})]`}

                        <svg width="17" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M15.387 0c.202 0 .396.04.581. .3-.086.573-.258.82a1.49 1.49 0 0 1-.694.542 1.49 1.49 0 0 1-.581.106c-.423 0-.79-.141-1.098-.423L8.46 13.959l-5.83 5.605c-.317.29-.682.436-1.097.436-.202 0-.396-.04-.581-.119a1.49 1.49 0 0 1-.694-.542A1.402 1.402 0 0 1 0 18.52V1.481c0-.3.086-.573.258-.82A1.49 1.49 0 0 1 .952.119C1.137.039 1.33 0 1.533 0h13.854Z" fill="#5A698F" /></svg>                           <div className="">
                            <div><span className="text-primaryText">{value.category}</span><img src="" alt="" /><span></span></div>


I tried inline styling but didn’t work.

This is a question very specific to React/Tailwind that you would best ask in a community for those tools. While someone here may have the knowledge to assist you, this community is intended for issue relating to building and deploying of sites, debugging functions, and other Netlify specific questions. Yours is—on the face of it—nothing to do with Netlify.