JSFiddle - React, Tailwind, and code Playground

by azrizhaziq

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="row no-gutters d-flex">
  <div class="col-xs-8 d-flex">
    <div class="bg-info heading">
      <p class="d-inline-block text-muted text-uppercase m-0">Motivator TV</p>
      <h3 class="d-inline-block m-0 pl-2">Most New Accounts</h3>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="time-remaining bg-success">
      <p class="mb-0">Time remaining</p>
      <div class="font-size-15 d-flex justify-content-center">
        <div class="d-flex flex-column">
          <span class="fw-bold">1</span>days
        </div>
        :
        <div class="d-flex flex-column">
          <span class="fw-bold">6</span>hrs
        </div>
        :
        <div class="d-flex flex-column">
          <span class="fw-bold">1</span>mins
        </div>
        :
        <div class="d-flex flex-column">
          <span class="fw-bold">32</span>secs
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row no-gutters d-flex">
  <div class="col-xs-8 d-flex flex-column">
    <div class="p-2">
      <div class="row m-0">
        <div class="col-xs-6 p-0">
          <div class="media">
            <div class="media-left p-relative">
              <img class="media-object img-circle" src="http://via.placeholder.com/80x80" alt="...">
            </div>
            <div class="media-body">
              <h4 class="media-heading text-primary">Olivia Jones</h4>
              <p class="font-size-23">22</p>
            </div>
          </div>
        </div>
        <div class="col-xs-6 p-0">
          <div class="media">
            <div class="media-left p-relative">
              <img class="media-object img-circle" src="http://via.placeholder.com/80x80" alt="...">
            </div>
            <div class="media-body">
              <h4 class="media-heading text-primary">Olivia Jones</h4>
              <p class="font-size-23">22</p>
            </div>
        ...

SCSS

.d-inline-block {
  display: inline-block !important;
}

.heading {
  padding: 10px;
  display: flex;
  flex-grow: 1;
  justify-content: flex-start;
  align-items: center;
}

.m-0 {
  margin: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.p-0 {
  padding: 0 !important;
}

.pl-2 {
  padding-left: 10px;
}

.time-remaining {
  padding: 13px;
  display: flex;
  flex-direction: column;
  text-align: center;
  text-transform: uppercase;
}

.row.no-gutters {
  margin-right: 0;
  margin-left: 0; }

.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"]{
  padding-right: 0;
  padding-left: 0; 
}

.p-2 {
  padding: 10px;
}

.font-size-23 {
  font-size: 23px;
}


.font-size-15 {
  font-size: 15px;
}

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}
   
  .flex-row {
  flex-direction: row;
} 
   
.flex-fill {
  flex-grow: 1;
}

.fw-bold {
  font-weight: bold;
}

.justify-content-center {
  justify-content: center;
}

.footer-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  padding: 10px;
}

JavaScript

/*
<div class="media">
              <div class="media-left">
                <a href="#">
      			<img class="media-object img-circle" src="http://via.placeholder.com/80x80" alt="..."></a>
              </div>
              <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                ...
              </div>
            </div>
            
            */