JSFiddle - React, Tailwind, and code Playground

HTML

<div id="js-goto-first" class="u-mb-responsive-xx-large u-flex-center-min48em">
					<div class="c-card c-card--margin-bottom u-boxshadow-0-0dot1rem-0dot1rem-a0dot9 background-red translate3d-to-upper-left">
						<img class="p-decoration-img--position-right-top u-pos-a" src="img/common-img/butterfly-four.png" alt="" />
						<img class="c-card__img u-is-hover-scale-110ｐｅｒ u-transform-0dot5s-ease" src="http://placekitten.com/g/340/340" alt="桜餅" />
						<dl>
							<dt class="c-card-headding">北海道産小豆100%桜餅</dt>
							<dd>
								AAAAAAAAAAAAAAAAA
								<br />AAAAAAAAAAAAAA
								<br />AAAAAAAAAAAAAA
							</dd>
						</dl>
						<p><a href=""><img class="c-btn c-btn-skin u-hover-brilliancy-outside-inside u-transition-all-1s" src="img/common-img/details-button.png" alt=""></a></p>
						<p><a href=""><img class="c-btn c-btn-skin u-hover-brilliancy-outside-inside u-transition-all-1s" src="img/common-img/cart-button.png" alt=""></a></p>
					</div>
					<div class="c-card c-card--margin-bottom u-boxshadow-0-0dot1rem-0dot1rem-a0dot9 background-red translate3d-to-upper-left u-animation-delay-500ms">
						<img class="p-decoration-img--position-right-top u-pos-a" src="img/common-img/butterfly-four.png" alt="" />
						<img class="c-card__img u-is-hover-scale-110ｐｅｒ u-transform-0dot5s-ease" src="http://placekitten.com/g/340/340" alt="桜餅" />
						<dl>
							<dt class="c-card-headding">北海道産小豆100%桜餅</dt>
							<dd>
								AAAAAAAAAAAAAAAAA
								<br />AAAAAAAAAAAAAA
								<br />AAAAAAAAAAAAAA
							</dd>
						</dl>
						<p><a href=""><img class="c-btn c-btn-skin u-hover-brilliancy-outside-inside u-transition-all-1s" src="img/common-img/details-button.png" alt=""></a></p>
						<p><a href=""><img class="c-btn c-btn-skin u-hover-brilliancy-outside-inside u-transition-all-1s" src="img/common-img/cart-button.png" alt=""></a></p>
					</div>
					<div class="c-card u-boxshadow-0-0dot1rem-0dot1rem-a0dot9 background-red translate3d-to-upper-left...

CSS

@charset "utf-8";
.c-card{background-color:red;}


/*! sanitize.css v4.1.0 | CC0 License | github.com/jonathantneal/sanitize.css */article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}template,[hidden]{display:none}*,:before,:after{background-repeat:no-repeat;box-sizing:inherit}:before,:after{text-decoration:inherit;vertical-align:inherit}html{box-sizing:border-box;cursor:default;font-family:sans-serif;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{height:0;overflow:visible}nav ol,nav ul{list-style:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}progress{vertical-align:baseline}small{font-size:83.3333%}sub,sup{font-size:83.3333%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}audio,canvas,iframe,img,svg,video{vertical-align:middle}img{border-style:none}svg{fill:currentColor}svg:not(:root){overflow:hidden}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{outline-width:0}table{border-collapse:collapse;border-spacing:0}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit;font-size:1em;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em...