Invoice

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

Card Other

Author Ameth Galarcio

Tailwind v3.4 3.4k 5

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

cards
cards with background animation

Anonymous

3 years ago

11.9k
cards
cards with background animation

Anonymous

3 years ago

12.6k
cards
cards with background animation

Anonymous

2 years ago

3.8k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

4.1k
Payment Cards

Shammi Nethupul

2 years ago

3k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Abhiraj

1 year ago

1.9k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Ameth Galarcio

1 year ago

2.3k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

rohit whyphy

1 year ago

1.6k
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Abdul Baset Bappy

1 year ago

2.3k
Active Beauty Main Page

Maxim

1 year ago

1.8k
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Hamza Atig

1 year ago

1.6k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Hamza Atig

1 year ago

2k