JSFiddle - React, Tailwind, and code Playground

HTML

{if $dirs}
{$shop_config=ConfigLoader::byModule('shop')}
<div class="mt40 tabProducts productList">
    <div class="tabs">
	<ul class="tabList">
        {foreach $dirs as $dir}
        <a class="cat-title" href="{$dir->getUrl()}">{$dir.name}</a>
        {/foreach}
    </ul>
	</div>
    {foreach $dirs as $dir}
    <div class="tab {if $dir@first}act{/if} frame{$dir@iteration}">
        <ul class="products">
            {foreach $products_by_dirs[$dir.id] as $product}
            <li {$product->getDebugAttributes()} data-id="{$product.id}">
                {$main_image=$product->getMainImage()}
                <a href="{$product->getUrl()}" class="image">{if $product->inDir('new')}<i class="new"></i>{/if}<img src="{$main_image->getUrl(300,150)}" alt="{$main_image.title|default:"{$product.title}"}"/></a>
                    <a href="{$product->getUrl()}" class="title">{$product.title}</a>
                    <p class="price">{$product->getCost()} {$product->getCurrency()}
                        {$last_price=$product->getOldCost()}
                        {if $last_price>0}<span style='color:red;text-decoration:line-through'><span class="last" style='color:#999;'>{$last_price} {$product->getCurrency()}</span></span>{/if}</p>

				<div class="hoverBlock">
                        <div class="back"></div>
                        <div class="main">


{$tabs=[]}
        {$properties = $product->fillProperty()}
        {if $properties || $product->isOffersUse()} {$tabs["property"] = 'Характеристики'} {/if}




        <div>
            <ul class="">
                {foreach $tabs as $key=>$tab}
               {/foreach}
            </ul>

            {if $tabs.property}
            <div class="tab tab-property {if $act_tab == 'property'}act{/if}">
                {foreach $product.offers.items as $key=>$offer}
                {if $offer.propsdata_arr}
                <div class="offerProperty propertyGroup{if $key>0} hidden{/if}" data-offer="{$key}">
                    <p...