JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">
<div class="cont">

<div class="card">
  <div class="img" style="background-image:url('https://png.pngtree.com/element_origin_min_pic/16/05/16/205739ba060e909.jpg')"></div>
    <div class="title">CHRIS JOE</div>
    <div class="post">// Designer  //</div>
    <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere asperiores enim itaque, ullam, laudantium laborum? Explicabo quasi sint suscipit voluptates!</div>
    <div class="soc">
      <a href="#"><i class="fab fa-facebook"></i></a>
      <a href="#"><i class="fab fa-vk"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
    </div>
</div>


<div class="card">
  <div class="img" style="background-image:url('https://png.pngtree.com/element_origin_min_pic/16/05/16/205739ba060e909.jpg')"></div>
    <div class="title">CHRIS JOE</div>
    <div class="post">// Designer  //</div>
    <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere asperiores enim itaque, ullam, laudantium laborum? Explicabo quasi sint suscipit voluptates!</div>
    <div class="soc">
      <a href="#"><i class="fab fa-facebook"></i></a>
      <a href="#"><i class="fab fa-vk"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
    </div>
</div>
</div>

CSS

.cont{
  display:flex;
  justify-content:center;
}
.card{
  margin:10px;
  width:250px;
  overflow:hidden;
}

.card:hover .soc,.card:hover .description,.card:hover .soc{
  display:flex;
}
.card:hover{
  color:white;
  background:#00a388;
  cursor:pointer;
}
.card .description{
  text-align:justify;
}
.card .title,
.card .post{
  margin:20px 0;
  font-size:18px;
  text-align:center;
  font-weight:bold;
}
.card .soc,.card .description{
  display:none;
}
.card .soc a{
  background:white;
  width:20px;
  display:block;
  height:20px;
  line-height:20px;
  border-radius:5px;
  margin:10px 5px;
  text-align:center;
  
  color:#00a388;
}
.card .soc{
  justify-content:center;
}
.card .img{
  height:300px;
  width:100%;
  background-size:cover;
  background-position:center;
}