JSFiddle - React, Tailwind, and code Playground

by jmarikle

HTML

<div class="newcontainer">
  <div class="newcontainerpricesmall">
    <div class="newcontainersmallleftprices">
      <div class="newtop1">Broeckerhave</div>
      <div class="newtextportfolio"> <a href="http://beta.gjwd.nl/images/portfolio/broeckerhave.png" data-lightbox="image-100" title="" class="portfolioimg"><img src="http://beta.gjwd.nl/images/portfolio/thumb/broeckerhave.png" width="100%" height="100%" /> </div>
    </div>

CSS

.newcontainersmallleftprices {
	width: 310px;
	float: left;
	margin-left: 14px;
}
.newtop1 {
	width: 310px;
	background-image: url("../images/tops/portfolio1.png");
	text-align: center;
	font-size: 23px;
	color: #FFFFFF;
	height: 50px;
	-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px#888;
	box-shadow: 0 0 5px #888;
	margin: auto;
	padding-top: 20px;
	float: left;
	position: relative;
	z-index: 2;
}
.newtextportfolio {
	width: 310px;
	height: 200px;
	text-align: center;
	-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px #888;
	box-shadow: 0 0 5px #888;
	margin: auto;
	background-color: #FFFFFF;
	float: left;
	position: relative;
	z-index: 1;
	font-size: 17px;
}
.newtextportfolio img {
  display:block;
}
@media only screen and (max-width: 1005px) {
.newcontainerpricesmall {
	width: 100%;
}
.newcontainersmallleftprices {
	width: 95%;
	margin-bottom: 25px;
	margin-left: 4%;
}
.newtextportfolio {
	width: calc(95% + 10px);
	height: auto;
	margin-right: 25px;
}
.newtop1 {
	width: 95%;
	padding-top: 20px;
	padding-left: 5px;
	padding-right: 5px;
	margin-right: 25px;
}
}