cardfinanceinfotailwindresponsivegriddashboard

Financing Details Info Card

Темная карточка Tailwind CSS с деталями финансирования. Отображает условия кредита в виде сетки. Идеально для дашбордов и страниц оформления заказа.

Live Preview

Prompt

<article class="sm:p-12 bg-black border-white/5 border rounded-3xl pt-8 pr-8 pb-8 pl-8">
        <h3 class="text-3xl sm:text-4xl text-white tracking-tight font-geist font-medium" style="">Financing details</h3>

        <div class="mt-6 border-t border-white/10 divide-y divide-white/10">
          <div class="grid grid-cols-2 gap-4 py-4">
            <span class="text-sm text-white/60 font-geist">Application deadline</span>
            <span class="text-sm text-right text-white/80 font-geist">March 15, 2025</span>
          </div>
          <div class="grid grid-cols-2 gap-4 py-4">
            <span class="text-sm text-white/60 font-geist">Program ends</span>
            <span class="text-sm text-right text-white/80 font-geist">December 31, 2025</span>
          </div>
          <div class="grid grid-cols-2 gap-4 py-4">
            <span class="text-sm text-white/60 font-geist">Available credit</span>
            <span class="text-sm text-right text-white/80 font-geist">$500,000</span>
          </div>
          <div class="grid grid-cols-2 gap-4 py-4">
            <span class="text-sm text-white/60 font-geist">Equipment allocated</span>
            <span class="text-sm text-right text-white/80 font-geist">$350,000</span>
          </div>
          <div class="grid grid-cols-2 gap-4 py-4">
            <span class="text-sm text-white/60 font-geist">Max financing</span>
            <span class="text-sm text-right text-white/80 font-geist">$100,000</span>
          </div>
          <div class="grid grid-cols-2 gap-4 py-4">
            <span class="text-sm text-white/60 font-geist">Min purchase</span>
            <span class="text-sm text-right text-white/80 font-geist">$5,000</span>
          </div>
          <div class="grid grid-cols-2 gap-4 py-4">
            <span class="text-sm text-white/60 font-geist">Interest rate</span>
            <span class="text-sm text-right text-white/80 font-geist">0% APR*</span>
          </div>
          <div class="grid grid-cols-2 gap-4 py-4">
            <span class="text-sm text-white/60 font-geist">Accepted brands</span>
            <span class="text-sm text-right font-geist"><span class="text-sky-400 font-geist">Canon, Sony, Nikon, Fuji</span></span>
          </div>
        </div>
      </article>

All Prompts