1import { Footnote, Tailwind } from "@fileforge/react-print";
2
3<Tailwind>
4 <div>
5 <div className="bg-gradient-to-r from-blue-600 to-blue-400 -z-10 absolute -left-[2cm] right-[25vw] -skew-y-12 h-[100vh] bottom-[95vh]" />
6 <div className="bg-gradient-to-r from-blue-600 to-blue-800 -z-20 absolute left-[75vw] -right-[2cm] -skew-y-12 h-[100vh] bottom-[90vh]" />
7 <div className="bg-slate-100 -rotate-12 -z-10 absolute -left-[200em] -right-[200em] h-[100vh] top-[75vh]" />
8 <main className="text-slate-800 pt-24 h-[90vh] flex flex-col">
9 <svg
10 version="1.1"
11 id="Layer_1"
12 xmlns="http://www.w3.org/2000/svg"
13 x="0px"
14 y="0px"
15 viewBox="0 0 24 24"
16 className="mx-auto w-32 mb-12 fill-blue-800"
17 >
18 <g>
19 <path
20 d="M22.45,12.12c0-2.91-0.99-5.33-3.03-7.34C17.42,2.76,14.96,1.74,12,1.74c-2.93,0-5.4,1.02-7.43,3.05
21 C2.56,6.8,1.55,9.26,1.55,12.15c0,0.84,0.11,1.63,0.27,2.37l9.71-7.65h5.01v14.58c1.06-0.5,2.03-1.13,2.91-1.99
22 C21.46,17.45,22.45,15.01,22.45,12.12z"
23 />
24 <path d="M4.91,19.78c1.4,1.26,3.03,2.12,4.9,2.48v-6.32L4.91,19.78z" />
25 </g>
26 </svg>
27 <h1 className="text-center text-2xl text-slate-800">
28 Receipt from Acme Inc.
29 </h1>
30 <p className="pt-2 text-slate-400 text-center">Receipt #10192</p>
31 <div className="p-12 flex-grow bg-white rounded-2xl rounded-t-none shadow-xl shadow-black/10">
32 <div className="flex justify-between gap-4">
33 <div>
34 <div className="text-sm text-gray-400 font-bold uppercase pb-1">
35 Amount paid
36 </div>
37 <div className="flex gap-4 items-center">$12.99</div>
38 </div>
39 <div>
40 <div className="text-sm text-gray-400 font-bold uppercase pb-1">
41 Date
42 </div>
43 <div className="flex gap-4 items-center">Feb 8th, 2024</div>
44 </div>
45 <div>
46 <div className="text-sm text-gray-400 font-bold uppercase pb-1">
47 Payment method
48 </div>
49 <div className="flex gap-4 items-center font-mono">
50 <svg
51 xmlns="http://www.w3.org/2000/svg"
52 width="1200"
53 height="800"
54 version="1.1"
55 viewBox="-96 -98.908 832 593.448"
56 className="h-4"
57 >
58 <path
59 fill="#ff5f00"
60 strokeWidth="5.494"
61 d="M224.833 42.298h190.416v311.005H224.833z"
62 display="inline"
63 ></path>
64 <path
65 fill="#eb001b"
66 strokeWidth="5.494"
67 d="M244.446 197.828a197.448 197.448 0 0175.54-155.475 197.777 197.777 0 100 311.004 197.448 197.448 0 01-75.54-155.53z"
68 ></path>
69 <path
70 fill="#f79e1b"
71 strokeWidth="5.494"
72 d="M640 197.828a197.777 197.777 0 01-320.015 155.474 197.777 197.777 0 000-311.004A197.777 197.777 0 01640 197.773z"
73 className="e"
74 ></path>
75 </svg>
76 0911
77 </div>
78 </div>
79 </div>
80 <h2 className="text-slate-600 font-bold text-sm py-6 pt-12 uppercase">
81 Summary
82 </h2>
83 <div className="bg-slate-100 px-6 py-2 rounded-md">
84 <table className="w-full">
85 <tr className="border-b text-slate-500">
86 <td className="py-4">Basic Pro Plan</td>
87 <td className="py-4">$12.99</td>
88 </tr>
89 <tr className="font-bold text-slate-700">
90 <td className="py-4">Amount charged</td>
91 <td className="py-4">$12.99</td>
92 </tr>
93 </table>
94 </div>
95 <hr className="my-6" />
96 This is some additional content to to inform you that Acme Inc. is a
97 fake company and this is a fake receipt. This is just a demo to show you
98 how you can create a beautiful receipt with Onedoc.{" "}
99 <Footnote>
100 Some additional conditions may apply. This template comes from the
101 react-print library, available at https://react.onedoclabs.com/
102 </Footnote>
103 </div>
104 </main>
105 </div>
106</Tailwind>;