JSFiddle - React, Tailwind, and code Playground

by shtrih

HTML

<div class="action_wrapper">
					<h3>Акции</h3>
					<div class="action_block">
						<div class="action_big_image">
                            <img src="/images/action_images/action_1.png" alt="Изображение акции" />
						</div>
						<div class="action_more_info">
							<p class="action_begin">12.12.14</p>
							<h4 class="action_caption">Название акции</h4>
							<p class="action_title">Текст Текст Текст</p>
							<div class="action_more_button">
								<span>Подробнее</span>
							</div>
						</div>
					</div>
					<div class="action_block">
						<div class="action_big_image">
							<img src="/images/action_images/action_2.png" alt="Изображение акции">
						</div>
						<div class="action_more_info">
							<p class="action_begin">12.12.14</p>
							<h4 class="action_caption">Название акции</h4>
							<p class="action_title">Текст Текст Текст</p>
							<div class="action_more_button">
								<span>Подробнее</span>
							</div>
						</div>
					</div>
					<div class="action_block">
						<div class="action_big_image">
							<img src="/images/action_images/action_1.png" alt="Изображение акции">
						</div>
						<div class="action_more_info">
							<p class="action_begin">12.12.14</p>
							<h4 class="action_caption">Название акции</h4>
							<p class="action_title">Текст Текст Текст</p>
							<div class="action_more_button">
								<span>Подробнее</span>
							</div>
						</div>
					</div>
				</div>

CSS

.action_wrapper {
	background: #fff;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	box-shadow: inset 0 0 25px #ccc, 1px 1px 0 rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: inset 0 0 25px #ccc, 1px 1px 0 rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0 0 25px #ccc, 1px 1px 0 rgba(0, 0, 0, 0.3);
	border: 1px solid #fff;
	margin-bottom: 25px;
	padding-bottom: 30px;
}
.action_wrapper > h3 {
	background: url(/images/title_catalog.png) no-repeat;
	text-transform: uppercase;
	font: 13px Verdana;
	text-shadow: 0.5px 0.5px 0px #fff;
	padding: 7px 30px 15px 25px;
	margin: -1px 0 0 -1px;
}
.action_block {
	border-top: 1px solid red;
	padding: 25px 20px;
}
.action_block:first-of-type {
	border-top: 0;
	padding-top: 5px;
}
.action_big_image {
	float: left;
	width: 297px;
	margin-right: 20px;
}
.action_begin {
	font-size: 11px;
}
.action_caption {
	text-transform: uppercase;
	font: normal 12px Verdana;
	margin: 7px 0;
}
.action_title {
	font-size: 12px;
	color: #242423;
	margin-bottom: 20px;
}
.action_more_button span {
	text-transform: lowercase;
	font-size: 11px;
}