JSFiddle - React, Tailwind, and code Playground

by cferdinandi

HTML

<div class="placeholder placeholder-hero"></div>

<div class="placeholder placeholder-thumbnail"></div>

<div class="placeholder placeholder-paragraph"></div>

<div class="placeholder placeholder-sentence"></div>
<div class="placeholder placeholder-sentence"></div>
<div class="placeholder placeholder-sentence placeholder-sentence-last"></div>

<div class="placeholder placeholder-btn"></div>

CSS

/**
 * Setup keyframes for pulsing animation
 */
@-webkit-keyframes loadingPlaceholders {
	0% {
		background-color: lightgray;
	}
	50% {
		background-color: #e5e5e5;
	}
	100% {
		background-color: lightgray;
	}
}
@keyframes loadingPlaceholders {
	0% {
		background-color: lightgray;
	}
	50% {
		background-color: #e5e5e5;
	}
	100% {
		background-color: lightgray;
	}
}

/**
 * Style the placeholder
 */
.placeholder {
  -webkit-animation: loadingPlaceholders 1.5s ease-in infinite;
          animation: loadingPlaceholders 1.5s ease-in infinite;
  background-color: #e5e5e5;
}

.placeholder-hero {
	height: 20em;
}

.placeholder-heading {
	height: 3em;
	width: 55%;
}

.placeholder-sentence {
	height: 1.5em;
	margin-bottom: 0.5em;
}

.placeholder-sentence-last {
	width: 85%;
}

.placeholder-paragraph {
	height: 8em;
	margin-top: 1.625em;
}

.placeholder-btn {
	height: 3em;
	width: 8em;

}

.placeholder-thumbnail {
	border-radius: 50%;
	height: 9em;
	width: 9em;
}

.placeholder-hero,
.placeholder-heading,
.placeholder-paragraph,
.placeholder-btn,
.placeholder-thumbnail {
	margin-bottom: 1.625em;
}