JSFiddle - React, Tailwind, and code Playground

by ericmorand

HTML

<div class="wrapper">
    <img class="h150" src="http://www.babelio.com/users/AVT_Lemmy-Kilmister_5397.jpeg"/>

</div>
<div class="wrapper">
    <img class="h125" src="http://www.babelio.com/users/AVT_Lemmy-Kilmister_5397.jpeg"/>

</div>
<div class="wrapper">
    <img class="h100" src="http://www.babelio.com/users/AVT_Lemmy-Kilmister_5397.jpeg"/>
</div>
<div class="wrapper">
    <a href="#">
        <img class="h75" src="http://www.babelio.com/users/AVT_Lemmy-Kilmister_5397.jpeg"/>
    </a>
</div>
<div class="wrapper">
    <img class="h50" src="http://www.babelio.com/users/AVT_Lemmy-Kilmister_5397.jpeg"/>
</div>

CSS

.wrapper {
    height: 180px;
    border: solid 1px;
    padding: 0;
    font-size: 0;
    text-align: center;
    width: 180px;
    display: inline-block;
}

.wrapper:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.wrapper a {
    text-decoration: none;
}

.wrapper img {
    display: inline-block;
    vertical-align: middle;
}

.h150 {
    height: 150px;
}

.h125 {
    height: 125px;
}

.h100 {
    height: 100px;
}

.h75 {
    height: 75px;
}

.h50 {
    height: 50px;
}