JSFiddle - React, Tailwind, and code Playground

by pierian_design

HTML

<head>
  <link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i,800&display=swap" rel="stylesheet">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">  
  
</head>
<body>
  <div class="item">
    <div class="thumb">
      <img src="http://estudiopatagon.com/themes/wordpress/breek/wp-content/uploads/2019/06/480016-PGKTGR-852-op.jpg" alt="">
    </div>
    <div class="content">
      <h3>Mars is the fourth planet from the Sun</h3>
      <p>Repeated cells and identical rows often seep into Excel worksheets unnoticed. Please meet Quick Dedupe</p>
      <div class="footer">
        <div class="footer-left-circles">
          <a class="read-more" href="#"><span>Read More</span></a>          
        </div>
        <div class="footer-right-circles">
          <a href="" class="toolt"><i class="fa fa-comment" aria-hidden="true"></i></a>
          <a href="" class="toolt"></a>
          <a href="" class="toolt"></a>
        </div>
      </div>
    </div>
  </div>
</body>

CSS

body {
   width: 100%;
   height: 800px;
  background: url(http://estudiopatagon.com/themes/wordpress/breek/wp-content/uploads/2019/06/8048-1920x500.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  font-family: 'Poppins';
  font-weight: 200;
  color: #666;
  font-size: 14px;
  line-height: 1.65;
}
h3 {
  font-size: 21px;
  color: #272727;
  line-height: 1.25;
}
.item  {
  width: 380px;
  margin: 100px auto 0;
  border-radius: 15px;
  overflow: hidden;
   background: #fff;
}

.content {
 padding: 25px 25px 55px;
}

.item img {
  width: 100%;
}

.thumb {
  line-height: 0;
  overflow: hidden;
}

.read-more {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #272727;
}

.read-more:before {
  content: "";
  display: inline-block;
  background: #2196f3;
  color: #fff;  
  border-radius: 30px;
  width: 30px;
  height: 30px;
  margin-right: 8px;
}

.toolt {
display: inline-block;
    width: 30px;
    position: relative;
    margin-left: 5px;
    height: 30px;
    /* background: #E91E63; */
    border-radius: 5px;
    border: 2px dotted #9e9e9e24;
    /* overflow: hidden; */
    text-align: center;
    z-index: 1;
    color: #E91E63;
    font-size: 17px;
}

.footer {
  margin-top: 25px;
}
.footer > * {
    display: inline-block;
    width: 49%;
}
.footer-right-circles {
text-align: right;
    display: flex;
    float: right;
    align-items: center;
    text-align: right;
}