JSFiddle - React, Tailwind, and code Playground

by Vince Aggrippino

HTML

<div class="leftcol">
<div class="sidebar">
   <div class="sideblock" id="sideimg"><div class="borda"><div class="circle"></div></div></div>
   <div class="sideblock" id="about">
       <div class="sidetitle">About me</div>
       <div class="description"><div class="textbox">Description</div></div>
   </div>
   <div class="sideblock" id="nav">
       <div class="sidetitle">Navigate</div>
       <div class="description">links here</div>
   </div>
   <div class="sideblock" id="extra">
       <div class="sidetitle">Extra Title</div>
       <div class="description">Extra Text</div>
   </div>
</div>
</div>

CSS

.leftcol {
    overflow:auto;
    clear:both;
}
.sideblock{
    margin-bottom:10px;
    overflow: auto;
    height: auto;
}
.borda {
	border-style: dotted;
	border-width: 3px;
	padding: 6px;
	width: 136px;
	height: 136px;
	-moz-border-radius: 75px;
	-webkit-border-radius: 75px;
	border-radius: 75px;
	margin: 0px auto;
}
 .circle {
	-moz-border-radius: 68px;
	-webkit-border-radius: 68px;
	width: 128px;
	height: 128px;
	margin-bottom: 5px;
	border-style: solid;
	border-width: 4px;
    background-position:center;
	background-image: url({image:Sidebar Image});
	background-size:cover;
}
 .description {
	-moz-border-bottom-left-radius: 20px;
	border-bottom-left-radius: 20px;
	-moz-border-bottom-right-radius: 20px;
	border-bottom-right-radius: 20px;
	padding:5px 5px 10px 10px;
	overflow: auto;
    background-color: red;
}
.sidetitle {
	border-top-left-radius:20px;
	-moz-border-top-left-radius:20px;
	border-top-right-radius:20px;
	-moz-border-top-right-radius:20px;
	padding:0 10px;
	height:34px;
	font-size: 24px;
	font-weight:bold;
    background-image: url({image:Title Gradient});
	background-repeat:repeat-x;
	color: {color:Post Title Color};
	text-shadow: 4px 4px 4px {color:Links and Shadow};
	font-family: {font:Post Titles};
}
#sideimg{
    width:30%;
}
#about{
    height:154px;
    position:absolute;
    left:30%;
    top:10px;
    width:67%;
}
#nav{
    position:absolute;
    top:164px;
    left:3%;
    width:45%;
}
#extra{
    position:absolute;
    top:164px;
    left:52%;
    width:45%;
}
.textbox {
    max-height: 100px;
    overflow: auto;
    padding-right: 5px;
}