JSFiddle - React, Tailwind, and code Playground

by Ajey

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div id="apologies-list">
                    <ul id="apologies-list-content">
                      <li><a tabindex="-1" href="#">
                            <div class="user-avatar list-padding span12 clearfix" > 
                              <div class="span1">
                                <input class="case" name="case" type="checkbox" value="">
                              </div>
                              <div class="span2">
                                <img id="list-avatar" src="http://placehold.it/60x60" alt="" />
                              </div>
                              <div class="span6">
                                <span>Apologies initials</span>
                                <small>January 31, 2009 9:18 am</small>
                              </div>
                              <div class="span3 ">
                                <span class="badge badge-info custom-badge">2</span>
                                <i class="icon-trash"></i>
                              </div>
                            </div>
                          </a>
                      </li>
                      <li><a tabindex="-1" href="#">
                            <div class="user-avatar span12 list-padding" > 
                              <div class="span1">
                                <input class="case" name="case" type="checkbox" value="">
                              </div>
                              <div class="span2">
                                <img id="list-avatar" src="http://placehold.it/60x60" alt="" />
                              </div>
                              <div class="span6">
                                <span>Apologies initials</span>
                                <small>January 31,...

CSS

ul {
    list-style: none;
}

.custom-badge {
  color: white !important;
  -webkit-border-radius: 4px;
  -moz-border-radius: 9px;
  border-radius: 4px;
  margin-right: 7px;
}

#apologies-list {
  background-color: #F3F3F3;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-sizing: border-box;
  overflow: auto;
  height: 400px;

}

.list-padding {
  border-bottom: 1px solid #ddd;
}

#apologies-list a :hover {
/* color: #FFFFFF; */
  background-color: #32a5c7;
}

.user-avatar .span1 .case {
  margin-left: 4px;
}

.user-avatar .span6 span {
  color: black;
}

.user-avatar .span6 small {
  color: grey;
}

.no-margin {
  margin: 0px;
}