JSFiddle - React, Tailwind, and code Playground

by sandeep

HTML

<div class="frame">
   <img src="http://jsfiddle.net/img/logo.png" height="250" />
</div>
<div class="frame">
   <img src="http://jsfiddle.net/img/logo.png" height="25" />
</div>
<div class="frame">
   <img src="http://jsfiddle.net/img/logo.png" height="23" />
</div>
<div class="frame">
   <img src="http://jsfiddle.net/img/logo.png" height="21" />
</div>
<div class="frame">
   <img src="http://jsfiddle.net/img/logo.png" height="19" />
</div>
<div class="frame">
    <img src="http://jsfiddle.net/img/logo.png" height="17" />
</div>
<div class="frame">
    <img src="http://jsfiddle.net/img/logo.png" height="15" />
 </div>
<div class="frame">
    <img src="http://jsfiddle.net/img/logo.png" height="13" />
 </div>
<div class="frame">
    <img src="http://jsfiddle.net/img/logo.png" height="11" />
 </div>
<div class="frame">
    <img src="http://jsfiddle.net/img/logo.png" height="9" />
 </div>
<div class="frame">
    <img src="http://jsfiddle.net/img/logo.png" height="7" />
 </div>
<div class="frame">
    <img src="http://jsfiddle.net/img/logo.png" height="5" />
 </div>
<div class="frame">
    <img src="http://jsfiddle.net/img/logo.png" height="3" />
 </div>

CSS

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    margin: 1em 0;
    text-align: center;
    line-height:22px;
    *:first-child+html line-height:24px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .frame {
        line-height:20px;
    }
}
    
img {
    background: #3A6F9A;
    vertical-align: middle;
    line-height:0;    
    max-height:25px;
    max-width:160px;
}