<div class="card">
  <h3>Card</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem nam inventore id itaque dicta eveniet culpa a facilis autem sequi incidunt quia ratione, officia quo laborum nostrum nihil ipsa magnam?</p>
  <footer>
    <a href="#0" class="button">Read More</a>
  </footer>
</div>
html {
  color-scheme: light dark;
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: Canvas;
  font: 100%/1.4 system-ui;
}

.card {
  max-width: 300px;
  border: 5px solid LinkText;
  padding: 1rem;
}
h3 {
  background: ButtonFace;
  color: ButtonText;
  border-bottom: 10px solid VisitedText;
  margin: -1rem -1rem 1rem -1rem;
  padding: 1rem;
}
p {
  font-family: ui-monospace, system-ui;
}
p:last-child {
  margin: 0;
}
.button {
  background: ActiveText;
  color: Field;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}
footer {
  background: Highlight;
  padding: 1rem;
  margin: 0 -1rem -1rem -1rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.