JSFiddle - React, Tailwind, and code Playground

by Avijit Kumar

HTML

<body>
<div class="container">
	<div class="a">
		<img src="img/1.png" height="222" width="581">
	</div>
	<div class="b">
		<img src="img/2.jpg" height="222" width="581">
	</div>
	<div class="c">
		<img src="img/3.jpg" height="222" width="581">
	</div>
	<div class="d">
		<img src="img/4.png" height="222" width="581">
	</div>

	</div>	
</body>

CSS

.container {
			width:100%;
			margin: 0 auto;
		}
		img {
			max-width: 100%;
		}

/* this css is just for understanding */
		.a {
			background-color: red;
		}
		.b{
			background-color: green;
		}
		.c {
			background-color: blue;
		}
		.d {
			background-color: black;
		}
/* this css is just for understanding */

/* this is the logic to change the positions of image */

	@media (min-width: 320px) {
		.a,.b,.c,.d {
			width: 100%;
			float: left;
		}
	}

		@media (min-width: 768px) {
		.a,.b,.c,.d {
			width: 50%;
			float: left;
		}
	}