JSFiddle - React, Tailwind, and code Playground

by DiegoTc

HTML

<div class="bonecard">Example
    <br />Next line
    <br />Line after</div>
<div class="bonecard zoomed">Example #2
    <br />Next line
    <br />Line after
    <br />Defaults to zoomed</div>

CSS

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;
}
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;
}
div.zoomed {
    width: 850px;
    height: 525px;
}
div.zoomed:before {
    top: 150px;
    height: 150px;
}
div.zoomed:after {
    top: 460px;
    height: 45px;
}

JavaScript

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