JSFiddle - React, Tailwind, and code Playground

by Fernanda Alvarado

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!doctype html>
<html lang="es" ng-app="gifwalletApp">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="stylesheets/app.css">

    <script src="javascripts/angularjs.js"></script>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

    <script src="src/app.js"></script>
    <title>Productos</title>
</head>

<body>
    <div class="container">
        <header>
            <ul class="nav nav-pills pull-right">
                <li class="active">
                    <a href="#">
                        <span class="glyphicon glyphicon-home"></span> &nbsp;
                      <span class="badge pull-right">42</span> 
                    </a>
                </li>
                <li>
                    <a href=""><span class="glyphicon glyphicon-plus"></span></a>
                </li>
                <li>
                    <a href=""><span class="glyphicon glyphicon-search"></span></a>
                </li>
            </ul>
            <h3 class="text-muted">Productos</h3>
        </header>

        <div id="images" class="row" ng-controller="GifListController">
            <div class="col-lg-12 media" ng-repeat="gif in giflist">
                <a href="" class="pull-left thumbnail">
                    <img class="media-object" src="{{ gif.url }}" width="200">
                </a>
                <div class="media-object">
                    <h4 class="media-heading">{{ gif.name }}</h4>   
                    <p>
                        <a><span class="glyphicon glyphicon-heart"></span> Favorito</a>
                    </p>
                    <p>
                        Link: <a href="">{{...

CSS

body {
    padding: 20px;
}

.container {
    max-width: 800px;
}

.container header {
    overflow: hidden;
    border-bottom: 1px solid #E5E5E5;
}

#images {
    padding: 20px 0;
}

footer {
    border-top: 1px solid #E5E5E5;
    overflow: hidden;
    padding: 20px 0;
}

JavaScript

var gifwalletApp = angular.module('gifwalletApp', []);

gifwalletApp.controller('GifListController', function($scope) {

    var images = [{
        name: 'Miss Dior',
        linke: 'https://www.dior.com/beauty/es_sam/perfumes-y-belleza/perfumes/perfumes-femeninos/miss-dior/fr-missdiorfpl-missdior.html',
        url: 'https://www.dior.com/beauty/version-5.1432748111912/resize-image/ep/0/390/100/0/packshots_pdg%252FPDG_Y0782210.jpg',
        tags: ['perfume', 'dior'],
        favorite: true
        
    }, 
    {
        name: 'All-new Echo',
        linke: 'https://www.amazon.com',
        url: 'https://images-na.ssl-images-amazon.com/images/I/71ZhZ6C-YnL._SX522_.jpg',
        tags: ['echo', 'amazon', 'altavoz'],
        favorite: true
        
    },
    {
        name: 'Camiseta Unisex "Carpe Fuckin Diem"',
        linke: 'https://wildstylestore.com/collections/wild-lifestyle',
        url: 'https://cdn.shopify.com/s/files/1/2032/1165/products/carpediem_unisex_white_front_380x.jpg?v=1508234212',
        tags: ['carpe diem', 'jordi', 'camiseta'],
        favorite: true
        
    },
    {
        name: 'Zapatillas para correr Pureboost',
        linke: 'http://www.adidas.pe/zapatillas-para-correr-pureboost/BA8898.html',
        url: 'http://www.adidas.pe/dis/dw/image/v2/aaqx_prd/on/demandware.static/-/Sites-adidas-products/default/dw3848f993/zoom/BA8898_01_standard.jpg?sw=300',
        tags: ['adidas', 'hombre'],
        favorite: true
        
    },{
        name: 'Michael Scott',
        linke: 'https://theofficefanpage.weebly.com/',
        url: 'http://media.giphy.com/media/zIPKUgO2Ln6XC/giphy.gif',
        tags: ['the office', 'michael scott', 'asap'],
        favorite: false
    }];

    $scope.giflist = images;
});