Invoice

This tailwind example is contributed by Ameth Galarcio, on 04-Jul-2024. Component is made with Tailwind CSS v3. It is responsive.

Card Other

Author Ameth Galarcio

1.5k

Fork Fullscreen

<section class="w-full px-6 py-6">
    <div class="flex justify-between items-center w-full gap-2 border-b py-8">
        <p class="uppercase text-gray-500 font-semibold">
            N° de factura
        </p>
        <h1 class="font-bold text-2xl">SETT3613788</h1>
    </div>

<div class="my-4">
        <p class="text-gray-500 text-xs font-semibold uppercase">Factura CUFE:</p>
        <p class="font-semibold">IQOASUQA17119011D312F1431FD768AS </p>
    </div>
    <div class="grid grid-cols-2  gap-4 py-4 border-b">
        <div>
            <p class="text-gray-500 text-xs font-semibold">Fecha de expedicion:</p>
            <p class="font-semibold">3 De Julio de 2024</p>
        </div>
        <div>
            <p class="text-gray-500 text-xs font-semibold">Fecha de expiracion:</p>
            <p class="font-semibold">13 De Julio de 2024</p>
        </div>
        <div>
            <p class="text-gray-500 text-xs font-semibold">Moneda:</p>
            <p class="font-semibold">COP</p>
        </div>
        <div>
            <p class="text-gray-500 text-xs font-semibold">Estado:</p>
            <p class="font-semibold">EN NEGOCIACION</p>
        </div>
        <div>
            <p class="text-gray-500 text-xs font-semibold">Habilitado para factoring:</p>
            <div class="py-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 1024 1024">
                    <path fill="#059669"
                        d="M512 0C229.232 0 0 229.232 0 512c0 282.784 229.232 512 512 512c282.784 0 512-229.216 512-512C1024 229.232 794.784 0 512 0m0 961.008c-247.024 0-448-201.984-448-449.01c0-247.024 200.976-448 448-448s448 200.977 448 448s-200.976 449.01-448 449.01m204.336-636.352L415.935 626.944l-135.28-135.28c-12.496-12.496-32.752-12.496-45.264 0c-12.496 12.496-12.496 32.752 0 45.248l158.384 158.4c12.496 12.48 32.752 12.48 45.264 0c1.44-1.44 2.673-3.009 3.793-4.64l318.784-320.753c12.48-12.496 12.48-32.752 0-45.263c-12.512-12.496-32.768-12.496-45.28 0" />
                </svg>
            </div>
        </div>
        <div>
            <p class="text-gray-500 text-xs font-semibold">Eventos DIAN Ejecutados:</p>
            <div class="py-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 1024 1024">
                    <path fill="#059669"
                        d="M512 0C229.232 0 0 229.232 0 512c0 282.784 229.232 512 512 512c282.784 0 512-229.216 512-512C1024 229.232 794.784 0 512 0m0 961.008c-247.024 0-448-201.984-448-449.01c0-247.024 200.976-448 448-448s448 200.977 448 448s-200.976 449.01-448 449.01m204.336-636.352L415.935 626.944l-135.28-135.28c-12.496-12.496-32.752-12.496-45.264 0c-12.496 12.496-12.496 32.752 0 45.248l158.384 158.4c12.496 12.48 32.752 12.48 45.264 0c1.44-1.44 2.673-3.009 3.793-4.64l318.784-320.753c12.48-12.496 12.48-32.752 0-45.263c-12.512-12.496-32.768-12.496-45.28 0" />
                </svg>
            </div>
        </div>
    </div>

<div class="grid grid-cols-1 py-4 gap-2 md:grid-cols-2 lg:grid-cols-3">
        <div class="border p-2 rounded-md ">
            <p class="text-gray-500 text-xs font-semibold">Cantidad requerida de la factura:</p>
            <p class="font-bold text-xl">$ 41.500.000,00</p>
        </div>
        <div class="border p-2 rounded-md ">
            <p class="text-gray-500 text-xs font-semibold">Dias de operacion:</p>
            <p class="font-bold text-xl">9</p>
        </div>
        <div class="border p-2 rounded-md ">
            <p class="text-gray-500 text-xs font-semibold">Importe de la financiacion:</p>
            <p class="font-bold text-xl">$ 39.425.000,00</p>
        </div>
        <div class="border p-2 rounded-md ">
            <p class="text-gray-500 text-xs font-semibold">Reajuste de factura:</p>
            <p class="font-bold text-xl">$ 0,00</p>
        </div>
        <div class="border p-2 rounded-md ">
            <p class="text-gray-500 text-xs font-semibold">Factura del importe:</p>
            <p class="font-bold text-xl">$ 41.500.000,00</p>
        </div>
        <div class="border p-2 rounded-md ">
            <p class="text-gray-500 text-xs font-semibold">Monto interes de la plataforma:</p>
            <p class="font-bold text-xl">$ 59.137,50</p>
        </div>
        <div class="border p-2 rounded-md ">
            <p class="text-gray-500 text-xs font-semibold">Monto interes de deduciones:</p>
            <p class="font-bold text-xl">$ 354.825,00</p>
        </div>
    </div>
</section>

Related Examples