JSFiddle - React, Tailwind, and code Playground

by Bart Kalisz

HTML

<section class="alert is-visible">
  <div class="alert__container alert__container--{{ alert.type }}">
    <div class="alert__inner">
      <div class="alert__message">
        {{ alert.text }} <a class="js-alert-link alert__inner--link" href="{{alert.link}}">{{ alert.link_text }}</a>.
      </div>
      <button class="alert__close icon-close-small js-close">Close</button>
    </div>
  </div>
</section>

CSS

.alert {
  max-height: 0;
  overflow-y: hidden;
  transition: max-height 0.1s;
}
.alert.is-visible {
  max-height: 6.5rem;
}
.alert__container {
  padding-left: 2rem;
  padding-right: 2rem;
  text-align: center;
}
.alert__inner {
  align-items: center;
  color: white;
  display: flex;
  flex-direction: row;
  font-size: 1.4rem;
  justify-content: space-between;
  opacity: 0;
  padding: 2.2rem 0;
  transition: opacity 100ms;
}
.alert__inner.is-visible {
  opacity: 1;
}
.alert__inner--link {
  color: black;
  text-decoration: underline;
}
.alert__message {
  width: 100%;
}
.alert__close {
  background-color: transparent;
  border: 0;
  color: white;
  cursor: pointer;
  font-size: 0;
  font-weight: normal;
  height: 2rem;
  outline: 0;
  padding: 0;
  transition: color 0.2s;
}
.alert__close:hover, .alert__close:active, .alert__close:focus {
  color: white;
}
.alert__close::before {
  font-size: 1.2rem;
}