score:0

you should use flex-row instead of flex-col for whole container. otherwise i would suggest for using an extra div for differentiating these sections and using grid to arrange these div in a similar width.

you can try like this:

// ...
return (
    <div>
        <div classname="max-w-md overflow-hidden bg-white m-4">
            <div classname="grid grid-cols-4 gap-1">
                <div>
                    <div classname="px-6 py-3 border-b">
                        <div classname="text-xl font-bold"> twitter </div>
                    </div>
                    <div classname="px-6 py-3 border-b">
                        <span classname="">avg. sentigment(0.0 -1.0)</span>
                        <span classname="">0.31</span>
                    </div>
                </div>
                <div>
                    <div classname="px-6 py-3 border-b">
                        <div classname="text-xl font-bold"> instagram </div>
                        <span classname="">post analyzed</span>
                        <span classname="">5,670</span>
                    </div>
                </div>
                <div>
                    <div classname="px-6 py-3 border-b">
                        <div classname="text-xl font-bold"> linkedin </div>
                        <span classname="">positive posts (>0.66)</span>
                        <span classname="">1,849</span>
                    </div>
                    <div classname="px-6 py-3 border-b">
                        <span classname="">negative posts (0.33)</span>
                        <span classname="">1,981</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
)
// ...

Related Query

More Query from same tag