SOURCE

<div class="author">
    <div class="author-image">
      <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTYxIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDU2MSAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTZiMGJiN2NlZGEgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToyOHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNmIwYmI3Y2VkYSI+PHJlY3Qgd2lkdGg9IjU2MSIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIyMDcuODQzNzUiIHk9IjExMi42Ij41NjF4MjAwPC90ZXh0PjwvZz48L2c+PC9zdmc+" alt="...">
    </div>
    <div class="author-tips">
        <h3 class="author-name">Thumbnail label</h3>
        <p>First Name | Last Name</p>
    </div>
    <div class="author-btns">
      <button class="btn btn-default btn-focus">关注</button>
      <button class="btn btn-default">私信</button>
    </div>
</div>

.author{
  width: 250px;
  height: 250px;
  padding: 25px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.author-image{
  width: 80px;
  height: 80px;
  margin: 0 auto;
  overflow: hidden;
}
.author img{
  width: 80px;
  height: 80px;
  border-radius: 100%;
  object-fit: cover;
}
.author-tips,
.author-btns{
  text-align: center;
}
.author-name{
  margin-bottom: 0px;
}
.author-btns>button{
  width: 40%;
  margin: 0 6px;
}
.btn-default:hover{
  background-color: #fff;
}
.btn-focus{
  background-color: #ffe300;
  border-color: #ffe300;
}
.btn-focus:hover{
  background-color: #ffd100;
  border-color: #ffd100;
}