• HTML
• CSS

HTML

<div class="contenedor">
	<div class="cont imagen">
		<img src="img1.jpg" width="100" height="95">
		<div class="etiqueta nuevo">Nuevo</div>
	</div>
	<div class="cont detalle">
		<div class="titulo">Nortica</div>
		<div class="descripcion">Alisadora SG4700 Placas de Titanium Azul</div>
		<div class="precio-principal">S/.299</div>
		<div class="precio-normal">Normal S/.300</div>
	</div>
</div>

<div class="contenedor">
	<div class="cont imagen">
		<img src="img2.jpg" width="100" height="95">
		<div class="etiqueta oferta">Oferta</div>
	</div>
	<div class="cont detalle">
		<div class="titulo">Polo</div>
		<div class="descripcion">Licuadora 2,3 lt 18 Velocidades Inox</div>
		<div class="precio-principal">S/.299</div>
		<div class="precio-normal">Normal S/.300</div>
	</div>
</div>

<div class="contenedor">
	<div class="cont imagen">
		<img src="img3.jpg" width="100" height="95">
		<div class="etiqueta promocion">promoción</div>
	</div>
	<div class="cont detalle">
		<div class="titulo">Navto</div>
		<div class="descripcion">Microondas MS23J5133AM/PE 23 lt Inox</div>
		<div class="precio-principal">S/.299</div>
		<div class="precio-normal">Normal S/.300</div>
	</div>
</div>

CSS

/*-----------Aquí el code css de los cuadros---------------*/
*{
    box-sizing:border-box;
}
.contenedor{
	width:60%;
	min-width:150px;
	font-family:sans-serif;
	font-size:0.9em;
	margin:7px;
	padding:4px;
	border:1px solid #ccc;
	background:#fff;
	border-radius:2px;
	overflow:hidden;

	display:flex;
	flex-wrap:wrap;
}
.cont{
	width:150px;
	height:auto;
}
.cont.imagen{
	position:relative;
}

.titulo{
	font-weight:bold;
}
.descripcion{
	color:#999;
	font-size:0.9em;
}
.precio-principal{
	color:#df1111;
	font-weight:bold;
}
.precio-normal{
	color:#666;
	font-size:0.7em;
}
/*----------------code css de la etiqueta----------------*/
.etiqueta{
	position:absolute;
	top:0px;
	background:#f1f1f1;
	padding:2px 10px;
	border-radius:4px;
	text-transform:uppercase;
	font-size:0.8em;
	color:#fff;
	font-weight:bold;

	-moz-transform:rotate(-30deg);
	-webkit-transform:rotate(-30deg);
	-o-transform:rotate(-30deg);
	-ms-transform:rotate(-30deg);
	transform:rotate(-30deg);
}
.etiqueta.nuevo{
	background:orange;
}
.etiqueta.oferta{
	background:green;
}
.etiqueta.promocion{
	background:yellow;
	color:#666;
}