HTML
<main class="mw6 center">
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
<div class="dtc w2 w3-ns v-mid">
<img src="http://mrmrs.github.io/photos/p/2.jpg" class="ba b--black-10 db br2 w2 w3-ns h2 h3-ns"/>
</div>
<div class="dtc v-mid pl3">
<h1 class="f6 f5-ns fw6 lh-title black mv0">Young Gatchell </h1>
<h2 class="f6 fw4 mt0 mb0 black-60">@yg</h2>
</div>
<div class="dtc v-mid">
<form class="w-100 tr">
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
</form>
</div>
</article>
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
<div class="dtc w2 w3-ns v-mid">
<img src="http://mrmrs.github.io/photos/p/3.jpg" class="ba b--black-10 db br2 w2 w3-ns h2 h3-ns"/>
</div>
<div class="dtc v-mid pl3">
<h1 class="f6 f5-ns fw6 lh-title black mv0">Arnoldo Degraff</h1>
<h2 class="f6 fw4 mt0 mb0 black-60">@99xx88randomhandle</h2>
</div>
<div class="dtc v-mid">
<form class="w-100 tr">
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
</form>
</div>
</article>
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
<div class="dtc w2 w3-ns v-mid">
<img src="http://mrmrs.github.io/photos/p/4.jpg" class="ba b--black-10 db br2 w2 w3-ns h2 h3-ns"/>
</div>
<div class="dtc v-mid pl3">
<h1 class="f6 f5-ns fw6 lh-title black mv0">Deirdre Lachance</h1>
<h2 class="f6 fw4 mt0 mb0 black-60">@favfavfav</h2>
</div>
<div class="dtc v-mid">
<form class="w-100 tr">
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
</form>
</div>
</article>
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
<div class="dtc w2 w3-ns v-mid">
<img src="http://mrmrs.github.io/photos/p/5.jpg" class="ba b--black-10 db br2 w2 w3-ns h2 h3-ns"/>
</div>
<div class="dtc v-mid pl3">
<h1 class="f6 f5-ns fw6 lh-title black mv0">Frederic Starner</h1>
<h2 class="f6 fw4 mt0 mb0 black-60">@hungryhippofanatic</h2>
</div>
<div class="dtc v-mid">
<form class="w-100 tr">
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
</form>
</div>
</article>
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
<div class="dtc w2 w3-ns v-mid">
<img src="http://mrmrs.github.io/photos/p/6.jpg" class="ba b--black-10 db br2 w2 w3-ns h2 h3-ns"/>
</div>
<div class="dtc v-mid pl3">
<h1 class="f6 f5-ns fw6 lh-title black mv0">Cleveland Ridout</h1>
<h2 class="f6 fw4 mt0 mb0 black-60">@purethinking</h2>
</div>
<div class="dtc v-mid">
<form class="w-100 tr">
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
</form>
</div>
</article>
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
<div class="dtc w2 w3-ns v-mid">
<img src="http://mrmrs.github.io/photos/p/7.jpg" class="ba b--black-10 db br2 w2 w3-ns h2 h3-ns"/>
</div>
<div class="dtc v-mid pl3">
<h1 class="f6 f5-ns fw6 lh-title black mv0">Leticia Fearon</h1>
<h2 class="f6 fw4 mt0 mb0 black-60">@retrofeels</h2>
</div>
<div class="dtc v-mid">
<form class="w-100 tr">
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
</form>
</div>
</article>
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
<div class="dtc w2 w3-ns v-mid">
<img src="http://mrmrs.github.io/photos/p/10.jpg" class="ba b--black-10 db br2 w2 w3-ns h2 h3-ns"/>
</div>
<div class="dtc v-mid pl3">
<h1 class="f6 f5-ns fw6 lh-title black mv0">Ahmad Backer</h1>
<h2 class="f6 fw4 mt0 mb0 black-60">@ahmadBB</h2>
</div>
<div class="dtc v-mid">
<form class="w-100 tr">
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
</form>
</div>
</article>
<article class="dt w-100 bb b--black-05 pb2 mt2" href="#0">
<div class="dtc w2 w3-ns v-mid">
<img src="http://mrmrs.github.io/photos/p/11.jpg" class="ba b--black-10 db br2 w2 w3-ns h2 h3-ns"/>
</div>
<div class="dtc v-mid pl3">
<h1 class="f6 f5-ns fw6 lh-title black mv0">Carlie Noakes</h1>
<h2 class="f6 fw4 mt0 mb0 black-60">@carnoakes99</h2>
</div>
<div class="dtc v-mid">
<form class="w-100 tr">
<button class="f6 button-reset bg-white ba b--black-10 dim pointer pv1 black-60" type="submit">+ Follow</button>
</form>
</div>
</article>
</main>
css
.ba {
border-style: solid;
border-width: 1px;
}
.bb {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.b--black-10 {
border-color: rgba(0, 0, 0, .1);
}
.b--black-05 {
border-color: rgba(0, 0, 0, .05);
}
.br2 {
border-radius: .25rem;
}
.db {
display: block;
}
.dt {
display: table;
}
.dtc {
display: table-cell;
}
.fw4 {
font-weight: 400;
}
.fw6 {
font-weight: 600;
}
.button-reset::-moz-focus-inner {
border: 0;
padding: 0;
}
.h2 {
height: 2rem;
}
.lh-title {
line-height: 1.25;
}
.mw6 {
max-width: 32rem;
}
.w2 {
width: 2rem;
}
.w-100 {
width: 100%;
}
.black-60 {
color: rgba(0, 0, 0, .6);
}
.black {
color: #000;
}
.bg-white {
background-color: #fff;
}
.pl3 {
padding-left: 1rem;
}
.pb2 {
padding-bottom: .5rem;
}
.pv1 {
padding-top: .25rem;
padding-bottom: .25rem;
}
.mb0 {
margin-bottom: 0;
}
.mt0 {
margin-top: 0;
}
.mt2 {
margin-top: .5rem;
}
.mv0 {
margin-top: 0;
margin-bottom: 0;
}
.tr {
text-align: right;
}
.f6 {
font-size: .875rem;
}
.center {
margin-right: auto;
margin-left: auto;
}
.v-mid {
vertical-align: middle;
}
.dim {
opacity: 1;
transition: opacity .15s ease-in;
}
.dim:hover, .dim:focus {
opacity: .5;
transition: opacity .15s ease-in;
}
.dim:active {
opacity: .8;
transition: opacity .15s ease-out;
}
.pointer:hover {
cursor: pointer;
}
@media screen and (min-width: 30em) {
.h3-ns {
height: 4rem;
}
.w3-ns {
width: 4rem;
}
.f5-ns {
font-size: 1rem;
}
}
