Stylish Invoice Component - Copy this Html, Tailwind Component to your project

Create a invoice with good looking colors and logos that to with good amount of details, and button view detail transaction detail, with data : { "user": { "id": 1, "role_id": 1, "username": "KienPhamGia", "email": "0306211048@caothang.edu.vn", "vnd": 4460000, "depositTotal": 0, "purchaseTotal": 0, "avatar": null, "birthday": "2024 09 16 21:34:51", "created_at": "2024 09 16T14:34:51.000000Z", "updated_at": "2024 09 20T07:06:22.000000Z" }, "transaction": { "id": 4, "user_id": 1, "total_payable": 540000, "created_at": "2024 09 20T07:06:22.000000Z", "updated_at": "2024 09 20T07:06:22.000000Z", "status_id": 1, "details": [ { "id": 4, "transaction_id": 4, "product_id": 1, "quantity": 1, "price_to_paid": 50000, "content": "Chờ giao hàng.", "created_at": "2024 09 20T07:06:22.000000Z", "updated_at": "2024 09 20T07:06:22.000000Z", "product": { "id": 1, "sub_category_id": 2, "name": "[PREMIUM] Tài khoản trải nghiệm premium 14 ngày", "avatar": "https://cdn.cdkeys.com/700x700/media/catalog/product/n/e/new_project_88__2_1.jpg", "is_unique": 0, "deleted_at": null, "created_at": " 000001 11 29T16:53:30.000000Z", "updated_at": null, "warranty_id": 1, "price": 50000, "discount": 0 } }, { "id": 5, "transaction_id": 4, "product_id": 3, "quantity": 1, "price_to_paid": 300000, "content": "Chờ giao hàng.", "created_at": "2024 09 20T07:06:22.000000Z", "updated_at": "2024 09 20T07:06:22.000000Z", "product": { "id": 3, "sub_category_id": 1, "name": "[PREMIUM] Tài khoản bản quyền chính hãng, rank vip hypixel", "avatar": "https://cdn.cdkeys.com/700x700/media/catalog/product/n/e/new_project_88__2_1.jpg", "description": "sddd", "slug": "acc minecraft premium vinh vien rank vip hypixel", "is_unique": 0, "deleted_at": null, "created_at": "2024 09 17T10:54:46.000000Z", "updated_at": "2024 09 17T10:54:46.000000Z", "warranty_id": 1, "price": 300000, "discount": 0 } }, { "id": 6, "transaction_id": 4, "product_id": 2, "quantity": 1, "price_to_paid": 190000, "content": "Tài khoản: giakien@gmail.com\r\nMật khẩu: 12345okand", "created_at": "2024 09 20T07:06:22.000000Z", "updated_at": "2024 09 20T07:06:22.000000Z", "product": { "id": 2, "sub_category_id": 1, "name": "[PREMIUM] Tài khoản bản quyền chính hãng", "avatar": "https://cdn.cdkeys.com/700x700/media/catalog/product/n/e/new_project_88__2_1.jpg", "slug": "tai khoan minecraft premium chinh hang", "is_unique": 0, "deleted_at": null, "created_at": "2024 09 16T16:14:11.000000Z", "updated_at": "2024 09 16T16:14:11.000000Z", "warranty_id": 2, "price": 200000, "discount": 5 } } ], "status": { "id": 1, "name": "pending", "slug": "pending", "deleted_at": null, "created_at": "2024 09 07T07:24:46.000000Z", "updated_at": "2024 09 09T00:26:53.000000Z" } } }