JSFiddle - React, Tailwind, and code Playground

by Aziz Natour

HTML

<!-- post box -->
<div class="hanger">
    <div class="hanger-bg" style="background-image: url('http://theuntoldspiral.com/wp-content/uploads/2015/09/Picture-2015-02-20-23-00-25.jpg');"></div>
	<!-- post title -->
	<h2><a href="#" title="">Normal Title</a></h2>
	<!-- post content -->
	<div class="hanger-content">
		Lorem Ipsum
	</div>
</div>
<!-- end post -->


<!-- post box -->
<div class="hanger">
    <div class="hanger-bg" style="background-image: url('http://theuntoldspiral.com/wp-content/uploads/2015/09/Picture-2015-03-25-21-58-46.jpg');"></div>
	<!-- post title -->
	<h2><a href="#" title="">Ttesting long title for reasons that cannot be explained because because because because SIRENS TROTON</a></h2>
	<!-- post content -->
	<div class="hanger-content">
		Lorem Ipsum
	</div>
</div>
<!-- end post -->

CSS

/* for demo only */
body {background:#000 url("http://theuntoldspiral.com/wp-content/uploads/2015/09/TUSfadestars.jpg") top center;}
/* end demo */


/* post box */

.hanger {
    min-height: 200px;
    margin-bottom: 20px;
    text-align: center;
    color:#FFF;
	border: 1px solid lightblue;
    position:relative;
}

/* post background */

.hanger-bg {
	background-size: cover;
    position:absolute;
    height:100%;
    width:100%;
    z-index:-1;
	/* blur effect */
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
}

/* post title */

.hanger h2 {
    font-size: 35px;
    margin:0;
    text-transform: uppercase;
    background: rgba(238, 238, 238, 0.5);
	/*background: url("./images/opac-grey.png");*/
	min-height:40px;
}

.hanger h2 a {
    color: white;
    text-decoration: none;
}

/* post content */

.hanger-content {
    padding:20px;
    text-align:left;
}