<html>

<head>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
        crossorigin="anonymous">
</head>

<body>
<div class="bg-blue-100 text-blue-500 border-l-8 border-blue-500 p-4 mb-2">
		<p class="font-bold">Note</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...</p>
</div>
<div class="bg-red-100 text-red-500 border-l-8 border-red-500 p-4 mb-2">
		<p class="font-bold">Note</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...</p>
</div>
<div class="bg-yellow-100 text-yellow-500 border-l-8 border-yellow-500 p-4 mb-2">
		<p class="font-bold">Note</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...</p>
</div>
<div class="bg-orange-100 text-orange-500 border-l-8 border-orange-500 p-4 mb-2">
		<p class="font-bold">Note</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...</p>
</div>
<div class="bg-teal-100 text-teal-500 border-l-8 border-teal-500 p-4 mb-2">
		<p class="font-bold">Note</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...</p>
</div>
<div class="bg-green-100 text-green-500 border-l-8 border-green-500 p-4">
		<p class="font-bold">Note</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...</p>
</div>
</body>

</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.