<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="cloud-card">
  <div class="cloud-dock">
    <i>
      •
    </i>
    <i>
      •
    </i>
    <i>
      •
    </i>
    <b>
      ☁
    </b>
  </div>
  <small>
    SYNC COMPLETE
  </small>
  <h3>
    48.2 GB free
  </h3>
  <p>
    <span>
    </span>
    62% used
  </p>
</article>

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

.cloud-card{width:230px;padding:16px;border-radius:17px;background:#e6f1ff;color:#38517a;font-family:Arial;box-shadow:0 8px 17px #5d8ec136}.cloud-dock{position:relative;height:75px;overflow:hidden;border-radius:11px;background:#b9d6f7}.cloud-dock b{position:absolute;bottom:7px;left:84px;color:#fff;font-size:42px;text-shadow:0 3px 4px #5a8eb455}.cloud-dock i{position:absolute;top:-10px;color:#5a83d4;font:bold 24px Arial;animation:cloud-drop 2s linear infinite}.cloud-dock i:nth-child(1){left:50px}.cloud-dock i:nth-child(2){left:99px;animation-delay:.65s}.cloud-dock i:nth-child(3){left:145px;animation-delay:1.3s}.cloud-card small{display:block;margin-top:13px;font-size:9px;font-weight:800;letter-spacing:1px;color:#668bd0}.cloud-card h3{margin:7px 0;font-size:20px}.cloud-card p{margin:0;color:#748ca9;font-size:10px}.cloud-card p span{display:inline-block;width:53px;height:5px;border-radius:5px;background:linear-gradient(90deg,#618bd9 62%,#c6d8ee 62%)}@keyframes cloud-drop{to{transform:translateY(61px);opacity:0}}