JSFiddle - React, Tailwind, and code Playground

HTML

<article class="card card--highlight">
    <figure class="card__figure">
        <img class="card__image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5bhPwAHzALtznmijAAAAABJRU5ErkJggg==" alt="The color #ffed00.">
        <figcaption class="card__caption">#ffed00</figcaption>
    </figure>
    <h2 class="card__headline">Corporate yellow</h2>
    <p class="card__description">This yellow is defined as #ffed00. It is a very nice color. It is one of our corporate colors at visuellverstehen.</p>
</article>

CSS

.card {
  font-family: sans-serif;
  line-height: 1.5;
  padding: 1rem;
  max-width: 20rem;
  border: 0.25rem solid #f6f6f6;
}

.card.card--highlight {
  border-color: #ffed00;
}

.card__figure {
  margin: 0;
}

.card__image {
  display: block;
  width: 100%;
  height: 6rem;
}

.card__caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.card__headline {
  font-size: 1.5rem;
  font-weight: bold;
}

JavaScript

(function () {

  var initializeCard = function($card) {
    console.log('Do whatever this $card block should be doing.');
  };

  document.addEventListener('DOMContentLoaded', function() {
    var $cards = document.querySelectorAll('.card');

    for (var i = $cards.length - 1; i >= 0; i--) {
      initializeCard($cards[i]);
    }
  });

}());