JSFiddle - React, Tailwind, and code Playground

by unloco

HTML

<svg width="767" height="860" class="dsn-canvas-image dsn-canvas-base dsn-canvas-float" preserveAspectRatio="none" viewport="0 0 767 860" style="display: inline;">
    <defs>
        <filter id="product-colorizer" class="dsn-product-colorizer">
            <feColorMatrix type="saturate" values="0"></feColorMatrix>
            <feComponentTransfer>
                <feFuncR type="linear" slope="1"></feFuncR>
                <feFuncG type="linear" slope="1"></feFuncG>
                <feFuncB type="linear" slope="1"></feFuncB>
            </feComponentTransfer>
        </filter>
        <filter id="product-texture" class="dsn-product-texture" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
            <feImage href="https://dev.net/git/presta17_designer/designer/color/smallest.jpg" result="texture-img" width="24" height="24"></feImage>
            <feTile in="texture-img" x="0" y="0" width="100%" height="100%" result="tile"></feTile>
            <feComposite in2="SourceGraphic" operator="in" in="tile" result="composite"></feComposite>
            <feBlend in="SourceGraphic" in2="composite" mode="multiply"></feBlend>
        </filter>
    </defs>
    <g class="dsn-texture" filter="url(#product-texture)">
        <g class="dsn-colorize">
            <image x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" href="https://dev.net/git/presta17_designer/designer/product_images/canvas/1_1_1.png"></image>
        </g>
    </g>
</svg>