<div data-content-type="html" data-appearance="default" data-element="main">&lt;section class="shop_by"&gt;
    &lt;div class="container p-6"&gt;
        &lt;h2 class="text-center text-3xl font-bold text-blue-900 mb-6 mt-4 sm:text-left"&gt;Shop by Category Test&lt;/h2&gt;
        &lt;div class="grid md:grid-cols-4 lg:grid-cols-6 gap-7"&gt;

            &lt;!-- Category 1 --&gt;
            &lt;div class="bg-white rounded-lg overflow-hidden shadow-md"&gt;
&lt;img src="{{media url=.renditions/wysiwyg/Bathtub.H03.2k..png}}" alt="" /&gt;

                &lt;div class="py-2 text-center"&gt;
                    &lt;span class="text-sm font-semibold"&gt;Bath&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;!-- Category 2 --&gt;
            &lt;div class="bg-white rounded-lg overflow-hidden shadow-md"&gt;
&lt;img src="{{media url=.renditions/wysiwyg/Classic_Pedestal_Bathroom_Sink.H03.2k.png}}" alt="" /&gt;
                &lt;div class="py-2 text-center"&gt;
                    &lt;span class="text-sm font-semibold"&gt;Basins&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;!-- Category 3 --&gt;
            &lt;div class="bg-white rounded-lg overflow-hidden shadow-md"&gt;
&lt;img src="{{media url=.renditions/wysiwyg/White_Wall_Hung_Toilet_With_Soft_Close_Seat.G03.2k.png}}" alt="" /&gt;
                &lt;div class="py-2 text-center"&gt;
                    &lt;span class="text-sm font-semibold"&gt;Toilets&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;!-- Category 4 --&gt;
            &lt;div class="bg-white rounded-lg overflow-hidden shadow-md"&gt;
&lt;img src="{{media url=.renditions/wysiwyg/Bathroom_Classical_Style_Shower_System.H03.2k.png}}" alt="" /&gt;
                &lt;div class="py-2 text-center"&gt;
                    &lt;span class="text-sm font-semibold"&gt;Showers&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;


            &lt;!-- Category 5--&gt;
            &lt;div class="bg-white rounded-lg overflow-hidden shadow-md"&gt;
&lt;img src="{{media url=.renditions/wysiwyg/Classical_Chrome_Shower.H03.2k.png}}" alt="" /&gt;
                &lt;div class="py-2 text-center"&gt;
                    &lt;span class="text-sm font-semibold"&gt;Shower Enclosures&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- Category 6--&gt;
            &lt;div class="bg-white rounded-lg overflow-hidden shadow-md"&gt;
               &lt;img src="{{media url=.renditions/wysiwyg/Kitchen_Sink.F16.2k.png}}" alt="bath" class="w-full h-32 object-cover"/&gt;
                &lt;div class="py-2 text-center"&gt;
                    &lt;span class="text-sm font-semibold"&gt;Shower Enclosures&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- Category 7--&gt;
            &lt;div class="bg-white rounded-lg overflow-hidden shadow-md"&gt;
               &lt;img src="{{media url=.renditions/wysiwyg/bath.jpeg}}" alt="bath" class="w-full h-32 object-cover"/&gt;
                &lt;div class="py-2 text-center"&gt;
                    &lt;span class="text-sm font-semibold"&gt;Kitchen Sinks&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- Category 8--&gt;
            &lt;div class="bg-white rounded-lg overflow-hidden shadow-md"&gt;
               &lt;img src="{{media url=.renditions/wysiwyg/bath.jpeg}}" alt="bath" class="w-full h-32 object-cover"/&gt;
                &lt;div class="py-2 text-center"&gt;
                    &lt;span class="text-sm font-semibold"&gt;Shower Enclosures&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- Category 9--&gt;
            &lt;div class="bg-white rounded-lg overflow-hidden shadow-md"&gt;
                &lt;img src="{{media url=.renditions/wysiwyg/bath.jpeg}}" alt="bath" class="w-full h-32 object-cover"/&gt;
                &lt;div class="py-2 text-center"&gt;
                    &lt;span class="text-sm font-semibold"&gt;Shower Enclosures&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- Category 10--&gt;
            &lt;div class="bg-white rounded-lg overflow-hidden shadow-md"&gt;
            &lt;img src="{{media url=.renditions/wysiwyg/bath.jpeg}}" alt="bath" class="w-full h-32 object-cover"/&gt;
                &lt;div class="py-2 text-center"&gt;
                    &lt;span class="text-sm font-semibold"&gt;Shower Enclosures&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- Category 11--&gt;
            &lt;div class="bg-white rounded-lg overflow-hidden shadow-md"&gt;
               &lt;img src="{{media url=.renditions/wysiwyg/bath.jpeg}}" alt="bath" class="w-full h-32 object-cover"/&gt;
                &lt;div class="py-2 text-center"&gt;
                    &lt;span class="text-sm font-semibold"&gt;Shower Enclosures&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- Category 12--&gt;
            &lt;div class="bg-white rounded-lg overflow-hidden shadow-md"&gt;
               &lt;img src="{{media url=.renditions/wysiwyg/bath.jpeg}}" alt="bath" class="w-full h-32 object-cover"/&gt;
                &lt;div class="py-2 text-center"&gt;
                    &lt;span class="text-sm font-semibold"&gt;Shower Enclosures&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;

        &lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;</div>