JSFiddle - React, Tailwind, and code Playground

by spoike

HTML

<script src="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<article class="card">
  <div class="card-avatar-photo">
    <img src="http://tretton37img.blob.core.windows.net/ninja-portrait/mikael-brassman" />
  </div>
  <div class="card-info">
    <h1>Mikael Brassman</h1>
    <ul>
      <li class="telephone"><a href="#">+46 123 456 78</a></li>
      <li class="email"><a href="#">[email protected]</a></li>
      <li class="office"><a href="#">Lund</a></li>
    </ul>
  </div>
</article>
<article class="card card-selected">
  <div class="card-avatar-photo">
    <img src="http://tretton37img.blob.core.windows.net/ninja-portrait/mikael-brassman" />
  </div>
  <div class="card-info">
    <h1>Mikael Brassman</h1>
    <ul>
      <li class="telephone"><a href="#">+46 123 456 78</a></li>
      <li class="email"><a href="#">[email protected]</a></li>
      <li class="office"><a href="#">Lund</a></li>
    </ul>
  </div>
</article>

CSS

html {
  font-family: 'Open Sans', sans-serif;
}

a {
  color: #668f2d;
}

.card {
  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
  background-color: white;
  padding: 5px;
  display: flex;
  align-items: center;
}

.card.card-selected {
  background-color: #db4352;
  color: white;
}

.card.card-selected a {
  color: white;
}

.card-avatar-photo {
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 100%;
  background-color: white;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.25);
}

.card-avatar-photo img {
  position: relative;
  left: 10px;
  width: 40px; 
}

.card .card-info {
  margin-left: 5px;
}

.card .card-info h1 {
    font-weight: 300;
    margin: 0;
}

.card .card-info ul {
  font-size: 14px;
  margin: 0; padding: 0;
}
.card .card-info ul li {
  padding: 0; margin: 0;
  font-weight: 300;
  list-style: none;
  display: block;
}

.card .card-info li:before {
  font-family: FontAwesome;
  display: inline-block;
  width: 2ch;
  margin-right: 1ch;
  text-align: center;
  font-size: 0.6rem;
}
.card .card-info li.telephone:before {
  content: '\f095';
}
.card .card-info li.email:before {
  content: '\f003';
}
.card .card-info li.office:before {
  content: '\f0f7';
}