//assets.js
import sorare from './sorare.svg'
import visa from './visa.svg'
import sling from './sling.svg'
import safety_wing from './safety-wing.svg';
import unqork from './Un_qork.svg';
import stitch from './stitch.svg'
import xp from './X_P.svg'
import overwolf from './overwolf.svg'
import revio from './revio.svg'
import humaans from './humaans.svg'

export const companies = [
    sorare,
    visa,
    sling,
    safety_wing,
    unqork,
    stitch,
    xp,
    overwolf,
    revio,
    humaans,
]

//CompaniesMain.jsx
import {companies} from '../assets/assets'

const CompaniesMain = () => {
  return (
    <div className='flex p-10 w-[100%]'>
        {companies.map((company,index)=>{
            return <img key={index} className='w-[15rem]' src={company} alt="" />
        })}
    </div>
  )
}

export default CompaniesMain

I want to iterate these images in two rows with equal columns. how to do that. If possible, show me using tailwind css.

I iterate images and they render in one row. and size of the images is also not increasing when displaying in one row

But I want to show them like this