JSFiddle - React, Tailwind, and code Playground

by Sasá Rafalsky

HTML

<li id="item-${product.id}" class="grid__item scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: ${index+1};">
  <div class="card-wrapper product-card-wrapper underline-links-hover">
    <div class="card card--standard card--media" style="--ratio-percent: 100.0%;">
      <div class="card__inner color-scheme-2 gradient ratio" style="--ratio-percent: 100.0%;">
        <div class="card__media">
          <div class="media media--transparent media--hover-effect">
            <img srcset="${product.image}?v=1719869064&amp;width=165 165w,${product.image}?v=1719869064&amp;width=360 360w,${product.image}?v=1719869064&amp;width=533 533w,${product.image}?v=1719869064&amp;width=720 720w,${product.image}?v=1719869064 800w
                                    " src="${product.image}?v=1719869064&amp;width=533" sizes="(min-width: 1600px) 367px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt="${product.title}" class="motion-reduce" width="800" height="800">

            <img srcset="${product.imageHover}?v=1719869064&amp;width=165 165w,${product.imageHover}?v=1719869064&amp;width=360 360w,${product.imageHover}?v=1719869064&amp;width=533 533w,${product.imageHover}?v=1719869064&amp;width=720 720w,${product.imageHover}?v=1719869064 800w
                                    " src="${product.imageHover}?v=1719869064&amp;width=533" sizes="(min-width: 1600px) 367px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" alt="${product.title}" class="motion-reduce" width="800" height="800">
          </div>
        </div>

        <div class="card__content">
          <div class="card__information">
            <h3 class="card__heading">
              <a href="/products/${product.handle}" id="StandardCardNoMediaLink-template--22932965720382__product-grid-11294260920638" class="full-unstyled-link"...