JSFiddle - React, Tailwind, and code Playground

by jonjohnjohnson

HTML

<ul class="markdown">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

CSS

.markdown {
margin-left: 5px;
position: relative;
display: block;
border: 15px solid #000;
width: 310px;
border-radius: 22px;
height: 180px;
}
.markdown li:nth-child(1),
.markdown li:nth-child(5) {
position: absolute;
border-left: 30px solid black;
background: black;
height: 120px;
left: 30px;
top: 30px;
}
.markdown li:nth-child(2),
.markdown li:nth-child(3) ,
.markdown li:nth-child(4)  {
height:0;
width: 0;
position: absolute;
}
.markdown li:nth-child(2) {
border-bottom: 58px solid black;
border-right: 45px solid transparent;
top: 30px;
left: 60px;
}
.markdown li:nth-child(3) {
border-top: 50px solid black;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
top: 85px;
left: 60px;
}
.markdown li:nth-child(4) {
border-bottom: 58px solid black;
border-left: 45px solid transparent;
top: 30px;
left: 95px;
}
.markdown li:nth-child(5) {
left: 140px;
}
.markdown li:nth-child(6) {
position: absolute;
width: 30px;
background: black;
height: 90px;
left: 225px;
top: 30px;
}
.markdown li:nth-child(7) {
position: absolute;
width: 0;
height: 0;
border-top: 65px solid black;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
top: 85px;
left: 190px;
}