JSFiddle - React, Tailwind, and code Playground

by Jacobo

HTML

<div class="moduleList">
<!--Caja Resultado 1 -->
		<div class="listWrap">
			<div class="coverWrap">
				<div class="cover"><img src="http://nsae01.casimages.net/img/2014/01/27/140127125819367521.jpg" /></div>
			</div>
			<div class="infoWrap">
				<div class="title">FIFA 14</div>
				<div class="moreInfo">
					<div class="left">
						<div class="stars-wrapper">
							<span class="stars-active">&#9733;</span>
							<span class="stars-active">&#9733;</span>
							<span class="stars-active">&#9733;</span>
							<span class="stars-disable">&#9733;</span>
							<span class="stars-disable">&#9733;</span>
						</div>
						<div class="plataformWrap">
							<div class="plataform">						
							</div>
							<div class="genreText">deportes</div>
						</div>
						
					</div>
					<div class="right">
                        <div class="information_popup_container">
                            <div class="information"><img src="http://nsae01.casimages.net/img/2014/01/27/140127125817478231.png" alt="Regalo por reserva" /></div>
                            <div class="popup_information">
                                <img src="http://nsae01.casimages.net/img/2014/01/27/140127125818487101.png" />
                                <div class="title">DLC Pack equipaciones históricas:</div>
                                <div class="description">CONTIENE LAS EQUIPACIONES MÍTICAS DE CLUBES INTERNACIONALES Y 4 SOBRES DE ORO FIFA ULTIMATE TEAM</div>
                            </div>
                        </div>
					</div>
				</div>
				
			</div>
			<div class="sellButtonsWrap"></div>
	</div>
<!-- Fin Caja Resultado -->
    <!--Caja Resultado 2 -->
		<div class="listWrap">
			<div class="coverWrap">
				<div class="cover"><img src="http://nsae01.casimages.net/img/2014/01/27/140127125819367521.jpg" /></div>
			</div>
			<div class="infoWrap">
				<div class="title">FIFA 14</div>
				<div class="moreInfo">
					<div class="left">
						<div...

CSS

.moduleList {
	max-width:1100px;
	padding-top:1.5em;
	position:relative;
	z-index:333;
}
.moduleList:before,
.moduleList:after,
.listWrap:before,
.listWrap:after,
.contentList:before,
.contentList:after {
	content:" ";
	display:table
}
.moduleList:after,
.listWrap:after,
.contentList:after{
	clear:both
}
.moduleList .contentTitle {
			max-width: 1100px;
			overflow: hidden;
			white-space: nowrap;
		}
		.moduleList .contentTitle .title{
			float:left;
			font-family:medium;
			font-size:1.4em;
			padding-right:10px;	
		}
		.moduleList .contentTitle .titleBar {
			background:url("img/titleBar.png") no-repeat left;
			height:24px;
			overflow:hidden;
			position:relative;
		}
.stars-wrapper {
			font-size: 1.1em;
		}
		.stars-active {
			color: #A70084;
			
		}
    	.stars-disabled {
      		color:#888888;
			
    	}
.listWrap {
	border-bottom:2px #5A5A5A solid;
	height:1%;
	max-width:1100px;
	position:relative;
	padding:16px 0 12px 0;
	z-index:222;
}
.coverWrap {
	float:left;
	overflow:hidden;
	position:relative;
	width:200px;
}
.coverWrap .exclusivaGame {
	background:url(img/exclusiva_GAME.png) no-repeat 0 0;
	height:109px;
	left:0;
	position:absolute;
	top:0;
	width:148px;
}
.coverWrap .cover {
	height:200px;
	padding-top:6px;
	width:200px;
}
.infoWrap {
	float:left
}
.infoWrap .title {
	color:#A70084;
	font-family:"bold";
	font-size:1.3em;
}
.plataformWrap {
	width:200px;
}
.plataform {
	padding-top:10px;
	text-align: center;
	overflow:hidden
}
/************* CLASES PARA MOSTRAR EL DLC *******************/
div.information_popup_container {
position: relative;

}

div.information_popup_container > div.information {

}
div.information_popup_container > div.popup_information {
	background:#f5f5f5;
	border:solid 2px #7b7a7a;
	-webkit-box-shadow: 0 2px 7px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0 2px 7px 0px rgba(0,0,0,0.75);
	box-shadow: 0 2px 7px 0px rgba(0,0,0,0.75);
	display:none;
	left:0px;
	padding:14px;
	position:...