Polaroid Style Product Showcase Card

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="polaroid-542"><div class="photo-area"><p>This is a chair.</p></div><div class="details"><span class="title">Cool Chair</span><span class="price">$100</span></div></div>

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

.polaroid-542 { width: 170px; background: #ffffff; border-radius: 4px; padding: 12px 12px 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); font-family: system-ui, sans-serif; margin: auto; transition: transform 0.3s ease; cursor: pointer; }
.polaroid-542:hover { transform: scale(1.03) rotate(-1deg); }
.polaroid-542 .photo-area { width: 100%; height: 150px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; box-sizing: border-box; color: #334155; font-size: 11px; line-height: 1.4; font-weight: 500; margin-bottom: 12px; }
.polaroid-542 .details { display: flex; flex-direction: column; gap: 2px; }
.polaroid-542 .title { font-size: 11px; font-weight: 700; color: #1e293b; }
.polaroid-542 .price { font-size: 12px; font-weight: 900; color: #000000; }