We’re utilizing Sanity, Next.js, and Tailwind CSS in our project. I’ve added a field named ‘raw_html’ in Sanity, which contains some HTML content along with sample data

<div class="p-4 bg-gray-100 rounded-lg">
  <h1 class="text-3xl font-bold mb-4">Hello World</h1>
  <p class="mb-2">This is a paragraph with <span class="text-blue-500">Tailwind CSS</span> classes.</p>
  <ul class="list-disc ml-5">
    <li class="mb-1">First item</li>
    <li class="mb-1">Second item</li>
    <li class="mb-1">Third item</li>
  </ul>
</div>

However, this content isn’t displaying correctly on the frontend. When I embed the HTML directly into the code, it appears fine. Could there be a specific reason for this issue or a potential solution? Thanks in advance.

Here is the code

import { useSite } from '@/app/contexts/SiteContext'; // Ensure the correct import
function Header() {
    const site = useSite();
    if (!site) return <div>Loading...</div>;
    return (
        <div className="m-10">
            <div className="text-center text-red-500">Tailwind CSS is working!</div>
            <div className="prose max-w-none" dangerouslySetInnerHTML={{ __html: site.header.templateDetails.raw_html }} />
        </div>
    );
}

export default Header;