Dismissable alerts using only CSS
Header and Toast can be dismissed by clicking anywhere
Footer can only be dismissed using the close button
If this component helped you, why not
Advertisment
Code
The code for the starter component which you can drop into your existing project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tailwind CSS Starter Component - Alerts / Toasts : Tailwind Toolbox</title>
<link href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" rel=" stylesheet">
<!--Replace with your tailwind.css once created-->
<style>
/*Banner open/load animation*/
.alert-banner {
-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/*Banner close animation*/
.alert-banner input:checked~* {
-webkit-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
/*Footer open/load animation*/
.alert-footer {
-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/*Footer close animation*/
.alert-footer input:checked~* {
-webkit-animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
/*Toast open/load animation*/
.alert-toast {
-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/*Toast close animation*/
.alert-toast input:checked~* {
-webkit-animation: fade-out-right 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: fade-out-right 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* -------------------------------------------------------------
* Animations generated using Animista * w: http://animista.net,
* ---------------------------------------------------------- */
@-webkit-keyframes slide-in-top {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1
}
}
@keyframes slide-in-top {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1
}
}
@-webkit-keyframes slide-out-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1
}
100% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0
}
}
@keyframes slide-out-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1
}
100% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0
}
}
@-webkit-keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1
}
}
@keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1
}
}
@-webkit-keyframes slide-out-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1
}
100% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0
}
}
@keyframes slide-out-bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1
}
100% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0
}
}
@-webkit-keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1
}
}
@keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1
}
}
@-webkit-keyframes fade-out-right {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1
}
100% {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0
}
}
@keyframes fade-out-right {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1
}
100% {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0
}
}
</style>
</head>
<body>
<!--Header Alert-->
<div class="alert-banner w-full fixed top-0">
<input type="checkbox" class="hidden" id="banneralert">
<label class="close cursor-pointer flex items-center justify-between w-full p-2 bg-red-500 shadow text-white" title="close" for="banneralert">
Banner Alert (click anywhere to close)
<svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg>
</label>
</div>
<!--Footer Alert-->
<div class="alert-footer w-full fixed bottom-0">
<input type="checkbox" class="hidden" id="footeralert">
<div class="flex items-center justify-between w-full p-2 bg-blue-500 shadow text-white">
Footer Alert (Only use X to close)
<label class="close cursor-pointer" title="close" for="footeralert">
<svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg>
</label>
</div>
</div>
<!--Toast-->
<div class="alert-toast fixed bottom-0 right-0 m-8 w-5/6 md:w-full max-w-sm">
<input type="checkbox" class="hidden" id="footertoast">
<label class="close cursor-pointer flex items-start justify-between w-full p-2 bg-green-500 h-24 rounded shadow-lg text-white" title="close" for="footertoast">
Toast Alert (click anywhere to close)
<svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg>
</label>
</div>
</body>
</html>Find more components at: www.tailwindtoolbox.com/starter-components