JSFiddle - React, Tailwind, and code Playground

HTML

<div id="imgBody"></div>

CSS

img {
  width: 50%;
  height: 50%;
}

JavaScript

const useOgImage = ({
  title,
  description
}) => {
  const ogParams = {
    fontFamily: 'Roboto',
    title, // use the title
    titleTailwind: 'font-bold text-6xl text-white mt-3',
    text: description, // use description
    textTailwind: 'text-2xl mt-4 text-gray-500',
    logoUrl: 'https://blog.rrrm.co.uk/img/logo.svg',
    logoTailwind: 'text-center text-center m-auto',
    bgTailwind: 'bg-gray-900',
    footer: 'blog.rrrm.co.uk',
    footerTailwind: 'text-teal-600',
    t: '1673017484197',
    refresh: '1',
  };

  // convert the object into a string that's readeable by the url
  const paramsToString = Object.entries(ogParams)
    .map(([key, val]) => {
      return `${key}=${encodeURIComponent(val)}`;
    })
    .join('&')

  // return the full image url
  return `https://og.tailgraph.com/og?${paramsToString}` 
};

console.log('url', useOgImage({
  title: 'Title',
  description: 'New description'
}))


const image = document.createElement("img");
const imageParent = document.getElementById("imgBody");
image.id = "id";
image.className = "class";
image.src = useOgImage({
  title: 'Title',
  description: 'New description'
}); // image.src = "IMAGE URL/PATH"
imageParent.appendChild(image);