JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<fieldset class="kt">
<legend>Key Takeaways</legend>
<ul>
<li>There’s a long running rumor that McKinsey, the world’s most prestigious strategy consulting firm, tells their staff to always follow “The Rule of 3”.</li>
<li>The Rule of 3 states that you should always present key points, reasons, recommendations, or next steps in threes.</li>
<li>McKinsey argues that three is the most natural and common way to explain things. For example, storylines follow “situation-complication-resolution”, photography follows “the rule of thirds”, and so on.</li>
<li>Of course, this isn’t a strict rule. The point is to force yourself to distill complex analysis down into simple key takeaways and to structure them in an easy-to-understand way.</li>
</ul>     
</fieldset>

CSS

.kt {border:1px solid #1668B0;padding:0;background-color:#F9FCFF;background-image: linear-gradient(to bottom right, #F9FCFF, #ffffff, #F9FCFF);-webkit-box-shadow: 3px 3px 7px -4px rgba(0,0,0,0.5);
-moz-box-shadow: 3px 3px 7px -4px rgba(0,0,0,0.5);
box-shadow: 3px 3px 7px -4px rgba(0,0,0,0.5);}
.kt legend {margin:0 0 0 10px;color: #1668B0;font-weight:bold;}
.kt ul {margin:0 10px 0 30px;padding:0;}
.kt ul li {margin:20px 0;}
.kt ul li::marker {color: #1668B0;}