JSFiddle - React, Tailwind, and code Playground

by Ankit Patidar

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 hello</text>
  </svg>

</div>

CSS

div {
  width: 50%;
  height: 50%;
  border: 2px dotted red;
  
}

p {
  font-size: 60px;
  
}

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

text {
  transform: translate(0, 100px);
  font-size: 50px;
  fill: #000;

}