JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<div id="container1">

</div>
<div id="container2">
  <div id="circle">
    <img src="http://lorempixel.com/output/people-q-c-200-200-1.jpg">
    </div>
    <button>
    Button 1
    </button>
    <button>
    Button 2
    </button>
    <button>
    Button 3
    </button>
</div>

CSS

#container1 {
  height: 200px;
  background-image: url(http://lorempixel.com/output/abstract-q-c-800-200-10.jpg);
}
#container2 {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#circle {
  border-radius: 100px;
  overflow: hidden;
  display: inline-block;
  margin-top: -100px;
  margin-right: 10px;
}
img {
  vertical-align: bottom;
}
button {
  margin: 10px;
}