JSFiddle - React, Tailwind, and code Playground
by kougiland
HTML
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#wrapper
{
position: relative;
width:500px;
height: 300px;
margin: 50px;
border-top: 1px solid black;
border-left: 1px solid black;
}
#wrapper:before{
content:'y';
position: absolute;
left:-7px;
bottom:-6px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid black;
}
#wrapper:after{
content:'x';
position: absolute;
right:-4px;
top:-6px;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid black;
}
div#police{
transform: rotateY(0deg);
transform-origin:0% 0% 0px;
-webkit-transform: rotateY(0deg); /* Safari and Chrome */
-webkit-transform-origin:0% 0% 0px; /* Safari and Chrome */
-moz-transform: rotateY(0deg); /* Firefox */
-moz-transform-origin:0% 0% 0px; /* Firefox */
-o-transform: rotateY(0deg); /* Opera */
-o-transform-origin:0% 0% 0px; /* Opera */
cursor:pointer;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
position:relative;
width:240px;
height:120px;
background:#CFD0D2;
padding:16px;
border-radius:0px 16px 16px 16px;
box-shadow:inset 0px 0px 2px 4px silver, -2px 16px 16px -4px black, -20px 30px 20px -10px #aaa;
}
div#police:before{
content:attr(title);
position:absolute;
top:12px;
left:12px;
width:248px;
height:128px;
border-radius:10px;
z-index:4;
background:rgba(0,0,0, 0.2);
color:white;
line-height:24px;
text-align:center;
text-transform:uppercase;
font-size:16px;
}
div#police:hover:before{
background:rgba(0,0,0, 0);
}
div#police img{
position:absolute;
top:12px;
left:12px;
width:248px;
height:128px;
z-index:3;
...