JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

<div class="tpvmthumb">
    <table border="0" cellpadding="0" cellspacing="0" width="920px">
        <tbody>
            <tr>
                <td align="center" valign="top"><span style="font-weight:bold;" class="prodtit">Norsjo</span><a title="Norsjo" href="#"><img src="http://placehold.it/100x100" alt="Norsjo" border="0" /></a>
	<span class="productPrice">6 900.00 </span>

                </td>
                <td align="center" valign="top"><span style="font-weight:bold;" class="prodtit">Steinkjore</span><a title="Steinkjore" href="#"><img src="http://placehold.it/100x100" alt="Steinkjore" border="0" /></a>
	<span class="productPrice">4 900.00 </span>

                </td>
                <td align="center" valign="top"><span style="font-weight:bold;" class="prodtit">Jack Flag</span><a title="Jack Flag" href="#"><img src="http://placehold.it/100x100" alt="Jack Flag" border="0" /></a>
	<span class="productPrice">5 200.00 </span>

                </td>
                <td align="center" valign="top"><span style="font-weight:bold;" class="prodtit">Isfjorden</span><a title="Isfjorden" href="#"><img src="http://placehold.it/100x100" alt="Isfjorden" border="0" /></a>
	<span class="productPrice">5 200.00 </span>

                </td>
                <td align="center" valign="top"><span style="font-weight:bold;" class="prodtit">Sordal</span><a title="Sordal" href="#"><img src="http://placehold.it/100x100" alt="Sordal" border="0" /></a>
	<span class="productPrice">4 500.00 </span>

                </td>
                <td align="center" valign="top"><span style="font-weight:bold;" class="prodtit">Fraktur III</span><a title="Fraktur III" href="#"><img src="http://placehold.it/100x100" alt="Fraktur III" border="0" /></a>
	<span class="productPrice">2 900.00 </span>

                </td>
                <td align="center" valign="top"><span style="font-weight:bold;" class="prodtit">Спортивный к ...</span><a title="Спортивный костюм Halden" href="#"><img...

CSS

.tpvmthumb {
}
.tpvmthumb table {
    padding: 0px;
    margin: 0px;
}
.tpvmthumb table td {
    border:1px solid #ccc;
    padding-bottom:10px;
}
.tpvmthumb .pthumb {
}
.tpvmthumb a:link, .tpvmthumb a:visited, .tpvmthumb a:active {
    display: block;
    width: 100px;
    height: 100px;
    text-align: center;
    margin-top: 10px;
    background-color: #ffffff;
    border: 3px solid #ffffff;
}
.tpvmthumb a:hover {
    border: 3px solid #FFD24E;
}
.tpvmthumb a img {
    height: 100px;
}
.tpvmthumb span {
    display: table-cell;
    color: #ffffff;
    text-align: left;
    line-height: 16px;
    padding: 5px 10px 5px 10px;
    background-color: #191919;
    vertical-align: middle;
    width: 108px;
}
.tpvmthumb br {
    display: none;
}
.tpvmthumb .productprice {
    font-weight: bold;
    color: #ff6600;
}
.tpvmthumb .productPrice, .tpvmthumb .product-Old-Price {
    display: block;
    font-weight: bold;
    color: #191919;
    text-align: center;
    padding: 0px;
    margin-top: 5px;
    background: none;
}
.tpvmthumb .product-Old-Price {
    font-weight: normal;
    font-size: 11px;
    color: #969696;
    margin: 0px;
    margin-bottom: -10px;
    text-decoration: line-through;
}
.tpvmthumb .addtocart_button_module {
    margin-top: 5px;
}

JavaScript

var tpvmthumb = document.querySelector('.tpvmthumb');
if (tpvmthumb) {
    var prefix = 'Вы экономите: ',
        p_lth = prefix.length,
        discounts = tpvmthumb.querySelectorAll('.discount'),
        tr_list = tpvmthumb.querySelectorAll('table:first-child tr'),
        tr_count = tr_list.length;

    for (z = 0; z < discounts.length; ++z) {
        var text = discounts[z].innerHTML;

        discounts[z].innerHTML = ''
            + text.substr(0, p_lth - 1)
            + '<br style="display:inline;">'
            + text.substr(p_lth);
    }

    for (i = 0; i < tr_count; ++i) {
        var span_list = tr_list[i].querySelectorAll('.prodtit'),
            span_count = span_list.length,
            span_heights = [];        

        for (j = 0; j < span_count; ++j) {
            if (j === 0) {
                span_heights = [];
            }
            span_heights.push(span_list[j].clientHeight);
        }

        var max_span_height = Math.max.apply(null, span_heights);

        for (k = 0; k < span_count; ++k) {
            span_list[k].style.cssText = ''
                + 'background-position: 95% 50%;'
                + 'display: table-cell;'
                + 'font-weight: bold;' + 'height: '
                + max_span_height.toString() + 'px;'
                + 'padding: 5px 15px 5px 10px;'
                + 'vertical-align: middle;'
                + 'width: 90px;';
        }
    }
}