JSFiddle - React, Tailwind, and code Playground

by mgibsonbr

HTML

<div class="pagcartas">
    <ul>
        <li>
            <img src='http://www.google.com/intl/en_ALL/images/srpr/logo11w.png' alt='".$descricao."' title='Número:".$numero.", Cor:".$cor.", Símbolo: ".$simbolo." ' width=100 height=150/>
            <strong>Carta: </strong><span></span>
        </li>
    </ul>
</div>

CSS

.pagcartas ul{list-style: none;
          display: block;
          font: 12px Arial, Helvetica, sans-serif;
          float: left;
          padding: 5px 0 10px 8px;
          margin: 10px 0 0 12px;                 
          border: 1px solid #93AAB5;
          border-radius: 10px;
          background: #E7ECEF;
          width: 842px;
          }                        

.pagcartas ul li{background: #70909D;  
             padding: 2px 2px 5px 2px;
             float: left;
             border: 1px solid #ccc;
             margin: 5px 8px;
             border-radius: 10px;
             text-align: center;
             display: inline;
             } 

.pagcartas ul li img{border: 1px solid #ccc;
                 display: block;
                 border-top-left-radius: 5px;
                 border-top-right-radius: 5px;
                 width: 95px;
                 margin-bottom: 3px;
                 }                              

.pagcartas ul li strong{color: #fff}    

.pagcartas ul li span{color: #333}

JavaScript

function aleatorio() {
    return 100 + Math.random()*100;
}

for ( var i = 0 ; i < 29 ; i++ )
    $("li:eq(0)").clone().appendTo("ul").find("img").attr("height", aleatorio());