When using dynamic classnames, further conditions can be added depending on whether the initial condition is true or false.

Example:

{icons &&
   icons.map((icon: any, index: number) => {
      return (
         

                    {icon.icon}
                    
                      {icon.name}
                    
                  
                );
              })}

If the expression index % 2 (modulus) evaluates to true, the class name col-span-4 will be added. The second className which is col-span-3 and it is added if the expression !(index % 2) evaluates to true. However the ! mark changes the Boolean to false

So class col-span-4 is added when the index is even, whereas the class col-span-3 is added when the index is odd.