.snackbar-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
}

.snackbar {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  min-width: 300px;
  border-radius: 3px;
  color: #222;
  margin-bottom: 20px;
  transition: all 0.2s ease-in;
}

.snackbar i {
  margin-right: 10px;
}

.snackbar-success {
  background-color: rgb(12, 161, 12);
  box-shadow: 0px 5px 20px rgba(12, 161, 12, 0.3);
}

.snackbar-error {
  background-color: rgb(255, 101, 101);
  box-shadow: 0px 5px 20px rgba(255, 101, 101, 0.3);
}

.snackbar-info {
  background-color: rgb(42, 138, 248);
  box-shadow: 0px 5px 20px rgba(42, 138, 248, 0.3);
}

.snackbar-warn {
  background-color: rgb(250, 174, 34);
  box-shadow: 0px 5px 20px rgba(250, 174, 34, 0.3);
}

/* 

USAGE

 <div class="snackbar-container">
    <div class="snackbar snackbar-success">
        <i class="fas fa-info"></i>
        <div class="snackbar-message">
            This is a message
        </div>
    </div>
    <div class="snackbar snackbar-error">
        <i class="fas fa-info"></i>
        <div class="snackbar-message">
            This is a message
        </div>
    </div>
    <div class="snackbar snackbar-warn">
        <i class="fas fa-info"></i>
        <div class="snackbar-message">
            This is a message
        </div>
    </div>
    <div class="snackbar snackbar-info">
        <i class="fas fa-info"></i>
        <div class="snackbar-message">
            This is a message
        </div>
    </div>
</div>


*/