Alerts

by Anderson Madeira

HTML

<div class="message">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque eius suscipit ipsa velit obcaecati beatae saepe dolorum placeat deserunt sed, animi aliquid reprehenderit recusandae ratione ea soluta pariatur praesentium nostrum!</p>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto');

.message {
  border-left: 10px solid #4caf50;
  padding: 5px 20px 5px;
  background-color: #ddffdd;
  font-family: 'Roboto', sans-serif;
  font-size: 0.9em;
  color: #333333;
}

.message:hover {
  background-color: #f36d64;
  border-color: #ff4f43;
  cursor: pointer;
}

.message {
  -webkit-user-select: none;        
  -moz-user-select: none; 
  -ms-user-select: none; 
  -o-user-select: none;
  user-select: none;
}