Responsive CompanyGrid Copy this Tailwind CompanyTableto Your Project

<div className="relative overflow x auto shadow md sm:rounded lg mt 10 mb 4"> <table className="w full text sm text left text gray 700"> <thead className="text md text gray 700 bg white border b"> <tr> <th scope="col" className="px 6 py 8">Company Name</th> <th scope="col" className="px 6 py 8">ID</th> <th scope="col" className="px 6 py 8">Email</th> <th scope="col" className="px 6 py 8">Registration No.</th> <th scope="col" className="px 6 py 8">Country</th> <th scope="col" className="px 6 py 8">Owner ID</th> <th scope="col" className="px 6 py 8">Status</th> <th scope="col" className="px 6 py 3">Action</th> </tr> </thead> <tbody> {currentCompanies.length > 0 ? ( currentCompanies.map((company) => ( <tr key={company.id} className="bg white border b hover:bg gray 50"> <th scope="row" className="px 6 py 8 font medium text gray 900 whitespace nowrap"> <div className="flex flex row w full"> <div className="flex flex col justify center items start"> <div className="text md font bold text [#303972]">{company.companyName}</div> </div> </div> </th> <td className="px 6 py 8 text [#4D44B5] font [600]">{company.id}</td> <td className="px 6 py 8">{company.email}</td> <td className="px 6 py 8 text [#303972]">{company.registrationNo}</td> <td className="px 6 py 8 text [#303972]">{company.country}</td> <td className="px 6 py 8 text [#303972]">{company.ownerId}</td> <td className="px 6 py 8 text [#303972]"> <button className={`flex flex row text center text md font [400] justify center items center gap 4 p 2 px 6 rounded full ${company.status === "Active" ? "bg green 200 text green 800 font bold" : company.status === "Suspended" ? "bg red 200 text red 800 font bold" : "bg gray 200 text gray 600 font bold"}`} > {company.status} </button> </td> <td className="flex justify start items center gap 4 py 8 mr 4"> <button className="rounded full p 3 bg [#4D44B51A]" onClick={() => navigate("/company/newCompany", { state: { company } })}> <FaEdit className="text [#4D44B5] text [20px]" /> </button> <button className="rounded full p 3 bg [#4D44B51A]" onClick={() => handleDelete(company.email)} > <FaTrashAlt className="text [#4D44B5] text [20px]" /> </button> </td> </tr> )) ) : ( <tr> <td colSpan={8} className="text center py 4">No companies found</td> </tr> )} </tbody> </table> </div> User Profile I want this table responsive after smaller than md screens