create me a component in next js for my notifications with bell icon and badge indicating how many unread messages. ensure that you adopt to modern styling of tailwind css. include sample data for me to iterate over the notifications. ensure that there's a hover effect when i hover on each notification. also change the design when i click each notification by marking them as read.
take note to only use tailwind css | A shadcn/ui and v0 generation - v0
