JSFiddle - React, Tailwind, and code Playground
by Alan Doe
HTML
<div id="user">
<div id="photo">
<div id="stripe">
<div id="innerGlow">
</div>
</div>
</div>
<div id="decor">
</div>
</div>
CSS
#user
{
width:150px;
height:200px;
position:relative;
}
#photo
{
width:80%;
height:100%;
float:right;
box-shadow:0px 0px 5px rgb(240,240,2400);
}
#decor
{
width:0;
height:0;
border-top:10px solid transparent;
border-right:30px solid rgb(210,210,210);
border-bottom:10px solid transparent;
position:absolute;
bottom:1px;
left:0;
}
#stripe
{
width:80%;
height:10px;
background-color:rgb(210,210,210);
position:absolute;
bottom:1px;
right:0;
}
#innerGlow
{
width:0;
height:0;
border-top:8px solid transparent;
border-right:120px solid rgb(180,180,180);
border-bottom:1px solid transparent;
position:absolute;
right:0;
bottom:0;
}