Posts \ Change Image On Hover Using Tailwind

I was building an app where the admin user could receive messages from other users, and I wanted them to be able to star the important ones. This app used Tailwind, so I was curious if there was a way to do this. I found this Reddit post where a user shared an idea that worked:

You can see that the primary components here are:

First, assigning the group class to the container, ie. the outside div (see the official Tailwind docs here). This allows you to add the 'group-' prefix to classes inside the container that apply when the container is interacted with (hovering, in this case).
Second, alternately hiding and showing the images.

I translated this into Rails (using free Font Awesome icons):

You will notice that I have centered the icons inside of the container using flex. This is because the two icons I used appear to display at different heights, and the bottom of the containing element would raise up a pixel or two when I moused over them. YMMV, depending on which icons you choose.

imagesrailstailwindfont awesome