JSFiddle - React, Tailwind, and code Playground

JavaScript

var retdata =[
    {
        "id": "0004",
        "name": "Thums Up",
        "image": {
            "url": "pepsicup.jpg",
            "width": 200,
            "height": 200
        },
        "category": [
            {
                "category_name": "can",
                "image": "images/0001.jpg",
                "type": [
                    {
                        "type": "250ml"
                    },
                    {
                        "type": "300ml"
                    },
                    {
                        "type": "330ml"
                    }
                ]
            },
            {
                "category_name": "bottle",
                "image": "images/0001.jpg",
                "type": [
                    {
                        "type": "350ml"
                    },
                    {
                        "type": "600ml"
                    }
                ]
            },
            {
                "category_name": "fountain",
                "image": "images/0001.jpg",
                "type": [
                    {
                        "type": "small"
                    },
                    {
                        "type": "large"
                    }
                ]
            }
        ]
    },
    {
        "id": "0005",
        "name": "Pepsi",
        "image": {
            "url": "images/0001.jpg",
            "width": 200,
            "height": 200
        },
        "category": [
            {
                "category_name": "can",
                "image": "images/0001.jpg",
                "type": [
                    {
                        "type": "250ml"
                    },
                    {
                        "type": "300ml"
                    },
                    {
                        "type": "330ml"
                    }
                ]
            },
            {
                "category_name": "bottle",
                "image":...