⚠️ Alert Box

<div class="alert-info">
  <span class="alert-icon">ℹ️</span>
  <div class="alert-content">
    <div class="alert-title">Information</div>
    <div class="alert-text">A new software update is available. See what's new in version 2.0.</div>
  </div>
</div>

.alert-info {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(79, 172, 254, 0.1);
  border: 1px solid rgba(79, 172, 254, 0.3);
  border-radius: 10px;
  width: 400px;
}
.alert-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.alert-content {
  flex: 1;
}
.alert-title {
  font-size: 1rem;
  font-weight: 700;
  color: #4facfe;
  margin-bottom: 0.5rem;
}
.alert-text {
  font-size: 0.9rem;
  color: #1a1a2e;
  line-height: 1.5;
}

<div class="alert-warning">
  <span class="alert-icon">⚠️</span>
  <div class="alert-content">
    <div class="alert-title">Warning!</div>
    <div class="alert-text">Your session will expire in 5 minutes. Please save your work.</div>
    <button class="alert-action">Extend Session</button>
  </div>
</div>

.alert-warning {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(250, 112, 154, 0.1);
  border: 1px solid rgba(250, 112, 154, 0.3);
  border-radius: 10px;
  width: 400px;
}
.alert-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.alert-content {
  flex: 1;
}
.alert-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fa709a;
  margin-bottom: 0.5rem;
}
.alert-text {
  font-size: 0.9rem;
  color: #1a1a2e;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
.alert-action {
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: #1a1a2e;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.3s ease;
}
.alert-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(250, 112, 154, 0.3);
}

<div class="alert-success">
  <span class="alert-icon">✅</span>
  <div class="alert-content">
    <div class="alert-title">Payment Successful!</div>
    <div class="alert-text">Your order has been processed. A confirmation email has been sent.</div>
  </div>
</div>

.alert-success {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(67, 233, 123, 0.1);
  border: 1px solid rgba(67, 233, 123, 0.3);
  border-radius: 10px;
  width: 400px;
}
.alert-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.alert-content {
  flex: 1;
}
.alert-title {
  font-size: 1rem;
  font-weight: 700;
  color: #43e97b;
  margin-bottom: 0.5rem;
}
.alert-text {
  font-size: 0.9rem;
  color: #1a1a2e;
  line-height: 1.5;
}