This is the custom Tailwind CSS styling I would like to apply:
import React from 'react'
function HeaderIcon({Icon}) {
return (
<div
className="flex
items-center
cursor-pointer
md:px-10
sm:h-14
md:hover:bg-gray-100
rounded-xl
active:border-b-2
active:border-blue-500"
>
<Icon className="h-5" />
</div>
)
}
export default HeaderIcon
Below is where the custom Tailwind style will be added:
<div className="flex justify-center flex-grow">
<div className="flex space-x-6 md:space-2">
<HeaderIcon Icon={HomeIcon} />
<HeaderIcon Icon={FlagIcon} />
<HeaderIcon Icon={PlayIcon} />
<HeaderIcon Icon={ShoppingCartIcon} />
<HeaderIcon Icon={UserGroupIcon} />
</div>
</div>