JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="100px" height="100px">
    <foreignObject width="40px" height="40px" requiredExtensions="http://www.w3.org/1999/xhtml">
      <body xmlns="http://www.w3.org/1999/xhtml">Jul 2014</body>
    </foreignObject>
</svg>

CSS

foreignObject {
    text-align: center;
    -webkit-transform: translate(50px,50px);
       -moz-transform: translate(50px,50px);
        -ms-transform: translate(50px,50px);
         -o-transform: translate(50px,50px);
            transform: translate(50px,50px);
}