JSFiddle - React, Tailwind, and code Playground

HTML

<div id="list">
    <div class="entry"></div>
    <div class="entry"></div>
    <div class="entry"></div>
    <div class="entry"></div>
    <div class="entry"></div>
    <div class="entry"></div>
    <div class="entry"></div>
    <div class="entry"></div>
    <div class="entry"></div>
    <div class="entry"></div>
</div>

CSS

.entry {
    width: 100%;
    height: 100px;
    border: 1px solid #ccc;
    background-color:#333;
    color: #fff;
}

.entry img {
    width: 100px;
    height: 100px;
    
}

.first-item {
    background-color: #f00;
    height: 300px;
    color: #00f;
}

.first-item img {
    width: 300px;
    height: 300px;
    float: right;
}

/*以下装飾用*/
.entry {
    position:relative;
}
.entry .mes {
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

JavaScript

(function($){
	$(function(){
    	$("#list .entry").first().addClass("first-item");
        
        //以下装飾用 --------------------------------- 本来は不要
        $(".entry").each(function(i,value){
        	$(this)
                .append("<div class='mes'>list-"+i+"</div>")
            	.prepend("<img src='http://wp-simplicity.com/wp-content/uploads/2015/07/ec71407c6cef4809e064d3c8e050a9ea.jpg' />");
         //装飾用jQueryここまで
        });
    });
})(jQuery);