JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.css">
<div style="margin-top:2em;" class="row" data-bind="foreach: products">
    <div class="col l4 m6 s12">
        <div class="card"> <a href="#" data-bind="click: $parent.showProductDialog">
                    <div class="card-image">
                      <img data-bind="attr:{src: image}">
                    </div>
                </a>

            <div class="card-content"> <b data-bind="text: title"></b>

            </div>
            <div class="card-action">
                <p style="float:left;"><span data-bind="text: price"></span> kr</p> <a style="float:right;" class="btn disabled">Föreslå</a>

            </div>
        </div>
    </div>
</div>
<!-- This is the HTML for the lightbox -->
<div class="lightbox">
    <div class="lightbox-content">
        <img data-bind="attr:{src: lightboxImage}">
        </br> <b class="dialog-title" data-bind="text: lightboxTitle"></b>

        <p data-bind="text: lightboxDescription"></p>
    </div>
    <div class="modal-footer"> <a data-bind="click: update" class="btn">Click me</a>

    </div>
</div>

CSS

.lightbox {
    display:none;
}

JavaScript

function ProductCardViewModel() {
        var self = this;

        // Array containing all products
        self.products = ko.observableArray();

        self.lightboxImage = ko.observable();
        self.lightboxDescription = ko.observable();
        self.lightboxTitle = ko.observable();

        self.products = [{
            "id": 1,
            "name": "Cool healine",
            "title": "It's cool to have a cool headline",
            "description": "This text is suppost to describe something",
            "price": 700,
            "image": "http://www.swedishevent.se/se/wp-content/uploads/2010/11/takvandring_top.jpg",
            "categories": [1, 4]
        }, {
            "id": 2,
            "name": "Even cooler headline",
            "title": "A nice headline is the key to success ",
            "description": "What to write, what to write, what to write?",
            "price": 500,
            "image": "http://www.karlliesilva.com/Massage-Therapy-white-flower2.jpg",
            "categories": [2]
        }];

        self.showProductDialog = function (product) {
            //alert(JSON.stringify(product));
            self.lightboxImage(product.image);
            self.lightboxDescription(product.description);

            self.lightboxTitle(product.title);
            $.featherlight('.lightbox');
            ko.applyBindings(self, $('.featherlight')[0]);
        };

        self.update = function () {
            alert("Success!");
        };
    }

    ko.applyBindings(new ProductCardViewModel());