JSFiddle - React, Tailwind, and code Playground

HTML

<div class="thumbnail">
            <img src="http://placehold.it/350x150" alt="..." />
           <div class="wrapper">
    <div class="caption post-content">

                <h3>Robots!</h3>
                <p>Lorem ipsum dolor sit amet</p> 

            </div>
        </div>
    </div>

CSS

.post-content {
    background: none repeat scroll 0 0 #FFffff;
    opacity: 0.5;
    margin: 0 auto;
    margin-top: -54px;
    text-align:center
    position: relative;
    width:40%;

    
}

.thumbnail {
    margin:0 auto;
    text-align:center;
}

.wrapper {
    text-align:center;
}