JSFiddle - React, Tailwind, and code Playground

HTML

<div class="picWrapper">
	<div class="picThumb">
    <img src="http://placehold.it/250x250" />
    </div>
    
    <div class="picRating"> Rate this picture: 1 2 3 4 5 6 7
    </div>
        
     <div class="picFilename"> abcd.jpg </div>
            
            	<div class="picBottomButtons">1</div>
                <div class="picBottomButtons">2</div>
                <div class="picBottomButtons">3</div>
                
                
</div>

CSS

.picWrapper:before, 
.picWrapper:after {
    content: " ";
    display: table;
}
.picWrapper:after {
    clear: both;
}

.picWrapper{
	width:250px;

	border: 1px solid black;
	
}

.picThumb{
	width:250;
	height:250;
	     margin:auto;
		 padding-bottom:10PX;
		 text-align: center;
}

.picRating{
	width:250;
	height:90;
	text-align: center;
	padding-bottom:10px;

}

.picFilename{
	width:230;
	height:90;
	     margin: auto;
		 text-align: center;
	padding-bottom:5px;
	


}

.picBottomButtons{
width:83px;
float:left;
text-align: center;
}