JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<ul id="hubspot-dev-team">
            <div>
                <li id="adamfschwartz">
                    <div class="profile"><img src="https://sphotos-a.xx.fbcdn.net/hphotos-snc6/177538_829157554458_1853716050_o.jpg" style="display: inline; "></div>
                    <h2>Adam</h2>
                    <h3>— Front End Developer</h3>
                    <p>Adam is the shit.</p>
                </li>
                <li id="adamfschwartz">
                    <div class="profile"><img src="https://sphotos-a.xx.fbcdn.net/hphotos-snc6/177538_829157554458_1853716050_o.jpg" style="display: inline; "></div>
                    <h2>Adam</h2>
                    <h3>— Front End Developer</h3>
                    <p>Adam is the shit.</p>
                </li>
                <li id="adamfschwartz">
                    <div class="profile"><img src="https://sphotos-a.xx.fbcdn.net/hphotos-snc6/177538_829157554458_1853716050_o.jpg" style="display: inline; "></div>
                    <h2>Adam</h2>
                    <h3>— Front End Developer</h3>
                    <p>Adam is the shit.</p>
                </li>
                <li id="adamfschwartz">
                    <div class="profile"><img src="https://sphotos-a.xx.fbcdn.net/hphotos-snc6/177538_829157554458_1853716050_o.jpg" style="display: inline; "></div>
                    <h2>Adam</h2>
                    <h3>— Front End Developer</h3>
                    <p>Adam is the shit.</p>
                </li>
                <li id="adamfschwartz">
                    <div class="profile"><img src="https://sphotos-a.xx.fbcdn.net/hphotos-snc6/177538_829157554458_1853716050_o.jpg" style="display: inline; "></div>
                    <h2>Adam</h2>
                    <h3>— Front End Developer</h3>
                    <p>Adam is the shit.</p>
                </li>
                <li id="adamfschwartz">
                    <div class="profile"><img...

CSS

body {
    font-size: 10px;
    color: #444;
    font-family: "Helvetica Neue", Arial, sans-serif;
}
ul#hubspot-dev-team {
  float: left;
  margin: 60px 0 0 64px;
  width: 855px;
}
ul#hubspot-dev-team DIV {
  float: left;
  width: 100%;
  margin: 0 0 50px 0;
  clear: both;
}
ul#hubspot-dev-team li {
  float: left;
  background: #ffffff;
  width: 259px;
  margin: 0;
  padding: 12px;
  border: 1px solid #ffffff;
  position: relative;
  -khtml-border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1.3em;
  line-height: 1.5em;
}
ul#hubspot-dev-team li .profile {
  float: left;
  width: 100%;
  height: 154px;
  background: #f6f6f8;
  -khtml-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  overflow: hidden;
  margin: 0 0 25px 0;
}
ul#hubspot-dev-team li .profile img {
  display: none;
  width: 260px;
}
ul#hubspot-dev-team li h2,
ul#hubspot-dev-team li h3 {
  display: inline;
  margin: 0;
  padding: 0;
  font-weight: bold;
  color: #2f353e;
  font-size: 1.2em;
}
ul#hubspot-dev-team li h2 {
  color: #2f353e;
}
ul#hubspot-dev-team li h3 {
  font-weight: normal;
  font-size: 1.1em;
  color: #adb3b9;
}
ul#hubspot-dev-team li .links {
  position: absolute;
  margin: -6px 0 0 0;
  right: 12px;
  width: 62px;
}
ul#hubspot-dev-team li .links a.twitter {
  float: right;
  width: 30px;
  height: 30px;
  overflow: hidden;
  text-indent: -9000px;
  -khtml-border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
}
ul#hubspot-dev-team li .links a.twitter:hover {
  background-color: #2fbae1;
}
ul#hubspot-dev-team li .links a.twitter:active {
  background-color: #1c9dc2;
}
ul#hubspot-dev-team li .links a.support {
  float: right;
  width: 30px;
  height: 30px;
  overflow: hidden;
  margin: 0 0 0 2px;
  text-indent: -9000px;
  -khtml-border-radius: 15px;
  -moz-border-radius: 15px;
 ...