JSFiddle - React, Tailwind, and code Playground

by gangadharjannu

HTML

<div class="contact">
  asdfad
  <div class="card">
    <div class="card-content">
      <img class="avatar" src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="img">
      <div class="card-body">
      <h5>Jannu, Gangadhar</h5>
      </div>
    </div>
<span class="close-btn">&times;</span>
  </div>
</div>

CSS

.card {
  margin-bottom: 30px;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, .125);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1), -1px 0 2px rgba(0, 0, 0, 0.05);
  position:relative;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.card-content {
  display: flex;
  align-items: center;
  margin-right:10px;
}
.card-body{
  
}
.close-btn{
  position:absolute;
  top:10px;
  right:10px;
}