JSFiddle - React, Tailwind, and code Playground

by elizabethkmathew

HTML

<div class="resource-wrapper">
  <div class="resource-image">
  </div>
  <div class="resource-desc">
    <h3>
Increasing Effectiveness of Inclusive Business as a Key Contributor to the SDGs
</h3>
    <p>
      In many developing countries, the demand for goods and services among those living at the bottom of the economic pyramid (BoP) ...
    </p>
    <p class="download-link">Download: <span class="text-link">English</span></p>
    <span class="type-tag">Reports</span>

  </div>
</div>

CSS

.resource-wrapper {
  display: flex;
  width: 50%;
  height: 300px;
  border: 1px solid #e1e1e1;
}

.resource-image {
  width: 200px;
  background-color: red;
  max-height: 400px;
  background-image: url("http://businesscalltoaction.org/sites/default/files/styles/publications/public/resources/Screen%20Shot%202017-06-22%20at%207.45.18%20am.png?itok=hTHax931");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.resource-desc {
  flex: 1;
  padding: 15px;
  position: relative;
}

.type-tag {
  background-color: #ff6924;
  border-top-left-radius: 5px;
  bottom: 0;
  color: #fff;
  font: 12px 'OpenSans-Regular';
  padding: 3px 15px;
  position: absolute;
  right: 0;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.resource-desc h3 {
  margin-top: 0;
}

.text-link {
  color: #ffa800;
  font: 16px 'OpenSans-Semibold';
  position: relative;
  text-decoration: underline;
}