Neumorphism Experiment

I've been seeing a lot of "Neumorphism" designs appearing lately, so I thought I'd have a go at implementing it using the tailwind colour palette.

Tailwind lends itself to this quite nicely as it provides a good range across each colour set.

To produce the hover effect I applied a shadow to the ::after element and an inset shadow to main element. This is necessary as I discovered you cannot animate to and from an inset/regular box shadow, so each is animated separately to and from transparent.

Each element has 3 shadows made up of shades of the background colour. To see this more clearly, you can remove the background below.

The tailwind plugin I wrote can be found on Github.