JSFiddle - React, Tailwind, and code Playground

by stevenkaspar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container-fluid card__layout">

  <a class="card mb-4 project__card">
    <img class="card-img-top" src="img/one.jpg" alt="">
    <div class="card-block">
      <h6 class="card-title text-center text-truncate card__header card__header__green">Front-End Programmer</h6>
      <p class="card-text text-center card__content__ellipsis">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <div class="card__project__bookmark__styling">
        <i class="fa fa-bookmark-o pr-2"></i>Bookmark
      </div>
      <!--- if bookmarked - - - - - - - - - - - - - - - - - - - - - - - - - - - -
          <div class="card__project__bookmark__styling card__bookmarked">
            <a href="#" class="card__project__bookmark__styling"><i class="fa fa-bookmark-o pr-2"></i>Bookmarked</a>
          </div>
          --------------------------------------------------------------------------->
    </div>
    <div class="card-block card__border__top d-flex justify-content-between">
      <p class="card-text card__location text-truncate"><i class="fa fa-map-marker pr-2"></i><small class="text-muted">Washington DC, United States of America</small></p>
      <small class="text-muted time__shorten">24hr</small>
    </div>
  </a>
</div>