Card by sahilxkhadka
#e8e8e8
HTML +TailwindCSS
1<div class="card relative h-[260px] w-[400px] flex flex-col justify-end px-6 py-10 text-white rounded-3xl gap-8 bg-gradient-to-r from-purple-500 to-pink-500"> 2 <p class="text-2xl font-medium">5430 4900 3232 9755</p> 3 <div class="flex justify-between gap-10"> 4 <p class="text-lg font-medium">Elon Musk</p> 5 <div class="flex-1 flex flex-col justify-end"> 6 <p class="self-end">Valid Date</p> 7 <p class="self-end">2/14/2024</p> 8 </div> 9 <div class="self-center"> 10 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 58 36" height="36" width="58"> 11 <circle fill-opacity="0.62" fill="#F9CCD1" r="18" cy="18" cx="18"></circle> 12 <circle fill="#424242" r="18" cy="18" cx="40" opacity="0.36"></circle> 13 </svg> 14 </div> 15 </div> 16</div>
852 views
852 views
MIT License