JSFiddle - React, Tailwind, and code Playground

by Valeri Dage

HTML

<body>

	<h2>Apple`s Laptops (6)</h2>

	<div id="container">
		<div class="item">
			<h4>Apple Macbook Air</h4>
			<p>11.6 inch/1.3Ghz</p>
			<p>Haswell</p>
			<img src="http://s30.postimg.org/mtyipduu5/lappy.jpg" alt="Apple Macbook Air"/>
			<div id="price"><span>$1729,00</span></div>
		</div>
		<div class="item">
			<h4>Apple Macbook Air</h4>
			<p>11.6 inch/1.4Ghz</p>
			<p>Haswell</p>
			<img src="http://s30.postimg.org/mtyipduu5/lappy.jpg" alt="Apple Macbook Air"/>
			<div id="new"><span>New!<span></div>
			<div id="price"><span>$1859,00</span></div>
		</div>
		<div class="item">
			<h4>Apple Macbook Air</h4>
			<p>13.3 inch/1.3Ghz</p>
			<p>Haswell</p>
			<img src="http://s30.postimg.org/mtyipduu5/lappy.jpg" alt="Apple Macbook Air"/>
			<div id="new"><span>New!<span></div>
			<div id="price"><span>$1919,00</span></div>
		</div>
	<br />
		<div class="item">
			<h4>Apple Macbook Air</h4>
			<p>13.3 inch/1.4Ghz</p>
			<p>Haswell</p>
			<img src="http://s30.postimg.org/mtyipduu5/lappy.jpg" alt="Apple Macbook Air"/>
			<div id="price"><span>$1999,00</span></div>
		</div>
		<div class="item">
			<h4>Apple Macbook Air</h4>
			<p>13.3 inch/1.4Ghz</p>
			<p>Haswell 256GB SSD</p>
			<img src="http://s30.postimg.org/mtyipduu5/lappy.jpg" alt="Apple Macbook Air"/>
			<div id="price"><span>$2199,00</span></div>
		</div>
		<div class="item">
			<h4>Apple Macbook Pro</h4>
			<p>13.3 inch/2.4Ghz</p>
			<p>Ivy Bridge</p>
			<img src="http://s30.postimg.org/mtyipduu5/lappy.jpg" alt="Apple Macbook Air"/>
			<div id="price"><span>$2599,00</span></div>
		</div>
	</div>

	<div id="sliders">
		<form method="post">
			<pre>1700        <span>Price</span>       2800</pre>			
			<input type="range" name="price" min="1700" max="2800"/>

			<pre>2048         <span>RAM</span>         4096</pre>
			<input type="range" name="price" min="2048" max="4096"/>

			<pre>100GB        <span>Disc</span>      2000GB</pre>
			<input type="range" name="price" min="100" max="2000"/>

			<pre>11.3     ...

CSS

div, p, h2, h4, img, pre {
	margin:0;
	padding:0;
	color:#003399;
}

.item {	
	display:inline-block;
	vertical-align:top;
	margin-left:10px;
	margin-top:10px;
	height:195px;
	width:160px;
	border:2px solid #3366CC;
	border-radius:5px;
	padding:5px;	
}

#container, #sliders {
	display:inline-block;
	vertical-align:top;
}

input, img {
	display:block;
}

#new, #price {
	display:inline;
}

input[type="range"] {
	margin-bottom:25px;
	width:215px;
}

pre {
	font-size:11px;
}

span {
	font-size:18px;
	color:#CC9933;
}

form {
	height:415px;
	margin:10px;
	padding:5px;
	border:2px solid black;
	border-radius:5px;
	background:#CC6666;
}

#new {
	width:45px;
	height:45px;
	border-radius:100%;
	float:left;
	text-align:center;
	background:#99FF66;
}

#new span {
	display:inline-block;
	margin-top:13px;
}

#price {
	float:right;
	width:90px;
	height:30px;
	background:#FF9933;
	border-top-left-radius:5px;
	border-bottom-right-radius:5px;
	margin-top:15px;
}

#price span {
	position:relative;
	top:8px;
	left:14px;
	color:black;
}