JSFiddle - React, Tailwind, and code Playground

by Iman Fakhar

HTML

<div id="page">
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>
	<div class="masonry">
	<p>متن مطلب <br></p>
	</div>

</div>

CSS

html {
	direction:rtl;
}
body {
	margin:0;
	font-size:36px;
	color:#999;
	background-color:#ddd;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
}
#page {
	display:block;
	width:1000px;
	padding:0;
	margin:25px auto;
	background-color:#FFF;
}
#page .masonry {
	float:right;
	width:19%;
	height:150px;
	position:relative;
	padding:5px 1%;
	margin:5px 2%;
	overflow:hidden;
	background-color:#CCC;
	border-radius:6px;
	box-shadow:1px 2px 4px rgba(0, 0, 0, .5);
	text-shadow:1px 1px 0px #EEE;
}
#page .masonry:nth-child(6n+1) {
	width:44%;
}
#page .masonry:nth-child(1) {
	width:19%;
}
#page .masonry:nth-child(odd) {
	background-color:aquamarine;
	color:#35846F;
}
#page .masonry:nth-child(5n+1) {
	background-color:beige;
	color:#E7E7A9;
	text-shadow:1px 1px 0px #996;
}