JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="1300" height="1700">
  <!-- Fonts styles -->
  <style>
    .normal { font: bold 24px sans-serif; }
    .small { font: 16px sans-serif; }
    .big { font: bold 30px sans-serif; }

    .red { fill:red; }
    .blue { fill:blue; }
    .green { fill:green; }
  </style>
  <!-- Buttons positions  -->
  <style>
    .WP_REL { transform: translate(300px,367px); }
    .CMS_UP { transform: translate(280px,813px); }
    .CMS_DN { transform: translate(180px,947px); }
  </style>
  <image x="0" y="0" width="1275" height="1650" xlink:href="https://cdn.discordapp.com/attachments/498564769838661632/838335308708708362/Thrustmaster_Warthog_HOTAS_Layout_Template_page-0001.jpg"/>
  <text class="WP_REL">
    <tspan class="red small" x="0" dy="-1.0em">Sans modificateur</tspan>
    <tspan class="blue small" x="0" dy="1.2em">Avec modificateur</tspan>
  </text>
  <text class="CMS_UP green normal">CMS_UP</text>
  <text class="CMS_DN green normal">CMS_DN</text>
</svg>