{"html":"

\n \n \n \n \n \n

\n CARD NUMBER\n \n

\n\n

\n CARD HOLDER\n \n

\n\n

\n VALID THRU\n \n

\n CVV\n \n

\n","css":".visa-card {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-end;\n width: 300px;\n height: 180px;\n background-image: radial-gradient(\n circle 897px at 9% 80.3%,\n rgba(55, 60, 245, 1) 0%,\n rgba(234, 161, 15, 0.9) 100.2%\n );\n border-radius: 10px;\n padding: 20px;\n font-family: Arial, Helvetica, sans-serif;\n position: relative;\n gap: 15px;\n}\n.logoContainer {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n height: fit-content;\n position: absolute;\n top: 0;\n left: 0;\n padding: 18px;\n}\n.svgLogo {\n height: 40px;\n width: auto;\n}\n.inputstyle::placeholder {\n color: #ffffff;\n}\n.inputstyle {\n background-color: transparent;\n border: none;\n outline: none;\n color: white;\n caret-color: red;\n font-size: 13px;\n height: 25px;\n letter-spacing: 1.5px;\n}\n.number-container {\n width: 100%;\n height: fit-content;\n display: flex;\n flex-direction: column;\n}\n#cardNumber {\n width: 100%;\n height: 25px;\n}\n.name-date-cvv-container {\n width: 100%;\n height: 25px;\n display: flex;\n gap: 10px;\n}\n.name-wrapper {\n width: 60%;\n height: fit-content;\n display: flex;\n flex-direction: column;\n}\n.expiry-wrapper,\n.cvv-wrapper {\n width: 30%;\n height: fit-content;\n display: flex;\n flex-direction: column;\n}\n.cvv-wrapper {\n width: 10%;\n}\n#expiry,\n#cvv {\n width: 100%;\n}\n.input-label {\n font-size: 8px;\n letter-spacing: 1.5px;\n color: #e2e2e2;\n width: 100%;\n}\n"}

fat-puma-69

👁 实时预览

📝 源代码