How to create: sticky notes

Learn how to use CSS to create 'sticky notes'.

Sticky Notes

Sticky notes can be used to notify users of special matters: danger, success, information, or warnings, etc.

Danger!Some text...

Success!Some text...

Information!Some text...

Warning!Some text...

<div class="danger">
  <p><strong>Danger!</strong> Some text...</p>
</div>

.danger {
  background-color: #ffdddd;
  border-left: 6px solid #f44336;
}