JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="constrained">
  <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <foreignObject width="100%" height="100%">
      <h1 class="title">
        A title that wraps
      </h1>

      resize this window
    </foreignObject>
  </svg>  
</div>

CSS

.constrained {
  max-width: 30%;
}
h1 {
  font-size: 1rem;
}
svg {
  outline: 1px dashed black;
}