JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>Style A</td>
        <td>Title 1</td>
        <td>Ingredients of title 1</td>
        <td>More Info of title 1</td>
    </tr>
    <tr>
        <td>Style A</td>
        <td>Title 2</td>
        <td>Ingredients of title 2</td>
        <td>More Info of title 2</td>
    </tr>
    <tr>
        <td>Style B</td>
        <td>Title 3</td>
        <td>Ingredients of title 3</td>
        <td>More Info of title 3</td>
    </tr>
</table>

CSS

table, th , td  {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px;
}

JavaScript

[ "Style A": { 
 				["Title 1", "Ingredients of title 1", "More info of title 1"],
    			["Title 2", "Ingredients of title 2", "More info of title 2"]
			},
  "Style B": { 
 				["Title 3", "Ingredients of title 3", "More info of title 3"],
    			["Title 4", "Ingredients of title 4", "More info of title 4"]
			},
     ...
]