JSFiddle - React, Tailwind, and code Playground

by karlhorky

HTML

<div id="news" class="span-image-title clear content-wrapper centred">
						<div class="item">

				<div class="desc bgwhite pdd">
					<h4 class="title-font lightblue">Lorem ipsum dolor sit amet.</h4>
					<p class="text-color">2th of January, 2015</p>
				</div>

				<div class="image" style="background-image:url('//i.ytimg.com/vi/TZiQK81Rjfw/maxresdefault.jpg');"></div>

				<div class="desc-body">
					<div class="table-wrap">
						<div class="table-cell">
							<div class="entry-content pdd">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, debitis.</p>
							</div>
							<a href="#" class="blue-btn title-font uppercase lightblue inline-block">Read More</a>
						</div>

					</div>
				</div>
					
			</div>
						<div class="item">

				<div class="desc bgwhite pdd">
					<h4 class="title-font lightblue">Aliquid facere in placeat fugiat!</h4>
					<p class="text-color">2th of January, 2015</p>
				</div>

				<div class="image" style="background-image:url('//i.ytimg.com/vi/TZiQK81Rjfw/maxresdefault.jpg');"></div>

				<div class="desc-body">
					<div class="table-wrap">
						<div class="table-cell">
							<div class="entry-content pdd">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, debitis.</p>
							</div>
							<a href="#" class="blue-btn title-font uppercase lightblue inline-block">Read More</a>
						</div>

					</div>
				</div>
					
			</div>
						<div class="item">

				<div class="desc bgwhite pdd">
					<h4 class="title-font lightblue">Iure magnam, omnis unde jamie.</h4>
					<p class="text-color">2th of January, 2015</p>
				</div>

				<div class="image" style="background-image:url('//i.ytimg.com/vi/TZiQK81Rjfw/maxresdefault.jpg');"></div>

				<div class="desc-body">
					<div class="table-wrap">
						<div class="table-cell">
							<div class="entry-content pdd">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum,...

CSS

@import url("http://fonts.googleapis.com/css?family=Montserrat");
.span-2 .item { overflow: hidden; }

.span-3 .item { overflow: hidden; }

.span-4 .item { overflow: hidden; }

@media only screen and (max-width: 560px) { .span-2 .item { float: none; display: block; width: 100%; }
  .span-3 .item { float: none; display: block; width: 100%; }
  .span-4 .item { float: none; display: block; width: 100%; } }
@media only screen and (min-width: 561px) and (max-width: 960px) { .span-2 .item { float: left; width: 50%; }
  .span-3 .item { float: left; width: 50%; }
  .span-4 .item { float: left; width: 33.33333%; } }
@media only screen and (min-width: 961px) { .span-2 .item { float: left; width: 50%; }
  .span-3 .item { float: left; width: 33.33333%; }
  .span-4 .item { float: left; width: 25%; } }
.field { padding: .1em; }
.field .text { padding: .5em; }
.field .text, .field .submit { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0 none; border-radius: 0; width: 100%; }
.field .text:focus, .field .submit:focus { outline: 0 none; }
.field .submit:hover { cursor: pointer; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, figure, blockquote, th, td, header { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 220%; }

a { text-decoration: none; outline: 0 none; color: inherit; }

a img { border: 0 none; }

hr { border: 0 none; display: block; }

.chromeframe { background-color: #ffb; font: normal bold 12px Arial, Helvetica, sans-serif; border-bottom: 2px solid #DDD; padding: 10px; margin-bottom: 10px; }

blockquote { margin-left: 25px; }

fieldset { border: none; }

input[type="submit"] { border: 0 none; }

html, body { margin: 0; padding: 0;...