<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="parcel-card">
  <div class="parcel-route">
    <i>
      ▣
    </i>
    <b>
    </b>
    <span>
    </span>
  </div>
  <small>
    OUT FOR DELIVERY
  </small>
  <h3>
    Your order is nearby
  </h3>
  <p>
    Madrid → Chamberí
    <em>
      Today
    </em>
  </p>
</article>

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

.parcel-card{width:249px;padding:17px;border-radius:16px;background:#e8eef4;color:#35455c;font-family:Arial;box-shadow:0 8px 17px #5e75912b}.parcel-route{position:relative;height:53px}.parcel-route b{position:absolute;top:24px;left:10px;right:10px;border-top:3px dashed #a5b8cd}.parcel-route i{position:absolute;z-index:2;top:13px;left:12px;display:grid;place-items:center;width:23px;height:23px;border-radius:5px;background:#f1aa61;color:#fff;font-style:normal;font-size:14px;animation:parcel-move 3s ease-in-out infinite}.parcel-route span{position:absolute;right:11px;top:18px;width:12px;height:12px;border:3px solid #5588dc;border-radius:50%;background:#e8eef4}.parcel-card small{font-size:9px;font-weight:800;letter-spacing:1px;color:#6685b7}.parcel-card h3{margin:7px 0;font-size:18px}.parcel-card p{margin:0;font-size:10px;color:#77889b}.parcel-card em{float:right;color:#4fa579;font-style:normal;font-weight:800}@keyframes parcel-move{50%{left:184px;transform:rotate(10deg)}}