JSFiddle - React, Tailwind, and code Playground

by ninachroscicka

HTML

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<div>
<table style="width:100%">
<tbody>
  <tr>
  <td class="text-center">
  <img src="https://scontent.fpoz1-1.fna.fbcdn.net/v/t1.0-9/36672746_1935133309865276_2456422105890160640_o.jpg?_nc_cat=0&oh=345841a37c748f81f99a153598b85cfb&oe=5C1EF610" class="img-responsive" />
  <div class="bottom-left">132</div>
  <i class="far fa-heart imtip"></i>
  <i class="fas fa-times imtip2"></i></td>
  <td class="text-center">
  <img src="https://instagram.fpoz1-1.fna.fbcdn.net/vp/cf265a24cad5ad735dbac0b5b1d77f9e/5C3A0A0F/t51.2885-15/sh0.08/e35/s640x640/31199919_2055264951409865_3672249054428921856_n.jpg" class="img-responsive" style="width:100%;" />
    <div class="bottom-left">132</div>
    <i class="far fa-heart imtip"></i>
    <i class="fas fa-times imtip2"></i></td>
  <td class="text-center">
  <img src="https://instagram.fpoz1-1.fna.fbcdn.net/vp/cf265a24cad5ad735dbac0b5b1d77f9e/5C3A0A0F/t51.2885-15/sh0.08/e35/s640x640/31199919_2055264951409865_3672249054428921856_n.jpg" class="img-responsive" style="width:100%;"/>
 <div class="bottom-left">132</div>
 <i class="far fa-heart imtip"></i>
 <i class="fas fa-times imtip2"></i>
 </td>   
  </tr>
  
    <tr>
  <td class="text-center">
  <img src="https://instagram.fpoz1-1.fna.fbcdn.net/vp/cf265a24cad5ad735dbac0b5b1d77f9e/5C3A0A0F/t51.2885-15/sh0.08/e35/s640x640/31199919_2055264951409865_3672249054428921856_n.jpg"...

CSS

.text-center {
  position: relative;
}

.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 30px;
    font-family:'Verdana';
    font-weight:bold;
    font-size:13px;
    color:#58668b;
}

.imtip{
    position:absolute;
    left: 10px;
    bottom: 10px;
    color:  #58668b ;
}

.imtip2{
    position:absolute;
    right: 10px;
    bottom: 10px;
    color:  #363333 ;
    opacity: 0.8;
}

.img-responsive{
  object-fit: cover;
  width: 200px;
  height: 200px;
  border-radius: 10px;
  border: 1.5px solid #fff;

}