JSFiddle - React, Tailwind, and code Playground

by Baumr

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">
        <figcaption>First example caption</figcaption>
    </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 figure {
    margin: 0 auto; /* to center it */
    min-width: 300px; /* so edges aren't cut off */
    padding: 30px 0 0 0;  
    width: 50%; /* when width is 60%, it is off-center, why? */
    font-size: 15px;
}
section figure img {
    vertical-align: bottom; /* hide space since imgs are inline elements */
}
section figure figcaption {
    margin-top: -40px;
    background: rgba(0,0,0,0.7); /* transparent background */
    text-align: center;     /* center the text */   
    color: #fff; 
    padding: 10px;    /* padding around text */
    position: absolute; 
    width: 70%; /* does not work exactly right */
}




section {
    padding-bottom: 30px; /* ignore, just to make it look nice */
    background: #ccc;
        
}