JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<svg width="500" height="200">
    <rect x="0" y="0" width="500" height="200" fill="orange"/>
    <foreignObject x="0" y="0" width="500" height="200">
       <style>
          div { display: table; font-size: 20px; width: 500px; height: 200px; }
          p   { display: table-cell; text-align: center; vertical-align: middle; }
       </style>
       <body xmlns="http://www.w3.org/1999/xhtml">
           <div>
              <p id="text">Your words here</p>
           </div>
       </body>
    </foreignObject>
</svg>


<svg width="500" height="200">
    <rect x="0" y="0" width="500" height="200" fill="orange"/>
    <foreignObject x="0" y="0" width="500" height="200">
       <style>
          div { display: table; font-size: 20px; width: 500px; height: 200px; }
          p   { display: table-cell; text-align: center; vertical-align: middle; }
       </style>
       <body xmlns="http://www.w3.org/1999/xhtml">
           <div>
              <p id="text">Your words and more also here</p>
           </div>
       </body>
    </foreignObject>
</svg>