DP
Daria P

Interactive Envelope Card - Copy this Html, Tailwind Component to your project

First, create a closed envelope. The envelope will be white with a gradient background ranging from light grey to very pale pink. It will have gold edges. A few hearts will escape from the envelope when it is opened. When the user clicks on it, it should open, revealing a landscape-format card showing the cover. The cover will be an image file. The width of the image must not exceed 1400 pixels. When the user clicks a second time, the card opens upwards to reveal the inside, which will be divided into two editable image files (URL). The animation must be smooth. Add a ‘Reset’ button to be able to replay the animation. The whole thing must be done in HTML/CSS/JavaScript (no jQuery or heavy frameworks).

Prompt
Component Preview

About

Interactive Envelope Card - A delightful card that opens to reveal a stunning interior, showcasing a cover first. Built with HTML and. Get component free!

Share

Last updated 1 month ago