JSFiddle - React, Tailwind, and code Playground

by Yorrick Bakker

HTML

<div class="portBlock">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/27/Square%2C_Inc_-_Square_Logo.jpg">

<p>
Text
</p>

</div>

CSS

.portBlock {
  position: relative;
  width: 50%;
  height: auto;
}

.portBlock img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}

.portBlock p {
  font-size: 5vw;
  position: absolute;
  color: pink;
  width: 100%;
  top: calc(50% - 7vw);
  text-align: center;
  overflow: hidden;
}