JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div class="votecell">
<div class="votes">
<span title="This question is useful and clear (click again to undo)" class="vote-up-off">up vote</span>
<span class="vote-count-post" title="View upvote and downvote totals">68</span>
<span title="This question is unclear or not useful (click again to undo)" class="vote-down-off">down vote</span>
</div>
<div class="favorites">
<span title="This is a favorite question (click again to undo)" class="star-off">favorite</span>
<span class="fav-count">89</span>
</div>
</div>
<div class="postcell">
<div class="post-text">
<p>Does anyone know interesting clones of the SO web site model?</p>
<p><strong>Please list valid clones.</strong></p>
<p>If the site exists in this <a rel="nofollow" href="http://meta.stackexchange.com/questions/4/list-of-stackexchange-sites">list</a> of Stack Exchange sites it is not a clone but part of the self-hosted Stack Overflow solution.</p>
</div>
<ul class="post-taglist">
<li><a rel="tag" title="show questions tagged 'discussion'" class="post-tag required-tag" href="/questions/tagged/discussion">discussion</a></li>
<li><a rel="tag" title="show questions tagged 'so-family'" class="post-tag" href="/questions/tagged/so-family">so-family</a></li>
</ul>
<ul class="post-menu">
<li><a title="short permalink to this question" href="/q/2267/150097">link</a></li>
<li><a title="edit this post, or roll it back to a previous revision" href="/posts/2267/edit">edit</a></li>
<li><a title="flag this post for serious problems or moderator attention" href="#">flag</a></li>
</ul>
<div class="history">
<div class="post-signature">
<p>edited <span class="relativetime" title="2009-06-28...
CSS
/* Global Styles */
#container {
width: 730px;
margin: 20px auto;
overflow: hidden;
font-family: Arial, sans-serif;
font-size: 14px;
}
a {
color: #6C0000;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
strong {
font-weight: bold;
}
em {
text-style: italics;
}
.cool {
color: #999999 !important;
}
.warm {
color: #555555 !important;
}
.hot {
color: #000000 !important;
}
.supernova {
color: #4E0000 !important;
}
.clearfix {
clear: both;
}
/* Sprites */
.vote-up-off, .vote-up-on,
.vote-down-off, .vote-down-on,
.star-off, .star-on,
.comment-up-off, .comment-up-on,
.comment-flag-off, .comment-flag-on,
.badge1, .badge2, .badge3 {
background-image: url(http://meta.stackoverflow.com/content/stackoverflowmeta/img/sprites.png);
background-repeat: none;
text-indent: -9999px;
}
.vote-up-on, .vote-up-off,
.vote-down-off, .vote-down-on,
.star-off, .star-on {
cursor: pointer;
margin: 0 auto;
}
.vote-up-on, .vote-up-off,
.vote-down-off, .vote-down-on {
width: 41px;
height: 25px;
}
.vote-up-on { background-position: 0 -230px; }
.vote-up-off { background-position: 0 -265px; }
.vote-down-on { background-position: 0 -330px; }
.vote-down-off { background-position: 0 -300px; }
.star-off, .star-on {
height: 31px;
width: 33px;
}
.star-off { background-position:0 -150px; }
.star-on { background-position:0 -190px; }
.comment-up-off, .comment-up-on,
.comment-flag-off, .comment-flag-on {
width: 14px;
height: 14px;
display: inline-block;
}
.comment-up-off { background-position: 0 -410px; }
.comment-up-on,
.comment-up-off:hover { background-position: 0 -390px; }
.comment-flag-off { background-position: 0 -740px; }
.comment-flag-on,
.comment-flag-off:hover{ background-position: 0 -715px; }
/* Layout */
.votecell {
width: 60px;
float: left;
}
.postcell {
width: 670px;
float: left;
font-size: 12px;
}
/* Votes and Favorites...