JSFiddle - React, Tailwind, and code Playground

by Rozina Szogyenyi

HTML

<div class="card">
		<div class="background--grey placeholder--image"></div>
		<div class="text--container">
			<p class="background--grey text--thick"></p>
			<p class="background--grey text--thin"></p>
		</div>

		<hr class="background--grey divider" />

		<div class="text--container">
			<div class="background--grey review--score"></div>
			<p class="background--grey text--thin review--detail"></p>
			<p class="background--grey text--thin review--detail"></p>
			<div style="clear: both;"></div>
		</div>

		<hr class="background--grey divider" />

		<div class="text--container padding-bottom">
			<p class="background--grey button"></p>
		</div>

	</div>
	<div class="card">
		<div class="background--grey placeholder--image"></div>
		<div class="text--container">
			<p class="background--grey text--thick"></p>
			<p class="background--grey text--thin"></p>
		</div>

		<hr class="background--grey divider" />

		<div class="text--container">
			<div class="background--grey review--score"></div>
			<p class="background--grey text--thin review--detail"></p>
			<p class="background--grey text--thin review--detail"></p>
			<div style="clear: both;"></div>
		</div>

		<hr class="background--grey divider" />

		<div class="text--container padding-bottom">
			<p class="background--grey button"></p>
		</div>

	</div>
	<div class="card">
		<div class="background--grey placeholder--image"></div>
		<div class="text--container">
			<p class="background--grey text--thick"></p>
			<p class="background--grey text--thin"></p>
		</div>

		<hr class="background--grey divider" />

		<div class="text--container">
			<div class="background--grey review--score"></div>
			<p class="background--grey text--thin review--detail"></p>
			<p class="background--grey text--thin review--detail"></p>
			<div style="clear: both;"></div>
		</div>

		<hr class="background--grey divider" />

		<div class="text--container padding-bottom">
			<p class="background--grey button"></p>
		</div>

	</div>

CSS

* {font-family: 'Helvetica Neue', sans-serif;}
	body {padding: 20px; box-sizing: border-box;}
	p {margin: 0 0 8px 0; padding: 0;}

	.card {background: #f2f4f6; border-radius: 3px; width: 32%; margin-right: 1%; float: left; }
	.background--grey {background: #e5e9ed;}
	.placeholder--image {height: 196px; border-top-right-radius: 3px; border-top-left-radius: 3px;}
	.text--container {padding: 12px 12px 2px 12px;}
	.text--thick {height: 18px;}
	.text--thin {height: 11px;}
	.divider {margin: 0; border: none;  height: 1px;}
	.review--score { width: 30px; height: 30px; border-radius: 3px 3px 3px 0; float: left; }
	.review--detail {float: left; width: 50%; margin-left: 12px;}
	.button {height: 39px; margin-bottom: 0; border-radius: 3px;}
	.padding-bottom {padding-bottom: 12px;}

	.background--grey {
		background: linear-gradient(to right, rgba(229,233,237,1) 30%,rgba(242,244,246,1) 49%,rgba(229,233,237,1) 70%);
		background-size: 400% 400%;

		-webkit-animation: Loading 3s ease infinite;
		-moz-animation: Loading 3s ease infinite;
		animation: Loading 3s ease infinite;
	}
	

	@-webkit-keyframes Loading {
	    0%{background-position:0% 51%}
	    50%{background-position:100% 50%}
	    100%{background-position:0% 51%}
	}
	@-moz-keyframes Loading {
	    0%{background-position:0% 51%}
	    50%{background-position:100% 50%}
	    100%{background-position:0% 51%}
	}
	@keyframes Loading { 
	    0%{background-position:0% 51%}
	    50%{background-position:100% 50%}
	    100%{background-position:0% 51%}
	}