JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Someid">
    <svg  width="105">
    <g transform="translate(10,5)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,20)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,35)">
        <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,50)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,65)">
        <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,80)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        
        <g transform="translate(10,95)">
        <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,110)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        
        <g transform="translate(10,125)">
        <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,140)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        
        <g transform="translate(10,155)">
        <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,170)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,185)">
        <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
        <g transform="translate(10,200)">
            <text style="fill: black;" dy=".35em" y="5" x="15">asdsd</text>
        </g>
    </svg>
</div>

CSS

svg {
    height:500px;
}

#Someid {
    height: 150px;
    overflow-x: hidden;
    overflow-y auto;
}