<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="palette-input">
  <span>
    <i>
    </i>
    <i>
    </i>
    <i>
    </i>
  </span>
  <input type="text" placeholder="Name this palette">
  <b>
    #
  </b>
</label>

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

.palette-input{display:flex;align-items:center;gap:11px;width:266px;padding:10px 12px;border-radius:11px;background:#f7f2ed;color:#465260;font-family:Arial;box-shadow:0 5px 12px #4b5a6b20}.palette-input span{position:relative;width:31px;height:31px}.palette-input span i{position:absolute;width:25px;height:25px;border:2px solid #f7f2ed;border-radius:50%;background:#f18c8d;transition:transform .35s}.palette-input span i:nth-child(2){background:#ffc86e}.palette-input span i:nth-child(3){background:#7bc9bc}.palette-input input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#465260;font-size:14px}.palette-input b{color:#9b7ee3;font-size:19px}.palette-input:focus-within span i:nth-child(1){transform:translateX(-5px) rotate(-25deg)}.palette-input:focus-within span i:nth-child(2){transform:translateY(-7px)}.palette-input:focus-within span i:nth-child(3){transform:translateX(6px) rotate(25deg)}