Pill Rounded Corporate Login Form

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<form class="pilllogin-card" onsubmit="return false;"><h4>Welcome Back</h4><p>Please enter your login details.</p><input type="email" placeholder="Corporate Email"><input type="password" placeholder="Password"><button type="submit">Sign In</button></form>

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

.pilllogin-card { width: 200px; background: #ffffff; border-radius: 20px; padding: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.06); font-family: system-ui, sans-serif; text-align: center; margin: auto; box-sizing: border-box; }
.pilllogin-card h4 { margin: 0; font-size: 12px; font-weight: 800; color: #1e293b; }
.pilllogin-card p { margin: 2px 0 14px; font-size: 7px; color: #64748b; }
.pilllogin-card input { width: 100%; background: #f1f5f9; border: 1px solid transparent; border-radius: 20px; padding: 8px 12px; font-size: 8px; color: #0f172a; outline: none; margin-bottom: 8px; box-sizing: border-box; }
.pilllogin-card input:focus { background: #fff; border-color: #3b82f6; }
.pilllogin-card button { width: 100%; background: #0f172a; color: #ffffff; border: none; border-radius: 20px; padding: 8px; font-size: 8px; font-weight: 800; cursor: pointer; margin-top: 4px; }