JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="100%" height="3900px">
    <svg y="0" height="100px" width="100%">
        <text>calories</text>
    </svg>
    <svg y="100" height="100px" width="100%">
        <text>net_carbs</text>
    </svg>
    <svg y="200" height="100px" width="100%">
        <text>fat</text>
    </svg>
    <svg y="300" height="100px" width="100%">
        <text>protein</text>
    </svg>
    <svg y="400" height="100px" width="100%">
        <text>carbohydrate</text>
    </svg>
    <svg y="500" height="100px" width="100%">
        <text>fiber</text>
    </svg>
    <svg y="600" height="100px" width="100%">
        <text>sugar</text>
    </svg>
    <svg y="700" height="100px" width="100%">
        <text>calcium</text>
    </svg>
    <svg y="800" height="100px" width="100%">
        <text>iron</text>
    </svg>
    <svg y="900" height="100px" width="100%">
        <text>magnesium</text>
    </svg>
    <svg y="1000" height="100px" width="100%">
        <text>phosphorus</text>
    </svg>
    <svg y="1100" height="100px" width="100%">
        <text>potassium</text>
    </svg>
    <svg y="1200" height="100px" width="100%">
        <text>sodium</text>
    </svg>
    <svg y="1300" height="100px" width="100%">
        <text>zinc</text>
    </svg>
    <svg y="1400" height="100px" width="100%">
        <text>copper</text>
    </svg>
    <svg y="1500" height="100px" width="100%">
        <text>flouride</text>
    </svg>
    <svg y="1600" height="100px" width="100%">
        <text>manganese</text>
    </svg>
    <svg y="1700" height="100px" width="100%">
        <text>selenium</text>
    </svg>
    <svg y="1800" height="100px" width="100%">
        <text>vit_a</text>
    </svg>
    <svg y="1900" height="100px" width="100%">
        <text>vit_c</text>
    </svg>
    <svg y="2000" height="100px" width="100%">
        <text>vit_d</text>
    </svg>
    <svg y="2100" height="100px" width="100%">
        <text>vit_e</text>
    </svg>
    <svg y="2200" height="100px" width="100%">
       ...