HTML
<section class="bg-washed-blue pa2 pa4-ns">
<article class="ba b--black-10 br2 bg-white pa4 mw6 center">
<div>
<h4 class="f5 fw4 black-60 dib v-mid mv0 mr3">Hashtags</h4>
<a href="" class="f6 no-underline underline-hover blue dib v-mid mb0">Edit</a>
</div>
<ul class="list f6 pl0 mt3 mb0">
<li class="pv2">
<a href="#" class="link blue lh-title">
<span class="fw7 underline-hover">#AmazingSerena</span>
<span class="db black-60">134.5k mentions</span>
</a>
</li>
<li class="pv2">
<a href="#" class="link blue lh-title">
<span class="fw7 underline-hover">#womenintech</span>
<span class="db black-60">11k mentions</span>
</a>
</li>
<li class="pv2">
<a href="#" class="link blue lh-title">
<span class="fw7 underline-hover">#SenWarrenRoastsWellsFargo</span>
<span class="db black-60">99k mentions</span>
</a>
</li>
<li class="pv2">
<a href="#" class="link blue lh-title">
<span class="fw7 underline-hover">#blackgirlmagic</span>
<span class="db black-60">256.5k mentions</span>
</a>
</li>
<li class="pv2">
<a href="#" class="link blue lh-title">
<span class="fw7 underline-hover">#becauseofthemwecan</span>
<span class="db black-60">4.1k mentions</span>
</a>
</li>
<li class="pv2">
<a href="#" class="link blue lh-title">
<span class="fw7 underline-hover">#gillscottheron</span>
<span class="db black-60">20.11k mentions</span>
</a>
</li>
<li class="pv2">
<a href="#" class="link blue lh-title">
<span class="fw7 underline-hover db">#trending</span>
<span class="db black-60">4.1k mentions</span>
</a>
</li>
</ul>
</article>
</section>
css
.ba {
border-style: solid;
border-width: 1px;
}
.b--black-10 {
border-color: rgba(0, 0, 0, .1);
}
.br2 {
border-radius: .25rem;
}
.db {
display: block;
}
.dib {
display: inline-block;
}
.fw4 {
font-weight: 400;
}
.fw7 {
font-weight: 700;
}
.lh-title {
line-height: 1.25;
}
.link {
text-decoration: none;
transition: color .15s ease-in;
}
.link:link, .link:visited {
transition: color .15s ease-in;
}
.link:hover {
transition: color .15s ease-in;
}
.link:active {
transition: color .15s ease-in;
}
.link:focus {
transition: color .15s ease-in;
outline: 1px dotted currentColor;
}
.list {
list-style-type: none;
}
.mw6 {
max-width: 32rem;
}
.black-60 {
color: rgba(0, 0, 0, .6);
}
.blue {
color: #357edd;
}
.bg-white {
background-color: #fff;
}
.bg-washed-blue {
background-color: #f6fffe;
}
.pa2 {
padding: .5rem;
}
.pa4 {
padding: 2rem;
}
.pl0 {
padding-left: 0;
}
.pv2 {
padding-top: .5rem;
padding-bottom: .5rem;
}
.mr3 {
margin-right: 1rem;
}
.mb0 {
margin-bottom: 0;
}
.mt3 {
margin-top: 1rem;
}
.mv0 {
margin-top: 0;
margin-bottom: 0;
}
.no-underline {
text-decoration: none;
}
.f5 {
font-size: 1rem;
}
.f6 {
font-size: .875rem;
}
.center {
margin-right: auto;
margin-left: auto;
}
.v-mid {
vertical-align: middle;
}
.underline-hover:hover, .underline-hover:focus {
text-decoration: underline;
}
@media screen and (min-width: 30em) {
.pa4-ns {
padding: 2rem;
}
}