JSFiddle - React, Tailwind, and code Playground

by Rozina Szogyenyi

HTML

<div class="container">
    <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...

CSS

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

.container {position: relative;}
.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%}
}

.loading--message {
    position: absolute;
    width: 100%;
    text-align:center;
    top: 150px;
    left: 0;
    font-size: 18px;
    color: #003580;
}