Tank Info Table - Copy this React, Tailwind Component to your project

import React from "react"; import { FaInfoCircle } from "react-icons/fa"; const TankInfoTable = () => { const tankData = [ { key: "Name (Tank 01)", min: "0%", max: "90%" }, { key: "Volume", min: "0 L", max: "105,000 L" }, { key: "Mass", min: "0 kg", max: "50,000 kg" }, { key: "PT 301", min: "0 bar", max: "17.7 bar" }, { key: "TT 301", min: "-10 °C", max: "55 °C" } ]; return ( <div className="container mx-auto p-6"> <div className="bg-white shadow-md rounded-lg overflow-hidden"> <div className="px-6 py-4 bg-gray-100 border-b border-gray-200 flex justify-between items-center"> <h2 className="text-xl font-semibold text-gray-800">Tank Information</h2> <FaInfoCircle className="text-blue-500 text-xl cursor-pointer" title="Tank specifications and limits" /> </div> <table className="w-full"> <thead> <tr className="bg-gray-50"> <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Key</th> <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value Min</th> <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value Max</th> </tr> </thead> <tbody className="bg-white divide-y divide-gray-200"> {tankData.map((item, index) => ( <tr key={index} className={index % 2 === 0 ? "bg-gray-50" : "bg-white"}> <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{item.key}</td> <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{item.min}</td> <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{item.max}</td> </tr> ))} </tbody> </table> </div> </div> ); }; export default TankInfoTable; can you make small table width 200, height 300