Desktop design

Active states

Mobile design

Interactive card details form

<div class="user-card-heading"><p class="card-desc-tags">CARDHOLDER NAME</p><input type="text" name="name" placeholder="e.g. Jane Apleaseed" value=""></div>

<div class="user-card-heading"><p class="card-desc-tags">CARD NUMBER</p><input type="text" name="number" placeholder="e.g. 1234 5678 9123 0000" maxlength="19" value=""></div>

<div class="mainCard"><div class="circles"><div class="bigCircle"></div><div class="smallCircle"></div></div><p class="card-number">0000 0000 0000 0000</p><div class="name-and-date"><p class="name">Jane Appleased</p><p class="date">00/00</p></div></div>

div></div><button class="btn" input="submit">Confir

Please log in to post a comment

Community feedback

I used React hooks to build this project

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community