JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<div class="top">&nbsp;</div>
<div class="scroll">
    <div id="post-5" class="wc-shortcodes-post-box post-5 post type-post status-publish format-standard has-post-thumbnail hentry category-beaute masonry-brick" style="width: 350px; padding: 0px;">
	<div class="wc-shortcodes-post-border">
					<div class="wc-shortcodes-entry-thumbnail">
                        <a href="http://www.sherylmakeup.fr/une-magnifique-boite-de-chocolat-signee/"><img width="336" style="height:auto;" src="http://www.sherylmakeup.fr/wp-content/uploads/2015/02/03828_theultimatechocolatbox_sp15_hp_v2_ka25-1024x330.jpg" class="attachment-large wp-post-image" alt="03828_theultimatechocolatbox_sp15_hp_v2_ka25"/></a>
			</div>
		
		<div class="wc-shortcodes-post-content">
						<div class="wc-shortcodes-entry-header">
				<h2 class="wc-shortcodes-entry-title">
					<a href="http://www.sherylmakeup.fr/une-magnifique-boite-de-chocolat-signee/" rel="bookmark">Une magnifique boite de chocolat signée Too Faced&nbsp;</a>
				</h2>
			</div><!-- .entry-header -->
			
						<div class="wc-shortcodes-entry-summary">
				&nbsp; Une magnifique boîte Chocolate Box &nbsp;» The Ultimate Chocolate Box &nbsp;» est maintenant disponible en quantité limitée sur le site de Toofaced ! J’attendais sa sortie depuis un moment maintenant ! Toofaced ne livre pas en France mais vous pouvez passer par des sites comme Acheterauxusa.com&nbsp;dont je vous ai déjà fait une revue ici…
			</div><!-- .entry-summary -->
			
				<div class="wc-shortcodes-footer-entry-meta wc-shortcodes-clearfix">
		<div class="wc-shortcodes-entry-meta-inner wc-shortcodes-clearfix">
												<span class="wc-shortcodes-comments-link">
						<a href="http://www.sherylmakeup.fr/une-magnifique-boite-de-chocolat-signee/#comments">10</a>					</span><!-- .comments-link -->
							
			
                                <span class="wc-shortcodes-author"><span class="wc-shortcodes-by">By</span> <a class="wc-shortcodes-url"...

CSS

.top {
    background:url('http://diarypeople.fr/Voyage/images/top.png') no-repeat;
    width:350px;
    height:74px;
    display:block;
}

.scroll {
    background:url('http://diarypeople.fr/Voyage/images/scroll.png') repeat-y top;
    width:350px;
    display:block;
}

.bottom {
    background:url('http://diarypeople.fr/Voyage/images/bottom.png') no-repeat;
    width:350px;
    height:35px;
}

#wrap .wc-shortcodes-posts .wc-shortcodes-post-box {
  background: #ffffff;
}

.wc-shortcodes-post-box {
  margin-bottom: 0;
}

.wc-shortcodes-entry-thumbnail {
  margin: 0;
  text-align: center;
}

.wc-shortcodes-post-content {
  padding: 0 20px;
}

a img {
  border: 0;
}

a, a:visited, a:focus, a:active {
  color: #d4ba4a;
}

a:hover {
    text-decoration:underline;
}

.wc-shortcodes-footer-entry-meta {
  margin-top: 20px;
  margin-bottom: 0;
  font-size: 80%;
}

.wc-shortcodes-entry-meta-inner {
  margin-bottom: 0;
}

.wc-shortcodes-clearfix {
  zoom: 1;
}

.wc-shortcodes-clearfix:before, .wc-shortcodes-clearfix:after {
  content: "";
  display: table;
}

.wc-shortcodes-comments-link {
  float: right;
}