JSFiddle - React, Tailwind, and code Playground
HTML
<div class="users">
<div class="aboutrow">
<div class="col-md-3 sub admin">
<img class=".image-responsive" src="images/pfpics/nord.jpg"/>
<div class="info">
<h1>User</h1>
<h3>Info</h3>
</div>
</div>
<div class="col-md-3 sub admin">
<img class=".image-responsive" src="images/pfpics/nord.jpg"/>
<div class="info">
<h1>User</h1>
<h3>Info</h3>
</div>
</div>
<div class="col-md-3 sub admin">
<img class=".image-responsive" src="images/pfpics/nord.jpg"/>
<div class="info">
<h1>User</h1>
<h3>Info</h3>
</div>
</div>
</div>
<div class="aboutrow">
<div class="col-md-3 sub admin">
<img class=".image-responsive" src="images/pfpics/nord.jpg"/>
<div class="info">
<h1>User</h1>
<h3>Info</h3>
</div>
</div>
</div>
</div>
CSS
.users {
margin:auto;
width:50%;
}
.admin {
margin: 5px;
border-style: solid;
border-width: 1px;
border-color: grey;
box-shadow: 2px 2px 1px grey;
background: white;
background: -webkit-linear-gradient(#fff , #F1F1F1);
background: -o-linear-gradient(#fff , #F1F1F1);
background: -moz-linear-gradient(#fff , #F1F1F1);
background: linear-gradient(#fff , #F1F1F1);
}
.admin img {
display: block;
border-style: solid;
border-width: 1px;
border-color: grey;
max-width: 100%;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
box-shadow: 2px 2px 1px grey;
}
.info {
position: relative;
background-color: #E0E0E0;
}
.info h1 {
padding-top: 10px;
}
.info h3 {
margin-top: 0px;
padding-bottom: 10px;
}
.info h1, h3 {
margin-left: 10px;
}