JSFiddle - React, Tailwind, and code Playground

by Matt_Coughlin

HTML

<p>display: block;</p>
<div class="diver block">
    <img src="http://ie.microsoft.com/testdrive/Performance/Minesweeper/images/ie-logo.png" style="" />
</div>
<p>display: table-cell;</p>
<div class="diver table-cell">
    <img src="http://ie.microsoft.com/testdrive/Performance/Minesweeper/images/ie-logo.png" style="" />
</div>
<p>display: block;</p>
<div class="diver block">
    <span></span>
</div>
<p>display: table-cell;</p>
<div class="diver table-cell">
    <span></span>
</div>

CSS

.diver {
    border: 1px solid #000000;
    width: 100px;
    height: 100px;
}
.diver.block {
    display: block;
}
.diver.table-cell {
    display: table-cell;
}
.diver img,
.diver span {
    max-width:100%;
    max-height:100%;
    width: 200px;
    height: 200px;
}
.diver span {
    display: block;
    background-color: #7ad;    
}
p {
    font-family: monospace, sans-serif;
    font-size: 14px;
    line-height: 16px;
    margin: 12px 0 2px 0;
}
}