JSFiddle - React, Tailwind, and code Playground

by mkhoudary

HTML

<body>
<div class="sidebar-top">
    <h2>our latest project...</h2>
  </div>
  <div class="sidebar-middle">
    <p>> Email confirmation upon register theming</p>
    <p>> Contact me form active</p>
    <p>> Error checking server side registration</p>
    <p>> Log in using email OR username</p>
    <p>> login box display more detials</p>
    <p>> Password reset</p>
    <p>> clean code</p>
    <p>> admin side</p>
    <p>> library for logcheck/admin check</p>
  </div>
  <div class="sidebar-bottom">
  </div>
</body>

CSS

* {
margin: 0;
padding: 0;
}
body {
background: #ededed
}
h2 {
 text-transform: capitalize;
 color: #666;
 letter-spacing: -1px;
 padding-top: 7px;
 font: bold 16px Arial, Helvetica, sans-serif;
}
p {
 color: #999;
 padding: 0;
 margin: 10px 0;
 font: 12px/18px Arial, Helvetica, sans-serif;
}
.sidebar-top {
	float: left;
	border-top-right-radius: 12px;
	border-top-left-radius: 12px;
	border: 1px solid #ccc;
	height: 32px;
	width: 290px;
	background: -webkit-linear-gradient(top, white 0%,#E8E8E8 100%);
	background: linear-gradient(to bottom, white 0%,#E8E8E8 100%);
	padding: 4px 15px;
}
.sidebar-middle {
	float: left;
	width: 290px;
	padding: 5px 15px 0 15px;
	border-right: 1px solid #d3d3d3;
	border-left: 1px solid #d3d3d3;
	background: #fff;
}
.sidebar-middle p { text-align: justify; }
.sidebar-bottom {
	background: #fff;
	float: left;
	height: 16px;
	width: 290px;
	border-bottom-right-radius: 12px;
	border-bottom-left-radius: 12px;
	border-right: 1px solid #d3d3d3;
	border-left: 1px solid #d3d3d3;
	border-bottom: 1px solid #d3d3d3;
	margin-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
}