Using ob_start and ob_get_clean with wordpress shortcode

Question

I am including HTML template in my shortcode by using ob_start & ob_get_clean. Everything works normally but the returned HTML structure is broken.

this is how I am inlcuding the html template in my shortcode function.

function return_cards_grid_section(){
  //this variable is in the same file
  global $subsitesDetails;
  ob_start();

  get_template_part('/templates/views/cards', null, [
        'subsitesDetails' => $subsitesDetails
    ]);

  return ob_get_clean();
}

And below is my code for cards html file

<section class="cards-in-grid-section mt-50">
    <div class="p-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 gap-5">

        <?
        foreach($args['subsitesDetails'] as $subsite) {
            ?>
            <a href="<?= $subsite['url']; ?>" target="_blank" class="block rounded overflow-hidden shadow-lg">
                <img class="w-full h-64 object-cover object-center" src="<?=$imageUrl?>" alt="Mountain">
                <div class="px-6 py-4">
                    <div class="font-bold text-xl mb-2"><?= $subsite['title'] ?></div>
                    <p class="text-pink text-base whitespace-normal"><?= $subsite['description'] ?></p>
                </div>

                <div class="px-6 pt-4 pb-2">
                    <?
                    $tags = ['tag1', 'tag2', 'tag3'];
                    foreach ($tags as $tag){
                    ?>
                        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"><?=$tag; ?></span>
                    <?
                    }
                    ?>
                </div>
            </a>
        <?
        }
        ?>
    </div>
</section>

If I use the same HTML template without using the shortcode, I get the proper HTML structure. But when I try to do the same thing via shortcode and include the HTML template then the output HTML is not properly structured. Trying to figure out the problem for so long but not sure what is wrong in my code.

Output - using the code above. Output 2 - expected output of the code.

Any kind of help would be appreciated. Thanks!

Answer 1

After examining the code using developer tools, I was able to figure out the problem. Code was being wrapped in the pre tags which were causing the code to break its proper structure.

Found the solution for the pre tags issue here which solved the problem.