Friendship Card - Copy this React, Tailwind Component to your project

import React, { useState } from 'react'; import { FaHeart, FaEnvelope } from 'react-icons/fa'; const FriendshipCard = () => { const [isOpen, setIsOpen] = useState(false); const [message, setMessage] = useState(''); return ( <div className="flex justify-center items-center min-h-screen bg-gradient-to-r from-yellow-200 via-green-200 to-blue-200 p-4"> <div className={w-full max-w-md transform transition-all duration-500 ${isOpen ? 'rotate-0' : 'rotate-y-180'}}> <div className={bg-white rounded-lg shadow-2xl overflow-hidden ${isOpen ? 'hidden' : 'block'}}> <div className="p-6 text-center"> <h2 className="text-3xl font-bold mb-4 text-blue-600">Friendship</h2> <p className="text-xl text-gray-700 mb-6">"A friend is one of the nicest things you can have and one of the best things you can be."</p> <div className="flex justify-center mb-6"> <FaHeart className="text-6xl text-red-500 animate-pulse" /> </div> <button onClick={() => setIsOpen(true)} className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105" > Open Card </button> </div> </div> <div className={bg-white rounded-lg shadow-2xl overflow-hidden ${isOpen ? 'block' : 'hidden'}}> <div className="p-6"> <h3 className="text-2xl font-semibold mb-4 text-green-600">Dear Friend,</h3> <textarea className="w-full h-32 p-2 border border-gray-300 rounded mb-4 focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="Write your personal message here..." value={message} onChange={(e) => setMessage(e.target.value)} ></textarea> <p className="text-lg text-gray-700 mb-6">Wishing you a day filled with joy and laughter, just like the happiness you bring to my life every day.</p> <div className="flex justify-between items-center"> <button onClick={() => setIsOpen(false)} className="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105" > Close Card </button> <FaEnvelope className="text-4xl text-blue-500 animate-bounce" /> </div> </div> </div> </div> </div> ); }; export default FriendshipCard;