JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="photo-album"> 
<a href="http://osc.co.cr/wp-content/uploads/userphoto/7.png" class="medium polaroid"><img src="http://osc.co.cr/wp-content/uploads/userphoto/7.png" alt="">World! is my oister. -Rolo</a> 
</div>

CSS

body {
        background-color: #E9E9E9;
        color: #333;
        font-family:"Lucida handwriting", "Snell Roundhand", "Helvetica Neue",Arial,Helvetica,sans-serif;
        font-size: 16px;
    }
 
    a.polaroid {
        display: block;
        margin: 1em auto 0 auto;
        text-decoration: none;
        color: #333;
        padding: 13px 13px 26px 13px;
        width: 200px;
        border: 1px solid #BFBFBF;
        background-color: white;
        z-index: 2;
        font-size: 0.8em;
        -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(10deg);
        -moz-transform: rotate(10deg);
        transform: rotate(10deg);
        -webkit-transition: all 0.1s ease-in;
        transition: all 0.1s ease-in;
    }
    a.polaroid:hover,
    a.polaroid:focus,
    a.polaroid:active {
        z-index: 999;
        border-color: #6A6A6A;
        -webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.1);
        -moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.1);
        box-shadow: 15px 15px 20px rgba(0,0, 0, 0.1);
        -webkit-transform: rotate(0deg) scale(1.05);
        -moz-transform: rotate(0deg) scale(1.05);
        transform: rotate(0deg) scale(1.05);
    }
    .polaroid img {
        margin: 0 0 15px;
        min-width: 200px;
    }
    
    a img {
        border: none;
        display: block;
    }