JSFiddle - React, Tailwind, and code Playground

by paulL

HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title><!-- Insert your title here --></title>
    
<style type="text/css">

body {
    background: #d2e53d;
}
    
    .wrap {
        position: relative;
        width: 300px;
        height: 200px;
        
        margin: 100px auto 0;
    }
    
        .fakepic{
            position: absolute;
            display: block;
            height: 100%;
            width: 100%;
            background: #fffeee;
            -webkit-box-shadow: 0px 0px 8px #ccc;
            -webkit-transition: all 0.3s ease-in-out;
        }
                
            .one {
                -webkit-transform: rotate(4deg);
            }
            
                .wrap:hover .one,
                .wrap:hover .two{
                    -webkit-transform: rotate(0deg);
                }
                
                .wrap:hover .one {
                    left: 6px;
                    top: 6px;
                }
            
            .two {
                left: 10px;
                -webkit-transform: rotate(-2deg);
            }
            
                .wrap:hover .two{
                    left: 4px;
                    top: 4px;
                }
       
    .smallwrap {
        position: absolute;
        z-index: 5;
        
        width: 300px;
        height: 200px;
        background: #f9f9f9;
        
        -webkit-box-shadow: 0px 0px 8px #ccc;
        -webkit-transform: rotate(1deg);
        -webkit-transition: all 0.3s ease-in-out;
    }
    
        .wrap:hover .smallwrap {
            -webkit-transform: rotate(0deg);
        }
    
        span.image {
            background: #fff;
            display: block;
            
            width: 260px;
            height: 160px;
            
            position: absolute;
            left: 50%;
            margin-left: -130px;
            top: 50%;
            margin-top: -80px;
            z-index: 5;
            
            border: 1px solid #ccc;
        }
      ...