JSFiddle - React, Tailwind, and code Playground

HTML

<main>
    <!--Card Area-->
    <p>JSON Card Area:</p>
    <div id="area"></div>
    <!--Example-->
    <!--Card Placeholder-->
    <!--Add class for card placeholder.-->
    <p>Card Example:</p>
    <div class="job-content class1 class2 col s12 m6 l4">
        <div class="card">
            <!--Card Image-->
            <div class="card-image">
                <img src="http://materializecss.com/images/sample-1.jpg">
            </div>
            <!--Card Content-->
            <div class="card-content">
                <!--Card Title--> <span class="card-title grey-text text-darken-4">Card Title</span>

                <!--Card Subtitle-->
                <p class="card-subtitle grey-text text-darken-2">Card Subtitle</p>
                <!--Card Badge-->
                <!--Add class for card badge.--> <span class="badge win"></span>
 <span class="badge hot"></span>

                <!--Card Link to open the modal. But it can't open because i'm not create modal element yet.-->
                <p><a href="#modal-selector" class="view-more modal-trigger">View More</a>

                </p>
            </div>
        </div>
    </div>
</main>

CSS

header, main, footer {
    padding-left: 0px;
}
.area {
    background-color: #ccc;
    border: 3px solid #000;
    width: 100%;
}
.area .card, .card {
    max-width: 300px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.area .card .card-content, .card .card-content {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.area .card-content .card-title, .card-content .card-title {
    line-height: 2rem;
}
.card-content .card-title {
    line-height: 2rem !important;
}
.card-content .card-subtitle {
    font-size: 0.875rem;
    margin-bottom: 0.5rem !important
}
.badge.win {
    font-weight: 300;
    font-size: 0.8rem;
    color: #fff;
    background-color: #26a69a;
    border-radius: 2px;
    position: relative;
    float: right;
    right: 0rem;
    max-height: 12px;
}
.badge.hot {
    font-weight: 300;
    font-size: 0.8rem;
    color: #fff;
    background-color: #ef5350;
    border-radius: 2px;
    position: relative;
    float: right;
    right: 0rem;
    max-height: 12px;
}

JavaScript

var db = {
    "card": [{
        "group": ["class1", "class2"],
            "image-url": "images/sample-1.jpg",
            "card_title": "Card Title",
            "card_subtitle": "Card Subtitle",
            "badge": ["hot", "win"],
            "modal_selector": "#"
    }, {
        "group": ["class1", "class2"],
            "image-url": "images/sample-1.jpg",
            "card_title": "Card Title",
            "card_subtitle": "Card Subtitle",
            "badge": ["hot", "win"],
            "modal_selector": "#"
    }, {
        "group": ["class1", "class2"],
            "image-url": "images/sample-1.jpg",
            "card_title": "Card Title",
            "card_subtitle": "Card Subtitle",
            "badge": ["hot", "win"],
            "modal_selector": "#"
    }]
};

$.each(db.card, function (key, data) {
    //Loop to write all card element with json. (i is index for card in json.)
    console.log(data);
    $('#area').append('<div class="content col s12 m6 l4" >');
    //Card Image
    $('#area').append('<div class="card"><div class="card-image"><img src="' + data['image-url'] + '"></div>');
    //Card Content
    $('#area').append('<div class="card-content">');
    //Card Title
    $('#area').append('<span class="card-title grey-text text-darken-4">' + data.card_title + '</span>');
    //Card Subtitle
    $('#area').append('<p class="card-subtitle grey-text text-darken-2">' + data.card_subtitle + '</p>');

});