JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="item">
    <a class="image-wrap"><img src="http://placekitten.com/320/180"/></a>
    <a class="header"><i>Welcome to this test sample, placeholder kitty</i></a>
</div>

<div class="item">
    <a class="image-wrap"><img src="http://placekitten.com/320/180"/></a>
    <a class="header"><i class="empty">&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0; &#xA0;&#xA0;&#xA0;&#xA0; &#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0; &#xA0;&#xA0;&#xA0;&#xA0;&#xA0; &#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0; &#xA0;&#xA0;&#xA0; &#xA0;&#xA0; &#xA0; &#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0; &#xA0;&#xA0; &#xA0; &#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0; &#xA0;&#xA0;&#xA0;&#xA0;&#xA0; &#xA0;&#xA0;&#xA0;&#xA0;&#xA0; &#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0; &#xA0;&#xA0; &#xA0;&#xA0;&#xA0;&#xA0; &#xA0;&#xA0;&#xA0; &#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0; &#xA0;&#xA0;&#xA0; &#xA0;&#xA0;&#xA0;</i></a>
</div>

<div class="item">
    <a class="image-wrap"><img src="http://placekitten.com/320/180"/></a>
    <a class="header"><i class="empty">&#x2003;&#x2003;&#x2003; &#x2003;&#x2003; &#x2003;&#x2003;&#x2003;&#x2003;</i></a>
</div>

<div class="item">
    <a class="image-wrap"><img src="http://placekitten.com/320/180"/></a>
    <a class="header"><i></i></a>
</div>

<div class="item">
    <a class="image-wrap"><img src="http://placekitten.com/320/180"/></a>
    <a class="header"></a>
</div>

CSS

.item:after {
    content: "";
    display: table;
    clear: both;
}

.image-wrap {
    float: left;
    width: calc(50% - 10px);
    margin-right: 20px;
}

.image-wrap img {
    width: 100%;
    height: auto;
}

.header {
    _word-wrap: break-word;
    font-size: 48px;
    line-height: 50px;
    display: block;
}

.header i {
    font-style: normal;
}

.header:empty:before,
.header i:empty:before{
    content: "\2003\2003\2003 \2003 \2003\2003\2003\2003 \2003\2003 \2003 \2003\2003\2003\2003 \2003\2003\2003\2003\2003 \2003\2003 \2003 \2003\2003\2003\2003 \2003\2003";
    content: "\2003\200B\2003  \2003\2003  \2003  \2003\200B\2003\2003test sample, placeholder kitty";
	background-color: currentcolor;
	color: currentcolor;
	opacity: 0.75;
	font-size: 0.8em;
	line-height: inherit;
}
.header i.empty{
	background-color: currentcolor;
	color: currentcolor;
	opacity: 0.75;
	font-size: 0.8em;
	line-height: inherit;
}