<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="ledger-input">
  <small>
    AMOUNT
  </small>
  <div>
    <b>
      €
    </b>
    <input type="number" placeholder="0.00">
    <span>
      EUR
    </span>
  </div>
</label>

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

.ledger-input{display:block;width:254px;padding:13px;border:2px solid #45586c;border-radius:6px;background:#f8f6ef;color:#45586c;font-family:Arial;box-shadow:4px 4px 0 #45586c}.ledger-input small{font-size:8px;font-weight:800;letter-spacing:1px;color:#84909d}.ledger-input div{display:flex;align-items:center;gap:7px;margin-top:7px;padding-top:8px;border-top:1px dashed #aeb6b9}.ledger-input b{font-size:20px;color:#6ba17c}.ledger-input input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#35485e;font-size:20px;font-weight:800}.ledger-input input::placeholder{color:#bbc3c5}.ledger-input span{padding:4px;border-radius:4px;background:#e1e8e5;font-size:8px;font-weight:800}.ledger-input:focus-within{box-shadow:7px 7px 0 #45586c}