JSFiddle - React, Tailwind, and code Playground

by Fernanda Alvarado

HTML

<script src="https://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>
                            Código: {{ gif.cod }}

            </p>
            <p>
              <a><span class="glyphicon glyphicon-heart"></span> Favorito</a>
            </p>
            <p id="des">
              Descripción: {{ gif.linke }}
            </p>
          </div>
        </div>
      </div>

      <footer>
  ...

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;
}
#des{
  text-align: justify;
  font-size: 13px;
}

JavaScript

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

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

  var images = [{
    name: 'Miss Dior',
    cod:'108579',
    linke: 'Para que un perfume perdure, primero tiene que permanecer mucho tiempo en el corazón de quienes lo crearon.» Miss Dior es la fragancia más apreciada por Monsieur Dior, la que más tiempo atesoró antes de desvelarla. El perfume de la audacia, de la renovación y de la libertad. Miss Dior es una estela y un rostro. Un corazón ardiente que palpita a toda velocidad.',
    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',
    cod:'547231',
    linke: 'All-new Echo tiene un nuevo parlante, un nuevo diseño y está disponible en seis estilos, incluidos los tejidos y las chapas de madera. Echo se conecta a Alexa para reproducir música, realizar llamadas, programar alarmas y temporizadores, hacer preguntas, controlar dispositivos domésticos inteligentes y más, de manera instantánea.',
    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"',
    cod:'612347',
    linke: 'Camiseta entallada con cuello ancho para chico y chica 100% algodón. Color blanco, con diseño Carpe Fuckin diem de la colección 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',
    cod:'451725',
    linke: 'Corre sin parar con esta zapatilla de running para hombre diseñada para dominar el asfalto. Incorpora una mediasuela boost™ que devuelve energía a cada paso para impulsarte hacia adelante. Además, presenta un exterior...