I have a json object which I have filtered and mapped. However, I need to add a background color to any item that has "Miss" or "Ms" or "Mrs". I am using tailwindcss right now but I know I can do inline styling.

I tried using the if else condition with a .match but it just makes the screen go blank, is there another way?

This is what I have so far

The api i am calling - https://randomuser.me/api/?results=20

const [searchUser, setSearchUser] = useState("")

 <div className="grid grid-cols-4 gap-2 p-2 mt-20">
        {data?.results.filter((val: any)=>{
          if (searchUser === "") {
            return val
          } else if (val.name.first.toLowerCase().includes(searchUser.toLowerCase())) { 
              return val          
          } else if (val.email.toLowerCase().includes(searchUser.toLowerCase())){
            return val
          } else if 
            (val.location.city.toLowerCase().includes(searchUser.toLowerCase())){
              return val
            } 
        }).map((d: any) => (
              
          <div className="border-4">
            <img src={d.picture.medium} />
            <p>
              {" "}
              {d.name.title} {d.name.first} {d.name.last}
            </p>
            <p className="font-bold text-lg font-serif">Gender: {d.gender}</p>
            <p className="font-bold text-lg font-serif">Contact: {d.email}</p>
            <p className="font-bold text-lg font-serif">
              City: {d.location.city}
            </p>
          </div>
        ))}
      </div>

Let me know, thank you.