1<div class="w-[300px] bg-[#ffffff] rounded-[8px] border-[1px] border-solid border-[#e5e7eb] shadow-[0_4px_6px_rgba(0,0,0,0.1)] p-[16px] overflow-hidden transition-all duration-[300ms] hover:shadow-[0_10px_15px_rgba(0,0,0,0.2)]">
2  <img src="https://via.placeholder.com/300x200" alt="Card image" class="w-full h-[200px] object-cover rounded-t-[8px] mb-[16px]" />
3  <h2 class="text-[24px] font-[700] text-[#111827] mb-[8px]">Card Title</h2>
4  <p class="text-[16px] text-[#4b5563] mb-[16px]">This is a sample card description. You can customize it to fit your needs.</p>
5  <button class="bg-[#3b82f6] text-[#ffffff] rounded-[4px] px-4 py-2 text-base cursor-pointer transition-colors hover:opacity-90">Learn More</button>
6</div>