JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<svg width="500px" height="100px"
                xmlns="http://www.w3.org/2000/svg">
                <text y="50%" textLength="300px" fill="black" lengthAdjust="spacingAndGlyphs" >Test</text>
      </svg>
<!-- 
<div class="imagine">
    
<div class="first">
    Text
</div>

<div class="second">
    Text
</div>
    
</div> -->

CSS

/* 

.first {
    display:inline-block;
    float:left;
        height:100px;
          width:auto;
            margin: 0;
    padding: 1px;
    }
    
    .second {
          height:100px;
          width:auto;
    float:left;
    display:inline-block;
    margin: 0;
    padding: 1px;
    transform: scale(4, 1);
    -webkit-transform: scale(4, 1);
    -moz-transform: scale(4, 1);
    -ms-transform: scale(4, 1);
    -o-transform: scale(4, 1);
    }
    
    .imagine {
    width:1000px;
      margin: 0 auto;
      font-size:50px;
      color:red;
    }
    



.wrapper {
    width:600px;
    margin: 0 auto;
}

#block1 {
    float:left;
    height:100px;
    display:inline-block;
}

#block2
{
    float:left;
    background-color: #F5F5F5;
    margin: 10px 20px;
    padding: 20px;
    height:100px;
    display:inline-block;
} */