Untitled

<div className="flex gap-4  min-w-screen bg-red-200 max-w-full overflow-x-auto px-5">
      <div className="bg-blue-600 lg:min-w-[25%] md:min-w-[25%] sm:min-w-[50%]  min-w-[100%]  p-5 overflow-y-auto max-h-screen">
       <div className='bg-green-400 rounded-md p-2 text-center w-full sticky top-0'>Tab 1</div>
        {
          data.map((data,key)=>{
            return <div className='w-full p-2 border-gray-200 rounded-md bg-white my-2 '>
              <h1>{data.name}</h1>
              <p>{data.number}</p>
              </div>
          })
        }
      </div>
      <div className="bg-blue-600 lg:min-w-[25%] md:min-w-[25%] sm:min-w-[50%]  min-w-[100%]  p-5 overflow-y-auto max-h-screen">
       <div className='bg-green-400 rounded-md p-2 text-center w-full sticky top-0'>Tab 1</div>
        {
          data.map((data,key)=>{
            return <div className='w-full p-2 border-gray-200 rounded-md bg-white my-2 '>
              <h1>{data.name}</h1>
              <p>{data.number}</p>
              </div>
          })
        }
      </div>
      <div className="bg-blue-600 lg:min-w-[25%] md:min-w-[25%] sm:min-w-[50%]  min-w-[100%]  p-5 overflow-y-auto max-h-screen">
       <div className='bg-green-400 rounded-md p-2 text-center w-full sticky top-0'>Tab 1</div>
        {
          data.map((data,key)=>{
            return <div className='w-full p-2 border-gray-200 rounded-md bg-white my-2 '>
              <h1>{data.name}</h1>
              <p>{data.number}</p>
              </div>
          })
        }
      </div>
      <div className="bg-blue-600 lg:min-w-[25%] md:min-w-[25%] sm:min-w-[50%]  min-w-[100%]  p-5 overflow-y-auto max-h-screen">
       <div className='bg-green-400 rounded-md p-2 text-center w-full sticky top-0'>Tab 1</div>
        {
          data.map((data,key)=>{
            return <div className='w-full p-2 border-gray-200 rounded-md bg-white my-2 '>
              <h1>{data.name}</h1>
              <p>{data.number}</p>
              </div>
          })
        }
      </div>
      <div className="bg-blue-600 lg:min-w-[25%] md:min-w-[25%] sm:min-w-[50%]  min-w-[100%]  p-5 overflow-y-auto max-h-screen">
       <div className='bg-green-400 rounded-md p-2 text-center w-full sticky top-0'>Tab 1</div>
        {
          data.map((data,key)=>{
            return <div className='w-full p-2 border-gray-200 rounded-md bg-white my-2 '>
              <h1>{data.name}</h1>
              <p>{data.number}</p>
              </div>
          })
        }
      </div>
      <div className="bg-blue-600 lg:min-w-[25%] md:min-w-[25%] sm:min-w-[50%]  min-w-[100%]  p-5 overflow-y-auto max-h-screen">
       <div className='bg-green-400 rounded-md p-2 text-center w-full sticky top-0'>Tab 1</div>
        {
          data.map((data,key)=>{
            return <div className='w-full p-2 border-gray-200 rounded-md bg-white my-2 '>
              <h1>{data.name}</h1>
              <p>{data.number}</p>
              </div>
          })
        }
      </div>
    </div>