In this tutorial, we will learn how to create a modern card design with hover effects and a background encrypted text using Tailwind CSS

Manu Arora

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

The whole design of the card is divided into two parts: The component will have the hover effect (A glowing background on mouse move and encrypted background text) The component is embedded here along with mouseX and mouseY values. These values are passed to the component to animate the background.

How to create a modern card design with Tailwind CSS and Nextjs