JSFiddle - React, Tailwind, and code Playground

HTML

<li class="odd">
					<div class="product-image">
						<div class="product-selected"></div>
						<img class="selected" src="http://www.bioterra.com.uy/galeria/view/huerta-organica/imagen-1/b.jpg?im=1382380804">
					</div>
					<div class="product-info">
						<h3>Compost 5kg</h3>
						<div class="product-price">
							<span class="price">$472</span>
							<p class="previous-price">Antes <strong>$590</strong></p>
						</div>
						<div class="product-discount">20%</div>
						<div class="clear"></div>
						<a class="button small brown" id="add-cart">
							<strong>Añadir</strong>
						</a>
					</div>
				</li>

CSS

ul.products {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

		ul.products li {
			float: left;
			width: 450px;
			height: 182px;
			margin-top: 40px;
		}

		ul.products li.odd {
			margin-right: 40px;
		}

			ul.products li h3 {
				font: normal 18px 'OmnesM', sans-serif;
				margin-bottom: 20px;
			}

			ul.products li .product-image {
				border-radius: 100%;
				height: 180px;
				width: 180px;
				box-shadow: 0 2px 0 rgba(37,26,22,0.2);
				overflow: hidden;
				float: left;
				margin-right: 20px;
				background-color: #77B627;
				position: relative;
			}

				.product-image .product-selected {
					color: #FFF;
					position: absolute;
					font-size: 80px;
					z-index: 100;
					top: 50%;
					left: 50%;
					text-shadow: 0 2px 0 rgba(0,0,0,0.2);
					line-height: 1;
					margin: -40px 0 0 -38px;
				}

					.product-image .product-selected:after {
						content: '\2714';
					}

				.product-image img {
					margin: -50% -50%;
				}

				.product-image img.selected {
					opacity: 0.5;
				}

			ul.products li .product-info {
				width: 250px;
				float: left;
			}

			ul.products li .product-price {
				float: left;
				margin: 20px 20px 0 0;
			}

				.product-price span.price {
					font: normal 28px/0.5 'OmnesM', sans-serif;
					color: #7E736B;
					margin-top: 10px;
				}

				.product-price p.previous-price {
					color: #7E736B;
					font: normal 14px/0.5 'OmnesM', sans-serif;
					margin: 5px 0 0 0;
				}

					.product-price p.previous-price strong {
					color: #7E736B;
					font: normal 14px/0.5 'OmnesSB', sans-serif;
				}

			ul.products li .product-discount {
				background: url(images/border.png) no-repeat;
				width: 85px;
				height: 70px;
				font: normal 25px/0.5 'OmnesSB', sans-serif;
				line-height: 70px;
				text-align: center;
				float: left;
			}

JavaScript

$(function() {
    $product_image = $('.product-image > img');
    $('a#add-cart').click (function() {
    	$(this).addClass('selected');
    });
 });