JSFiddle - React, Tailwind, and code Playground

by Matt Reynolds

HTML

<div class="col-sm-6 col-md-4">
  <div class="card">
    <a class="" href="">
      <div class="model">
        <div class="thumbnail">
          <img src="https://picsum.photos/800/900" alt="thumbnail">
          <div class="insert-text"><p>143 pics</p></div>
        </div>
        <div class="info">

          <span class="title">The model name </span>
          <div class="description">
            <span class="country">Country </span> |
            <span class="date">3 days</span>
          </div>
        </div>
      </div>
    </a>
  </div>

CSS

.card {
  width: 100%;
  text-decoration: none;
  overflow: hidden;
}

.card a {
  color: black;
  text-decoration: none;
  display: block;
}

.info {
  display: block;
  overflow: hidden;
  height: 50px;
}

.description {
  display: block;
  color: #555;
  font-size: 12px;
}

.thumbnail {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #222;
  position: relative;

}
.insert-text{
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  color: red;
}

.thumbnail img {
  width: 100%;
}