JSFiddle - React, Tailwind, and code Playground

by pichowskii

HTML

<div class="container">
		<div class="col-md-4">
			<header class="book-cover">
				<img src="https://raw.githubusercontent.com/dgrigorov/SoftUni/master/Web%20Fundamentals/Practice%20exam/1.Books/img/book1.jpg" alt="The future book" title="The future isn't what it used to be">
			</header>
			<section>
				<article class="info">
					<h4><a href="#" title="The future isn't what it used to be">The future isn't what it used to be</a></h4>
					<p class="author">Author: Randall Baker</p>
					<p class="price">17.00 LV</p>
				</article>
			</section>
			<footer>
				<button type="submit">Add to cart</button>
			</footer>
		</div>

		<div class="col-md-4">
			<header class="book-cover">
				<img src="https://raw.githubusercontent.com/dgrigorov/SoftUni/master/Web%20Fundamentals/Practice%20exam/1.Books/img/book2.jpg" alt="Train Your Brain" title="Train Your Brain">
			</header>
			<section>
				<article class="info">
					<h4><a href="#" title="Train Your Brain">Train Your Brain</a></h4>
					<p class="author">Author: Dr. Ryuta Kawashima</p>
					<p class="price">9.90 LV</p>
				</article>
			</section>
			<footer>
				<button type="submit">Add to cart</button>
			</footer>
		</div>

		<div class="col-md-4">
			<header class="book-cover">
				<img src="https://raw.githubusercontent.com/dgrigorov/SoftUni/master/Web%20Fundamentals/Practice%20exam/1.Books/img/book3.jpg" alt="August 1914" title="August 1914">
			</header>
			<section>
				<article class="info">
					<h4><a href="#" title="August 1914">August 1914</a></h4>
					<p class="author">Author: Alexander Solzhenitsyn</p>
					<p class="price">9.90 LV</p>
				</article>
			</section>
			<footer>
				<button type="submit">Add to cart</button>
			</footer>
		</div>
	</div>

CSS

body {
	font-family: "Tahoma", Helvetica, sans-serif;
	font-size: 11px !important;
}

	body .container {
		width: 585px;
		margin: 0 auto;
	}

	body .container .col-md-4 {
		width: 145px;
		float: left;
		margin-right: 50px;
	}

		body .container .col-md-4 .book-cover {
			border: 1px solid #dadee4;
			width: 95%;
			padding: 0;
			height: 135px;
		}

		body .container .col-md-4 section article.info p.author {
			color: #696969;
		}

		body .container .col-md-4 section article.info p.price {
			color: #8f0509;
			font-weight: 700;
		}

		body .container .col-md-4 section article.info h4 a {
			color: #000;
			text-decoration: none;
		}

		body .container .col-md-4 section article.info h4 a:hover {
			color: #9f9f9f;
		}

body .container .col-md-4 section article.info h4,
body .container .col-md-4 footer button {
	text-transform: uppercase;
}

body .container .col-md-4 footer button {
	background: url(https://raw.githubusercontent.com/dgrigorov/SoftUni/master/Web%20Fundamentals/Practice%20exam/1.Books/img/shopping-cart-inactive.png) no-repeat 0 50%;
	border: 0;
	border-radius: 5px;
	padding: 0 15px 0 30px;
	outline: 0;
	font-size: 10px;
}

body .container .col-md-4 footer button:hover,
body .container .col-md-4 footer button:active {
	background: url(https://raw.githubusercontent.com/dgrigorov/SoftUni/master/Web%20Fundamentals/Practice%20exam/1.Books/img/shopping-cart-active.png) no-repeat 0 50%;
	cursor: pointer;
}