Dark Social Media Post Card

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="post-card-566"><div class="header"><div class="avatar"></div><div class="lines"><div class="line l1"></div><div class="line l2"></div></div></div><div class="media"></div><div class="footer"><span class="icon">𝕏</span><span class="icon">📷</span><span class="icon">📘</span><span class="icon">💼</span></div></div>

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

.post-card-566 { width: 180px; background: #1c1917; border-radius: 16px; padding: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.4); margin: auto; border: 1px solid #292524; font-family: system-ui; }
.post-card-566 .header { display: flex; gap: 8px; margin-bottom: 10px; }
.post-card-566 .avatar { width: 28px; height: 28px; background: #ef4444; border-radius: 6px; flex-shrink: 0; }
.post-card-566 .lines { flex: 1; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.post-card-566 .line { height: 6px; background: #ef4444; border-radius: 3px; }
.post-card-566 .l1 { width: 80%; }
.post-card-566 .l2 { width: 50%; opacity: 0.7; }
.post-card-566 .media { width: 100%; height: 110px; background: #292524; border-radius: 10px; margin-bottom: 10px; }
.post-card-566 .footer { display: flex; justify-content: space-around; font-size: 11px; color: #ef4444; padding-top: 4px; }
.post-card-566 .icon { cursor: pointer; transition: transform 0.2s; }
.post-card-566 .icon:hover { transform: scale(1.2); }