JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
        <div class="top">
            Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta. Nulla porttitor accumsan tincidunt. Vivamus suscipit tortor eget felis porttitor volutpat. Donec rutrum congue leo eget malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
        </div>
        <div class="mid">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Chestnut-breasted_Malkoha2.jpg/593px-Chestnut-breasted_Malkoha2.jpg" />
        </div>
        <div class="bot">
            Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta.
        </div>
    </div>

CSS

.main {
        padding: 10px;
        width: 640px;
        height: 480px;
        display: inline-block;
        background: #000;
        position: relative;
    }
    .top {
        width: 100%;
        display: block;
        background: #eee;
       
    }
    .mid {
        width: 100%;
        height: 100%;
        display: block;
        background: #333;
    }
    img {
        max-width: 100%;
        max-height: 100%;
        margin: 0 auto;
        display: block;
    }
    .bot {
        width: 100%;
        display: block;
        background: #ccc;
    }