JSFiddle - React, Tailwind, and code Playground

by Fleisar

HTML

<div class="alert red">
  <span>Some text</span>
</div>

SCSS

.alert {
  --def-width: 720px;
  position: fixed;
  width: 100%;
  max-width: var(--def-width);
  bottom: 0;
  left: max(calc(50% - var(--def-width)/2 - 0.5em - 1px), 0px);
  padding: 0.5em;
  margin-bottom: 1em;
  box-sizing: border-box;
}

.alert.red {
  background: linear-gradient(#d97272, #b65b5b);
  color: #fff;
  border: 1px solid #ae6565;
}