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="submit: 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');
           
       };
        
        self.update = function() {
            alert("Success!");
        };
    }
    
    ko.applyBindings(new ProductCardViewModel());