JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
<!-- Nice Responsive Side Box -->
<div class="sBox">
<div class="sText"><strong>Heading</strong></div>
</div>
<div class="sBox2"><div class="sText"><ul>
<li><a href="#">some text</a></li>
<li><a href="#">some text</a></li>
<li><a href="#">some text</a></li>
</ul>
</div></div>
<div class="iBox">
<div class="iText">
<strong>Heading</strong>
<p>some text</p>
<p>some text</p>
<p>some text</p>
</div>
</div>CSS
.sBox {max-width:300px;background-color:#fff;border-width:4px 1px 0px 1px;border-style:solid;border-color:#4697C0 #BBB #BBB #BBB;}
.sText {width:100%;padding:5%;}
.sText ul {padding:0;margin:0;}
.sText li {list-style-type: none;padding:5px 0;}
.sText li a {text-decoration:none;}
.sBox2 {max-width:300px;background-color:#fff;border:1px solid #BBB;margin-bottom:5px;}
.iBox {max-width:297px;background-color:#fff;border-width:1px 1px 1px 4px;border-style:solid;border-color:#BBB #BBB #BBB #4697C0;}
.iText {padding:5% 1% 1% 5%;}