JSFiddle - React, Tailwind, and code Playground

by DiceMasters

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
	<div class="row">
		<div class="col-lg-7 col-md-7 col-sm-7">
			<div class="card">
				<img class="card-img-top" src="https://ss7.vzw.com/is/image/VerizonWireless/iPhoneX-Svr?$device-lg$" alt="Card image cap">
				<div class="card-entity">
					скидка<br>-30%
				</div>
				<div class="card-tools">
					<a href="#"><i class="fa fa-bar-chart" aria-hidden="true"></i></a>
					<a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
					<a href="#"><i class="fa fa-search-plus" aria-hidden="true"></i></a>
				</div>
				<div class="card-body">
					<h5>Apple iPhone X</h5>
					<div class="card-attrs">
						<div class="attr">
							<div class="attr-rating r4">
								<i class="fa fa-star" aria-hidden="true"></i>
								<i class="fa fa-star" aria-hidden="true"></i>
								<i class="fa fa-star" aria-hidden="true"></i>
								<i class="fa fa-star" aria-hidden="true"></i>
								<i class="fa fa-star" aria-hidden="true"></i>
							</div>
							<div class="attr-comments">
								<i class="fa fa-envelope-o" aria-hidden="true"></i>
								<span>10</span>
							</div>
						</div>
						<div class="attr justify-content-between align-items-end">
							<div class="attr-price">
								<div class="old">1700 грн</div>
								<div class="new">1500 грн</div>
							</div>
							<div class="attr-buy">
								<a href="#" class="btn btn-outline-light">
									<i class="fa fa-cart-plus" aria-hidden="true"></i>
									Купить
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

SCSS

.card {
	position: relative;
	
	img {
		width: 100%;
		height: 300px;
		object-fit: contain;
		padding: 35px 0;
	}
	
	&-entity {
		width: 70px;
		height: 70px;
		background-color: #28a745;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		line-height: 1.1;
		text-align: center;
		border-radius: 50%;
		position: absolute;
		top: 10px;
		left: 10px;
		
		&:after {
			content: '';
			width: 15px;
			height: 15px;
			background-color: #28a745;
			border-radius: 50%;
			position: absolute;
			bottom: -4px;
			right: -4px;
		}
	}
	
	&-tools {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 20px;
		right: 20px;
		
		a, a:hover, a:focus {
			font-size: 18px;
			color: gray;
		}
	}
	
	&-body {
		h5 {
			position: relative;
			
			&:after {
				content: '';
				width: 80px;
				height: 1px;
				background-color: black;
				position: absolute;
				top: -15px;
				left: 0;
			}

			&:before {
				content: '';
				width: 5px;
				height: 5px;
				background-color: black;
				position: absolute;
				top: -17px;
				left: 0;
			}
		}
	}
	
	&-attrs {
		display: flex;
		flex-direction: column;
	}
}

.attr {
	display: flex;
	margin-top: 15px;
	
	&-comments {
		display: flex;
		align-items: center;
		margin-left: 15px;
		
		span {
			font-size: 12px;
			color: #232323;
			margin-left: 10px;
		}
	}
	
	&-price {
		font-weight: 900;
		
		.old {
			font-size: 18px;
			color: gray;
			text-decoration: line-through;
		}
		
		.new {
			font-size: 24px;
			margin-top: -5px;
		}
	}
	
	&-buy {
		a.btn {
			font-size: 18px;
			font-weight: 700;
			color: #007bff;
			border: 4px solid #007bff;
			border-radius: 26px;
		}
	}
}