JSFiddle - React, Tailwind, and code Playground

by DiegoTc

HTML

<div class="container">
<div class="bonecard">Example
    <br />Next line
    <br />Line after
</div>
<div class="bonecard">Example #2
    <br />Next line
    <br />Line after
</div>
    <div class="bonecard">Example #3
    <br />Next line
    <br />Line after
</div>
<div class="bonecard">Example #4
    <br />Next line
    <br />Line after
</div>
<div class="bonecard">Example #5
    <br />Next line
    <br />Line after
</div>
<div class="bonecard">Example #6
    <br />Next line
    <br />Line after
</div>    
</div>

CSS

div.container {
	width: 100%;
	overflow: hidden;
}

div.bonecard {
    background-color: white;
    margin: 20px;
    width: 340px;
    height: 210px;
    border: 2px solid black;
    border-left: 2px solid black;
    padding: 10px;
    -webkit-border-radius: 20px;
    -webkit-border-top-right-radius: 50px;
    -webkit-border-bottom-right-radius: 50px;
    -moz-border-radius: 20px;
    -moz-border-radius-topright: 50px;
    -moz-border-radius-bottomright: 50px;
    border-radius: 20px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    position: relative; 
    margin:  2% 2% 50px 2%;
	float: left;
    -webkit-transition: color 0.5s ease;
}
div.bonecard:after, div.bonecard:before {
    background-color: white;
    position: absolute;
    display: block;
    content:"";
    border: 2px solid black;
    border-right: 2px solid white;
    width: 6px;
    left: -10px;
}
div.bonecard:before {
    top: 60px;
    height: 60px;
}
div.bonecard:after {
    top: 180px;
    height: 30px;
}


/**LIGHT BOX**/

div.bonecardLightBox {
    background-color: white;
    margin: 20px;
    width: 850px;
    height: 525px;
    border: 2px solid black;
    border-left: 2px solid black;
    padding: 10px;
    -webkit-border-radius: 20px;
    -webkit-border-top-right-radius: 50px;
    -webkit-border-bottom-right-radius: 50px;
    -moz-border-radius: 20px;
    -moz-border-radius-topright: 50px;
    -moz-border-radius-bottomright: 50px;
    border-radius: 20px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    position: relative; 
    margin:  2% 2% 50px 2%;
	float: left;
    -webkit-transition: color 0.5s ease;
}

div.bonecardLightBox:after, div.bonecardLightBox:before {
    background-color: white;
    position: absolute;
    display: block;
    content:"";
    border: 2px solid black;
    border-right: 2px solid white;
    width: 6px;
    left: -10px;
}

div.bonecardLightBox:before {
    top: 150px;
    height:...

JavaScript

$('.bonecard').css("cursor", "pointer");
$('.bonecard').click(function() {
    $(this).toggleClass('zoomed');
});