Receipt

1
import { 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>;