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.7k

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

Author:
Anonymous

1 year ago

10.5k
cards
cards with background animation

Author:
Anonymous

1 year ago

10.4k
cards
cards with background animation

Author:
Anonymous

11 months ago

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

Author:
Ameth Galarcio

9 months ago

2.3k
Payment Cards

Author:
Shammi Nethupul

8 months ago

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

Author:
Abhiraj

2 months ago

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

Author:
Ameth Galarcio

2 months ago

767
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).

Author:
rohit whyphy

1 month ago

301
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.

Author:
Abdul Baset Bappy

4 weeks ago

205
Active Beauty Main Page

Author:
Maxim

3 weeks ago

150
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.

Author:
Hamza Atig

1 week ago

12
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.

Author:
Hamza Atig

6 days ago

20

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components