JSFiddle - React, Tailwind, and code Playground

by jezzipin

HTML

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row no-gutters">
    <div class="col">
     <img class="img-fluid" src="https://images.unsplash.com/photo-1506345276770-5a21fcc0e8bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80">
    </div>
    <div class="col red-contrast text-padding">
      <div class="card--text">
        <div class="card--category">Azure</div>
        <div class="card--title">Azure Front Door</div>
        <div class="card--description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>  
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.red-contrast{
  background-color: #ff1327;
}

.card--text{
  color: white;
  margin: 25% 10%;
}

.card--title{
  font-weight: bold;
  font-size: 2em;
  margin-bottom: 0.25em;
}

.card--category{
  text-transform: uppercase;
  font-size: 0.75em;
  margin-bottom: 0.25em;
}