代码拉取完成,页面将自动刷新
Responsive React Invoice with Bootstrap 5. Various examples like simple invoice, payment receipt, company invoice, invoice with images and many more.
Check out React Invoice Documentation for detailed instructions & even more examples.
import React from "react";
import {
MDBCard,
MDBCardBody,
MDBCol,
MDBContainer,
MDBRow,
MDBTypography,
} from "mdb-react-ui-kit";
export default function App() {
return (
<MDBContainer className="py-5">
<MDBCard>
<MDBCardBody className="mx-4">
<MDBContainer>
<p className="my-5 text-center" style={{ fontSize: "30px" }}>
Thank for your purchase
</p>
<MDBRow>
<MDBTypography listUnStyled>
<li className="text-black">John Doe</li>
<li className="text-muted mt-1">
<span className="text-black">Invoice</span> #12345
</li>
<li className="text-black mt-1">April 17 2021</li>
</MDBTypography>
<hr />
<MDBCol xl="10">
<p>Pro Package</p>
</MDBCol>
<MDBCol xl="2">
<p className="float-end">$199.00</p>
</MDBCol>
<hr />
</MDBRow>
<MDBRow>
<MDBCol xl="10">
<p>Consulting</p>
</MDBCol>
<MDBCol xl="2">
<p className="float-end">$100.00</p>
</MDBCol>
<hr />
</MDBRow>
<MDBRow>
<MDBCol xl="10">
<p>Support</p>
</MDBCol>
<MDBCol xl="2">
<p className="float-end">$10.00</p>
</MDBCol>
<hr style={{ border: "2px solid black" }} />
</MDBRow>
<MDBRow className="text-black">
<MDBCol xl="12">
<p className="float-end fw-bold">Total: $10.00</p>
</MDBCol>
<hr style={{ border: "2px solid black" }} />
</MDBRow>
<div className="text-center" style={{ marginTop: "90px" }}>
<a>
<u className="text-info">View in browser</u>
</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
</MDBContainer>
</MDBCardBody>
</MDBCard>
</MDBContainer>
);
}
Download MDB 5 - FREE REACT UI KIT
Choose your favourite customized component and click on the image
Copy & paste the code into your MDB project
▶️ Subscribe to YouTube channel for web development tutorials & resources
You can find other examples here.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。