JSFiddle - React, Tailwind, and code Playground

by sperske

HTML

<div class="notifications">
  <div class="notification hasIcon hasAction">
    <div class="icon">
      <img src="https://img.icons8.com/ios-glyphs/30/000000/cute-monster.png" />
    </div>
    <div class="message">
      Something happened!
    </div>
    <div class="action">
      <a href="#">ok</a>
    </div>
  </div>
  <div class="notification hasAction">
    <div class="message">
      Something happened!
    </div>
    <div class="action">
      <a href="#">ok</a>
    </div>
  </div>
  <div class="notification">
    <div class="message">
      Something happened!
    </div>
  </div>
  <div class="notification hasIcon">
    <div class="icon">
      <img src="https://img.icons8.com/ios-glyphs/30/000000/cute-monster.png" />
    </div>
    <div class="message">
      Something happened with just an icon to tell you why to care! This can be a looong mesager but a simple icon can really help drive the point home!
    </div>
  </div>
</div>

CSS

.notifications {
  position: fixed;
  right: 0;
  bottom: 0;
  padding: 12px;
  width: 350px;
}

.notifications .notification {
  margin: 5px;
  padding: 5px;
  border-radius: 8px;
  background-color: grey;
  display: grid;
  grid-template-columns: auto;
  grid-template-areas: "message";
  min-height: 40px;
}

.notifications 

.notifications .notification.hasAction {
  grid-template-columns: auto 60px;
  grid-template-areas: "message action";
}

.notifications .notification.hasIcon {
  grid-template-columns: 45px auto;
  grid-template-areas: "icon message";
}

.notifications .notification > div {
  align-self: center;
}

.notifications .notification .icon {
  grid-area: icon;
  text-align: center;
}

.notifications .notification .message {
  grid-area: message;
}

.notifications .notification .action {
  grid-area: action;
}

.notifications .notification .action a {
  text-decoration: none;
  color: #fff;
  background: #1fb141;
  border-radius: 6px;
  display: block;
  text-align: center;
  padding: 5px;
}