<div class="wrapper">

  <article class="card">
    <h2>Card Component</h2>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro vel maiores, pariatur vitae, molestiae earum reiciendis.</p>

    <a href="">Read More</a>
  </article>

  <article class="card" style="--card-color: var(--turquoise)">
    <h2>Card Component</h2>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro vel maiores, pariatur vitae, molestiae earum reiciendis.</p>

    <a href="">Read More</a>
  </article>
</div>
.wrapper {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: var(--s0);
}

.card {
  max-width: 33ch;
  margin: 0 auto;
  padding: var(--s2);
  display: flex;
  flex-direction: column;
  gap: var(--s0);
  border: 1px solid var(--card-color, black);
  border-radius: 3px;
}

.card h2 {
  color: var(--card-color, black);
}

.card a {
  text-decoration: none;
  color: white;
  background-color: var(--card-color, black);
  margin-right: auto;
  padding-inline: var(--s-2);
  padding-block: var(--s-4);
  border-radius: 2px;
}

External CSS

  1. https://codepen.io/romerocs/pen/BawBLER.css

External JavaScript

This Pen doesn't use any external JavaScript resources.