Soft Neumorphic Inset Login Card

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<form class="neu-card" onsubmit="return false;"><h3>Sign In</h3><div class="neu-field"><input type="email" placeholder="Email Address"></div><div class="neu-field"><input type="password" placeholder="Password"></div><button type="submit" class="neu-btn">Log In</button></form>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.neu-card { width: 200px; background: #e0e5ec; border-radius: 20px; padding: 20px; box-shadow: 9px 9px 16px #a3b1c6, -9px -9px 16px #ffffff; font-family: system-ui, sans-serif; text-align: center; margin: auto; box-sizing: border-box; }
.neu-card h3 { margin: 0 0 14px; font-size: 13px; font-weight: 800; color: #4d5b7c; }
.neu-field { background: #e0e5ec; border-radius: 10px; box-shadow: inset 3px 3px 6px #a3b1c6, inset -3px -3px 6px #ffffff; padding: 2px 8px; margin-bottom: 10px; }
.neu-field input { width: 100%; border: none; background: transparent; padding: 7px 0; font-size: 8px; color: #4d5b7c; outline: none; }
.neu-btn { width: 100%; background: #e0e5ec; color: #4d5b7c; border: none; border-radius: 10px; padding: 8px; font-size: 8px; font-weight: 800; cursor: pointer; box-shadow: 4px 4px 8px #a3b1c6, -4px -4px 8px #ffffff; margin-top: 4px; }
.neu-btn:active { box-shadow: inset 2px 2px 5px #a3b1c6, inset -2px -2px 5px #ffffff; }