JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<!DOCTYPE html><html><head></head><body>

Body

<section>
    
    Section
    
    <figure>
        <img src="http://www.phibetaiota.net/wp-content/uploads/2012/10/Google-Data-Center.jpg" height="200px" width="300px">
        <figcaption1>First example caption</figcaption1>
    </figure>
    
    <figure>
        <img src="http://gigaom2.files.wordpress.com/2012/10/screen-shot-2012-10-17-at-6-51-50-am.png?w=300&h=200&crop=1" height="200px" width="300px">
        <figcaption>Second example caption</figcaption>
    </figure>
    
    <figure>
        <img src="http://twistedsifter.sifter.netdna-cdn.com/wp-content/uploads/2012/10/douglas-county-georgia-google-data-center-water-pipes-300x200.jpg" height="200px" width="300px">
        <figcaption>Third example caption</figcaption>
    </figure>
</section>

</body></html>

CSS

section {
    overflow: auto;
}

section figure {
    float: left;
    clear: both;
    
    position: relative;
    overflow: auto;
    
    margin: 0 auto;
    padding: 30px 0 0 0;
    font-size: 15px;
}

section figure img {
    vertical-align: bottom;
}

section figure figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    
    background: rgba(0,0,0,0.7);
    text-align: center;
    color: #fff;
    padding: 10px;
}

section figure figcaption1 {
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    max-height:100%;
    background: rgba(0,0,0,0.7);
    text-align: center;
    color: #fff; 
}



section {
    padding-bottom: 30px;
    background: #ccc;
        
}