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://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>
  <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...

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{
  width: 200px;
  height: 200px;
  border-radius: 10px;
  border: 1.5px solid #fff;

}