JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card clear">
            <div class="card-heading"> 
            <img src="<%= gravatar current_user.email, 20 %>">
            <%= story.owner.name%>: <%= link_to "##{story.id} #{story.title}", user_story_path(story) %>
            </div>
            <div class="card-body feature">asdsadsdsdddsadsadsadasdsadsasasaassadasdasdasdsadsadasdsadsadasdasdsaadadsdasdsadsadsadsdsdassadsasadsadsdasdasdasdasdasdasdasdasdasdas</div>   
            <div class="card-footer">
              <i class="fa fa-comment-o"> </i><%= story.comments.size %>
              <i class="fa fa-file-o"> </i><%= story.attachments.size %>

            </div>         
          </div>

CSS

.card {
  display: block;
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
  padding: 4px;
  font-size: 14px;
}

.clear { clear: both;}

.card-heading {
  color: #454545;
  background-color: #f5f5f5;
  border-color: #ddd;
  padding: 10px 15px;
  border: 1px solid rgba(0,0,0,0.2);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  text-align: left;
  font-weight: bold;
}

.card-body {
  padding: 15px;
  border-left: 1px solid rgba(0,0,0,0.2);
  border-right: 1px solid rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(0,0,0,0.2);
  word-wrap: break-word;
}

.card-footer {
 padding: 4px;
 background-color: #f5f5f5;
 border-bottom-right-radius: 3px;
 border-bottom-left-radius: 3px;
 border-left: 1px solid rgba(0,0,0,0.2);
 border-right: 1px solid rgba(0,0,0,0.2);
 border-bottom: 1px solid rgba(0,0,0,0.2);
 text-align: left;
}

.feature {
  background-color: #F8FCF0;
}

.error {
  background-color: #F3E1E1;
}