Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Color in Elements</title>
  <style>
    body { font-family: sans-serif; padding: 24px; }

.card {
      background-color: #fff;
      color: #333;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      margin-bottom: 16px;
    }
    .card.success {
      background-color: #e8f5e9;
      color: #1b5e20;
      border-color: #a5d6a7;
    }
    .card.warning {
      background-color: #fff8e1;
      color: #e65100;
      border-color: #ffcc80;
    }
    .card.error {
      background-color: #ffebee;
      color: #b71c1c;
      border-color: #ef9a9a;
    }
    h2 { color: #1a237e; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
  </style>
</head>
<body>
  <h2>Notification Cards</h2>
  <div class="card success"><strong>Success!</strong> Your changes were saved.</div>
  <div class="card warning"><strong>Warning!</strong> Storage is almost full.</div>
  <div class="card error"><strong>Error!</strong> Unable to connect.</div>
</body>
</html>