JSFiddle - React, Tailwind, and code Playground

by skydivematy

HTML

<div class="news-list-view">
    <article class="article">
        <div class="content-background">
            <div class="news-img-wrap">
                <img src="http://lorempixel.com/output/animals-q-c-100-100-10.jpg" />
            </div>
            <div class="content-wrapper">Image Content</div>
        </div>
    </article>
    <article class="article">
        <div class="content-background">
            <div class="content-wrapper">No Image Content</div>
        </div>
    </article>
    <article class="article">
        <div class="content-background">
            <div class="news-img-wrap">
                <img src="http://lorempixel.com/output/animals-q-c-100-100-5.jpg" />
            </div>
            <div class="content-wrapper">Image Content</div>
        </div>
    </article>
    <article class="article">
        <div class="content-background">
            <div class="news-img-wrap">
                <img src="http://lorempixel.com/output/animals-q-c-100-100-1.jpg" />
            </div>
            <div class="content-wrapper">Image Content</div>
        </div>
    </article>
    <article class="article">
        <div class="content-background">
            <div class="content-wrapper">No Image Content</div>
        </div>
    </article>
    <article class="article">
        <div class="content-background">
            <div class="news-img-wrap">
                <img src="http://lorempixel.com/output/animals-q-c-100-100-4.jpg" />
            </div>
            <div class="content-wrapper">Image Content</div>
        </div>
    </article>
    <article class="article">
        <div class="content-background">
            <div class="content">No Image Content</div>
        </div>
    </article>
    <article class="article">
        <div class="content-background">
            <div class="content-wrapper">No Image Content</div>
        </div>
    </article>
    <article class="article">
        <div class="content-background">
            <div...

CSS

.news-list-view {
    display: block;
    width: 100%;
}
article {
    margin: 10px 0;
}
.content-background {
    display: block;
    padding: 0.5em;
}
.content {
    background: #fff;
    collor: #ddd;
}
.content-background.default-box {
    background: #ccc;
}
.content-background.colored-box-1 {
    background: red;
}
.content-background.colored-box-2 {
    background: green;
}
.content-background.colored-box-3 {
    background: blue;
}
.padding-top-25 {
    color: #fff;
}
.news-img-wrap {
    width: 100px;
    height: 100px;
    margin-bottom: 1em;
}
.news-img-wrap img {
    border: 1px solid #000;
    padding: 1px;
}

JavaScript

var classCount = 1;
$('.news-list-view article .content-background').each(function () {
    if ($(this).find('.news-img-wrap').length) {
        $(this).addClass('default-box').find('.content-wrapper').addClass('padding-top-25');


    } else {
        $(this).addClass('colored-box-' + classCount);
        classCount++;

    }
});