JSFiddle - React, Tailwind, and code Playground

by Kearnan Kelly

HTML

<div>
  <p>
    Non scalable text.
  
  </p>
  
</div>

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
  <text>Scalable text</text>

  </svg>

</div>

CSS

div {
  resize: both;
  width: 200px;
  height: 200px;
  border: 2px dotted red;
  
}

p {
  font-size: 60px;
  
}

svg {
  width: 100%;
  height: auto;
 
}

text {
  transform: translate(20px, 202px);
  font-size: 62px;
  fill: #000;

}