<div class="card">
  <h3>Card title</h3>
  <p>Hello</p>
</div>

<div class="card secondary">
  <h3>Card title</h3>
  <p>Hello</p>
</div>

* {
  box-sizing: border-box;
}

body {
  font-family: "Helvetica", sans-serif;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}
.card {
  --color: blue;
  background: color-mix(in srgb, var(--color), white 80%);
  border-top: 5px solid var(--color);
  padding: 1rem;
}

.secondary {
  --color: deeppink;
}