پیشنمایش زنده
کد HTML
<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">
<p class="text-2xl font-medium">5430 4900 3232 9755</p>
<div class="flex justify-between gap-10">
<p class="text-lg font-medium">Elon Musk</p>
<div class="flex-1 flex flex-col justify-end">
<p class="self-end">Valid Date</p>
<p class="self-end">2/14/2024</p>
</div>
<div class="self-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 58 36" height="36" width="58">
<circle fill-opacity="0.62" fill="#F9CCD1" r="18" cy="18" cx="18"></circle>
<circle fill="#424242" r="18" cy="18" cx="40" opacity="0.36"></circle>
</svg>
</div>
</div>
</div>
کد CSS
.relative{position:relative}.flex{display:flex}.h-\[260px\]{height:260px}.w-\[400px\]{width:400px}.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-10{gap:2.5rem}.gap-8{gap:2rem}.self-end{align-self:flex-end}.self-center{align-self:center}.rounded-3xl{border-radius:1.5rem}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-purple-500{--tw-gradient-from:#a855f7 var(--tw-gradient-from-position);--tw-gradient-to:rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-pink-500{--tw-gradient-to:#ec4899 var(--tw-gradient-to-position)}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-medium{font-weight:500}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}