JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapp">
  <ul class="wrapp__list">
    <li class="wrapp__item">
      <div class="box__img">
        <img src="http://lorempixel.com/220/170" alt="" class="box__photo">
      </div>
      <div class="box__info">
        <h1 class="box__title">Title</h1>
        <div class="box__desc">
          Some product with some price  
        </div>
        <div class="box__download">
           <a href="#" class="box__link">Download App</a>
        </div>
      </div>
    </li>
    <li class="wrapp__item">
      <div class="box__img">
        <img src="http://lorempixel.com/220/170" alt="" class="box__photo">
      </div>
      <div class="box__info">
        <h1 class="box__title">Title</h1>
        <div class="box__desc">
          Some product with some price  
        </div>
        <div class="box__download">
           <a href="#" class="box__link">Download App</a>
        </div>
      </div> 
    </li>
    <li class="wrapp__item">
      <div class="box__img">
        <img src="http://lorempixel.com/220/170" alt="" class="box__photo">
      </div>
      <div class="box__info">
        <h1 class="box__title">Title</h1>
        <div class="box__desc">
          Some product with some price  
        </div>
        <div class="box__download">
           <a href="#" class="box__link">Download App</a>
        </div>
      </div>
    </li>
    <li class="wrapp__item">
      <div class="box__img">
        <img src="http://lorempixel.com/220/170" alt="" class="box__photo">
      </div>
      <div class="box__info">
        <h1 class="box__title">Title</h1>
        <div class="box__desc">
          Some product with some price  
        </div>
        <div class="box__download">
           <a href="#" class="box__link">Download App</a>
        </div>
      </div>
    </li>
     <li class="wrapp__item">
      <div class="box__img">
        <img src="http://lorempixel.com/220/170" alt="" class="box__photo">
      </div>
      <div class="box__info">
        <h1...

CSS

body, html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.wrapp {
  width: 700px;
  min-height: 100%;
  background: #c1c1c1;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

h1,h2,h3,h4,h5,h6 {
  color: blue;
  font-size: 21px;
  font-weight: bold;
  padding: 0;
  margin: 0;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: white;
}

.wrapp__list {
  width: 100%;
  height: 100%;  
  font-size:0;
  padding: 5px;
}

.wrapp__item {
  position: relative;
  overflow: hidden;
  display: inline-block;
  box-sizing: border-box;
  width: 220px;
  height: 280px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .4), -1px -1px 3px rgba(0, 0, 0, .4);
  font-size:14px;
  margin-right:15px;
  margin-bottom: 15px;
  border-radius: 10px;
}

.wrapp__item:nth-child(3n) {
  margin-right:0;
}

.box__img {
  display: block;
  max-width: 220px;
  max-height: 170px;
}

.box__photo {
  display:block;
  width: 100%;
  height: 100%;
}

.box__info {
  padding: 20px;
  text-align: left;
  background: #fff;
}

.box__download {
  text-align: center;
  margin-top: 10px;
}

.box__link {
  padding: 5px 10px;
  background:blue;
  border-radius: 10px;
}
.box__link:hover {
  background: #fff;
  color: blue;
  border: 1px solid blue;
  box-sizing: border-box;
}

.box__link:hover,
.box__link:not(:hover) {
  transition: .3s;
}