create me html css payment method field in the payment method I usdt bank transfer and PayPal if someone select bank transfer then dropdown with bank list Nigeria t show account number number moe in keybord snf account name read-only if someone select usdt then network trc or erc to show dropdown with icon and wallet address also if someone select PayPal then PayPal email address to show I need all fields and dropdown to have eicon on it I need button gredient I need very good I need very good design perfect I need all code in one place
very good optimazed I don’t want section to be too big same size of the dashboard card very good UI design ever mobile friendly no head tag and body tag
sample design I need
<!– Google Font: Inter –>
<link href=”https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap” rel=”stylesheet”>
<!– Font Awesome –>
<link href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css” rel=”stylesheet”>
<!– Optimized Premium Balance Card –>
<div style=”
font-family:’Inter’, sans-serif;
max-width:380px;
margin:auto;
background:#ffffff;
border-radius:24px;
padding:24px 20px;
color:#111827;
box-shadow:0 16px 32px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
transition:transform 0.3s ease, box-shadow 0.3s ease;
”
onmouseover=”this.style.transform=’translateY(-4px)’; this.style.boxShadow=’0 24px 40px rgba(0,0,0,0.12), 0 6px 12px rgba(0,0,0,0.06)'”
onmouseout=”this.style.transform=’translateY(0)’; this.style.boxShadow=’0 16px 32px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)'”
>
<!– Title –>
<div style=”
font-size:13px;
color:#6b7280;
margin-bottom:4px;
letter-spacing:0.6px;
text-transform:uppercase;
“>
Available Balance
</div>
<!– Amount with Gradient –>
<div style=”
font-size:44px;
font-weight:700;
margin-bottom:6px;
background: linear-gradient(90deg, #4f46e5, #4338ca, #06b6d4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
“>
₦45,000<span style=”font-size:24px; font-weight:600;”>.00</span>
</div>
<!– Data Bonus –>
<div style=”
display:inline-flex;
align-items:center;
gap:6px;
font-size:14px;
font-weight:600;
color:#1e3a8a;
background:linear-gradient(135deg, #dbeafe, #c7d2fe);
padding:4px 12px;
border-radius:999px;
margin-bottom:20px;
box-shadow:0 4px 8px rgba(99,102,241,0.2);
“>
<i class=”fa-solid fa-wifi”></i>
Data Bonus 100MB
</div>
<!– Buttons –>
<div style=”display:flex; gap:12px;”>
<!– Earn Button –>
<a href=”https://your-earn-url.com” style=”
flex:1;
padding:12px 0;
background: linear-gradient(135deg, #4f46e5, #4338ca);
color:#ffffff;
font-weight:600;
font-size:15px;
border-radius:16px;
text-decoration:none;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
box-shadow:0 12px 24px rgba(67,56,202,0.35);
transition:all 0.25s ease;
”
onmouseover=”this.style.transform=’translateY(-2px) scale(1.02)’; this.style.boxShadow=’0 16px 32px rgba(67,56,202,0.45)'”
onmouseout=”this.style.transform=’translateY(0) scale(1)’; this.style.boxShadow=’0 12px 24px rgba(67,56,202,0.35)'”
>
<i class=”fa-solid fa-rocket” style=”font-size:17px;”></i>
Earn Now
</a>
<!– Withdraw Button –>
<a href=”https://your-withdraw-url.com” style=”
flex:1;
padding:12px 0;
background:#f9fafb;
color:#1e40af;
font-weight:600;
font-size:15px;
border-radius:16px;
text-decoration:none;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
border:1px solid #cbd5e1;
transition:all 0.25s ease, background 0.25s ease;
”
onmouseover=”this.style.transform=’translateY(-2px) scale(1.02)’; this.style.background=’#e0e7ff’;”
onmouseout=”this.style.transform=’translateY(0) scale(1)’; this.style.background=’#f9fafb’;”
>
<i class=”fa-solid fa-money-bill-transfer” style=”font-size:17px;”></i>
Withdraw
</a>
</div>
</div>