JSFiddle - React, Tailwind, and code Playground

by kirito0709

HTML

<div class="detail_img">
  <img src="https://seasonkrasoty.ru/upload/iblock/209/209d8f2fed381faad6e7313cd1372e60.jpg">
  <div class="pa h100 w100 t0 l0 r0">
    <svg height="100%" width="100%">
      <text x="20" y="40" fill="red">Крышка</text>
      <polyline points="20 50,80 50,210 150" style="fill:none;stroke:#ff0000;stroke-width:3" />
      <text x="20" y="440" fill="red">Надпись</text>
      <polyline points="20 450,80 450,210 330" style="fill:none;stroke:#ff0000;stroke-width:3" />
      <text x="600" y="180" fill="red">Крестик</text>
      <polyline points="260 260, 600 190,  658 190" style="fill:none;stroke:#ff0000;stroke-width:3" />
      
  Sorry, your browser does not support inline SVG.
</svg>
<div class="newsvg pa">
<svg viewBox="0 0 200 200">
<path fill="#FFFFFF" stroke="#000000" d="
      M50,50
      L100,100      
      " />
</svg>
</div>
  </div>
</div>

CSS

.detail_img {
  position: relative;
}

.detail_img img {
  width: 500px;
 max-width: 100%;
}

.pa {
position: absolute;
}

.h100 {
  height: 100%;
}

.w100 {
  width: 100%;
}

.t0 {
  top: 0;
}

.newsvg svg {
  position: relative;
}