JSFiddle - React, Tailwind, and code Playground

by Margus Martsepp

HTML

<script type="text/template" id="MenuTemplate">
    <div class="menu">
        <div class="item-left">
            <input class="form-control" type="text" ng-model="searchStr" placeholder="Search images" ng-keyup="Util.delay(Update(searchStr,true,listParent),2500,'tags')">
        </div>
        <div class="item-right">
            <a class="share" href="{0}">Share ...</a>
        </div>
        <div style="clear:both"></div>
    </div>
</script>
<script type="text/template" id="ElementTemplate">
    <div ng-repeat="image in images" class="container">
        <div class="aspectratio1to1"></div>
        <div class="element">
            <img class="lazy centered" data-original="{{image.ImageUrl}}" alt="{{image.Title}}" />
        </div>
        <div class="element info">
            <span>{{image.Title}}</span>
        </div>
    </div>
</script>

CSS

* {
    padding: 0;
    margin: 0;
}

body {
    background: url(http://i.imgur.com/TGU0BR9.jpg) no-repeat;
    min-height: 500px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    -ms-background-size: cover;
    background-size: cover;
}

.container {
    float: left;
    display: inline-block;
    position: relative;
    width: 100%;
}

.aspectratio1to1 {
    margin-top: 100%;
}

.element {
    overflow: hidden;
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    right: 6px;
    background: rgb(63, 63, 63);
    background: rgba(63, 63, 63, 0.2);
}

    .element img {
        display: block;
        width: 100%;
        height: auto;
    }

.horisontal img {
    display: block;
    height: 100% !important;
    width: auto !important;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.info {
    top: auto;
    clear: both;
    display: none;
    text-align: center;
    background: black;
    color: white;
}

    .info span {
        display: inline-block;
        margin: 10px;
    }

.container:hover .info {
    display: block;
}

.share {
    float: right;
    background: #30bbfe;
    background-image: -webkit-linear-gradient(top, #30bbfe, #01abff);
    background-image: -moz-linear-gradient(top, #30bbfe, #01abff);
    background-image: -ms-linear-gradient(top, #30bbfe, #01abff);
    background-image: -o-linear-gradient(top, #30bbfe, #01abff);
    background-image: linear-gradient(to bottom, #30bbfe, #01abff);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 1px 2px #666666;
    -moz-box-shadow: 0px 1px 2px #666666;
    box-shadow: 0px 1px 2px #666666;
    font-family: Arial;
    color: #ffffff;
 ...

JavaScript

String.prototype.format = function() {
    var args = arguments;
    return this.replace(/{(\d+)}/g, function(match, number) { 
        return typeof args[number] != 'undefined' ? args[number] : match;
    });
};
var template = $("#MenuTemplate").html().format(""/*seourl content*/);
var template = $("body").append(template);