Social-Post

.card-077 {
  width: 380px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  font-family: system-ui,sans-serif;
  color: #111827;
  transition: background .15s
}
.card-077:hover {
  background: #fafafa
}
.card-077 header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px
}
.card-077 header i {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg,#fca5a5,#ef4444)
}
.card-077 header div {
  display: flex;
  flex-direction: column
}
.card-077 b {
  font-size: 14px
}
.card-077 header span {
  font-size: 12px;
  color: #6b7280
}
.card-077 p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5
}
.card-077 footer {
  display: flex;
  gap: 22px
}
.card-077 footer a {
  font-size: 13px;
  color: #6b7280;
  text-decoration: none
}
.card-077 footer a:hover {
  color: #ef4444
}
.card-077 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

<article class="card-077">
  <header><i></i><div><b>Maya Lindqvist</b><span>@mayal · 2h</span></div></header>
  <p>Finally replaced our media queries with container queries. Removed 340 lines. Nothing broke. Still suspicious.</p>
  <footer><a href="#">18 replies</a><a href="#">42 reposts</a><a href="#">310 likes</a></footer>
</article>