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

.container { background color: #f0f8ff; /* Light blue background */ color: #000; /* Black text color */ padding: 2em; } .main { text align: center; } .cardContainer { display: flex; justify content: space around; flex wrap: wrap; gap: 2em; margin top: 2em; } .card { background: white; border radius: 10px; box shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 2em; text align: left; width: 300px; transition: transform 0.2s, box shadow 0.2s; perspective: 1000px; } .card:hover { transform: translateY( 10px); box shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .card h2 { color: #007acc; /* Light blue color */ margin bottom: 1em; } .card a.cardLink { color: #007acc; /* Light blue color */ text decoration: none; transition: color 0.3s; } .card a.cardLink:hover { color: #005b99; /* Darker blue on hover */ } .card ul { list style type: disc; padding left: 20px; } .card ul li { margin bottom: 0.5em; } .section { margin top: 4em; } .section h2 { color: #007acc; /* Light blue color */ margin bottom: 1em; } make this more butelify with adding svg graphics as well as 3d cards