<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="garden-note">
  <span class="garden-leaf">
    ❋
  </span>
  <small>
    GARDEN NOTE
  </small>
  <textarea placeholder="What did you notice today?">
  </textarea>
  <b>
    0 / 140
  </b>
</label>

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

.garden-note{position:relative;display:block;width:274px;padding:15px;border-radius:14px;background:#eff7e5;color:#466347;font-family:Arial;box-shadow:inset 3px 3px 7px #cad9bb,-4px -4px 10px #fff}.garden-leaf{position:absolute;right:15px;top:13px;color:#70ab70;font-size:26px;transition:transform .35s}.garden-note small{display:block;margin-bottom:8px;font-size:9px;font-weight:800;letter-spacing:1px;color:#81a477}.garden-note textarea{display:block;width:100%;height:67px;resize:none;border:0;outline:0;background:transparent;color:#466347;font:14px Georgia,serif;line-height:1.4}.garden-note textarea::placeholder{color:#a8bba4}.garden-note b{font-size:9px;color:#90a98b}.garden-note:focus-within{box-shadow:inset 2px 2px 5px #bdcfaa,0 0 0 4px #98c68a55}.garden-note:focus-within .garden-leaf{transform:rotate(32deg) scale(1.15)}