JSFiddle - React, Tailwind, and code Playground

by jeryagus

HTML

<div class="photo-album">
           
            <h1><span>LogCyber<abbr title="and" class="amp">&amp;</abbr> Collect Photo Gallery</span></h1>
           
            <a href="#" class="large polaroid img1"><img src="http://bbupbipchuelfxtion.files.wordpress.com/2011/03/korean_asian_girl_hair_style_05.jpg" alt="">Korean Asian Girl Name Yoona</a>
            <a href="#" class="polaroid img2"><img src="http://3.bp.blogspot.com/_M9HbHNF0lhk/TN2BBo_JulI/AAAAAAAAACc/Agj_DF1vr4c/s1600/asian-girl-hot.jpg" alt="">Girl Korean & Car</a>
            <a href="#" class="small polaroid img3"><img src="http://i2.asntown.net/h3/Girls/9/photo-single-asians/pretty-asian-girls-on-social-network-site01.jpg" alt="">pretty asian girls on social network</a>
           
            <a href="#" class="medium polaroid img4"><img src="http://upload.wikimedia.org/wikipedia/commons/1/14/Asian_woman_shushing.jpg" alt="">tall asian women</a>
           
            <a href="#" class="polaroid img5"><img src="http://i2.asntown.net/ha/girls1/12-5-10/cute-asian-girl41.jpg" alt="">cute asian girl</a>
           
           
            <a href="#" class="polaroid img6"><img src="http://desmond.imageshack.us/Himg132/scaled.php?server=132&filename=sasaki021301375x500.jpg&res=landing" alt="">The Really Cute Asian Girl ❤ Nozomi</a>
           
            <a href="#" class="polaroid img7"><img src="http://try-iphone.com/live-wallpapers/wp-content/uploads/2012/04/Asian-Girl-1222-h.jpg" alt="">Hot Girls</a>
            <a href="#" class="small polaroid img8"><img src="http://1.bp.blogspot.com/-YlSXcu7_TG0/TljiWScwFJI/AAAAAAAAAk0/W-S2Lp-j5J0/s1600/ulzzang.jpg" alt="">Asian cute girls WITHOUT Make-Up</a>
            <a href="#" class="medium polaroid img9"><img src="http://dealofhair.com/wp-content/uploads/2012/06/afccc7edf782a74a4adf892bb84699883.jpg" alt="">Cute Long Curly with Brown Color for Asian Girl</a>
            <a href="#" class="polaroid img10"><img...

CSS

<style type="text/css">
        .amp {
            font-family:Garamond,Baskerville,Georgia,serif !important;
            font-style:italic;
            font-weight:normal;
            border: none;
        }
       
        a.polaroid {
            display: block;
            text-decoration: none;
            color: #333;
            padding: 10px 10px 20px 10px;
            width: 150px;
            border: 1px solid #BFBFBF;
            background-color: white;
            z-index: 2;
            font-size: 0.7em;
            -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
            -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
            box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
            -webkit-transition: -webkit-transform 0.5s ease-in;
        }
        a.polaroid:hover,
        a.polaroid:focus,
        a.polaroid:active {
            z-index: 999;
            border-color: #6A6A6A;
            -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
            -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
            box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        .polaroid img {
            margin: 0 0 15px;
            width: 150px;
            height: 150px;
        }
       
        a img {
            border: none;
            display: block;
        }
       
        .photo-album {
            position: relative;
            width: 80%;
            margin: 0 auto;
            max-width: 70em;
            height: 450px;
            margin-top: 5em;
            min-width: 800px;
            max-width: 900px;
        }
        .photo-album .polaroid {
            position: absolute;
        }
        .photo-album h1 {
            position: absolute;
            z-index: 5;
            top: 150px;
            text-align: center;
            width: 100%;
            line-height: 1.9;
        }
       ...