Parallax Card in Svelte

<script> export let description = ”; export let imgSrc = ”; export let title = ”; </script> <div class=”bg-slate-50 bg-cover w-72 h-auto flex flex-col items-center p-8 rounded-lg shadow-lg group cursor-pointer” > <div class=”bg-cover aspect-square w-full -mt-24 bg-center rounded-lg shadow-sm grayscale group-hover:grayscale-0 transition-all duration-500 z-20″ style:background-image=”url({imgSrc}) ” /> <div id=”content-wrapper” class=”flex flex-col opacity-0 group-hover:opacity-100 invisible group-hover:visible…

The Owl Card

Tailwindcss is a powerful utility that allows you to create a card component with the help of an owl picture. The first step is to install tailwindcss by running npm install -D tailwindcss in your terminal. Then, you can create a new project and start adding your code. You should add the following code after…