<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="postcard-card">
  <div class="postcard-photo">
    <span>
      ✦
    </span>
    <i>
    </i>
    <i>
    </i>
  </div>
  <div class="postcard-note">
    <small>
      JUNE 18, 2026
    </small>
    <h3>
      Somewhere sunny
    </h3>
    <p>
      Keep the little moments.
    </p>
    <b>
      ↗
    </b>
  </div>
</article>

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

.postcard-card{position:relative;width:230px;padding:10px 10px 17px;border-radius:4px;background:#fffdf7;color:#392e31;font-family:Georgia,serif;box-shadow:7px 11px 22px #3225282b;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}.postcard-card:hover{transform:rotate(-4deg) translateY(-5px)}.postcard-photo{position:relative;height:137px;overflow:hidden;background:linear-gradient(145deg,#f7aa78,#ffc9a4 46%,#7bd0c4 47%);display:grid;place-items:center;color:#fff;font:32px Arial}.postcard-photo i{position:absolute;bottom:-13px;width:140px;height:55px;border-radius:50% 50% 0 0;background:#4d9e91}.postcard-photo i:last-child{left:-42px;bottom:-25px;background:#317f78}.postcard-note{position:relative;padding:12px 7px 0}.postcard-note small{font:700 9px Arial;color:#c67d65;letter-spacing:1px}.postcard-note h3{margin:6px 0 3px;font-size:20px}.postcard-note p{margin:0;font-size:13px;color:#807174}.postcard-note b{position:absolute;right:6px;bottom:0;font:20px Arial;color:#d27761}