JSFiddle - React, Tailwind, and code Playground

by mjpramos

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">

	<div class="row">

		<div id="mainleft" class="col-lg-6 col-md-6 col-sm-6">
			<img class="img-responsive" src="http://placehold.it/662x673?text=1">
			<div class="row">
				<div class="col-lg-6 col-md-6 col-sm-6" style="background-color:#fff;">
					<img class="img-responsive" src="http://placehold.it/474x94?text=5">
				</div>
				<div class="col-lg-6 col-md-6 col-sm-6">
					<img class="img-responsive" src="http://placehold.it/474x94?text=6">
				</div>
			</div>
		</div>
		
		<div id="mainright" class="col-lg-6 col-md-6 col-sm-6">
			<div id="right1"><img src="http://placehold.it/334x57?text=2" style="visibility: hidden;" /></div>
			<div id="right2"><div class="txtoverimg2"><img src="http://placehold.it/334x347?text=3" style="visibility: hidden;" /><span class="txtover2 img-responsive">A long long text, a long long text, a long long text, a long long text, a long long text, a long long text</span></div></div>
			<div id="right3"><div class="txtoverimg2"><img src="http://placehold.it/334x344?text=4" style="visibility: hidden;" /><span class="txtover2">A long long text, a long long text, a long long text, a long long text, a long long text, a long long text</span></div></div>
			<img class="img-responsive" src="http://placehold.it/334x97?text=7" style="margin-top: 2px;/*border: 1px solid red;*/">
		</div>

	</div>

</div>

CSS

/* Some custom styles to beautify this example */
		.txtoverimg {
		   position: relative;
		   width: 100%; /* for IE 6 */
		}

		.txtover {
		   position: absolute;
		   top: 30px;
		   left: 10px;
		   width: 90%;
		   color: #FF0000;
		   font-weight: bold;
		}


		
        #mainleft img{
        	vertical-align:bottom;
        	border:0;
        }
        #mainright img{
        	vertical-align:bottom;
        	border:0;
        }
        #right1 {
        	vertical-align:bottom;
        	border:border: 1px solid red;
        	background-image: url("http://placehold.it/334x57?text=2");
			background-position: top left;
			background-repeat: no-repeat;
			/*width: 335px;
			height: 57px;*/
			margin-bottom: 2px;
        }
        #right2 {
        	vertical-align:bottom;
        	border:border: 1px solid green;
        	background-image: url("http://placehold.it/334x347?text=3");
			background-position: top left;
			background-repeat: no-repeat;
			/*width: 335px;
			height: 349px;*/
			cursor: pointer;
        }
        #right3 {
        	vertical-align:bottom;
        	border:border: 1px solid blue;
        	background-image: url("http://placehold.it/334x344?text=4");
			background-position: top left;
			background-repeat: no-repeat;
			/*width: 335px;
			height: 349px;*/
			cursor: pointer;
        }
        .txtoverimg2 {
		   position: relative;
		   width: 100%; /* for IE 6 */
		   border: 1px solid yellow;
		}

		.txtover2 {
		   position: absolute;
		   top: 30px;
		   left: 10px;
		   width: 90%;
	}