JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Toast Notification 01</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link
            href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
            rel="stylesheet"
        >
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="notification notification--success">
                <div class="notification__body">
                    <div class="notification__icon">
                        <!-- svg icon -->
                    </div>
                    Your account has been created! &#128640; 
                </div>
                <div class="notification__progress"></div>
            </div>
            <div class="notification notification--failure">
                <div class="notification__body">
                    <div class="notification__icon">
                        <!-- svg icon -->
                    </div>
                    Account creation failed! &#128543;
                </div>
                <div class="notification__progress"></div>
            </div>
            <div class="notification notification--warning">
                <div class="notification__body">
                    <div class="notification__icon">
                        <!-- svg icon -->
                    </div>
                    This is my warning message!
                </div>
                <div class="notification__progress"></div>
            </div>
            <div class="notification notification--info">
                <div class="notification__body">
                    <div class="notification__icon">
                        <!-- svg icon -->
                    </div>
                    A...

CSS

:root {
    --white: #f8f8ff;
}

.notification--info {
    --bg: #E5EFFA;
    --border: #016BE175;
    --primary: #016BE1;
}

.notification--failure {
    --bg: #FCEDEA;
    --border: #EC4E2C75;
    --primary: #EC4E2C;  
}

.notification--warning {
    --bg: #FEF7EA;
    --border: #EF940075;
    --primary: #EF9400;
}

.notification--success {
    --bg: #EBF7EE;
    --border: #3FBF6275;
    --primary: #3FBF62;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', 
        sans-serif;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    display: flex;
    margin: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    gap: 0.5rem;
}


.notification {
    min-width: 22rem;
    margin-left: auto; 
    margin-right: auto;
    border-radius: 0.6rem;
    background: var(--bg);
    color: var(--primary);
    border: 1.5px solid 
        var(--border);
    box-shadow: 0 1px 5px 
        rgba(0, 0, 0, 0.05);
    transform: translateY(
        1.875rem);
    opacity: 0;
    padding: 0.125rem;
    visibility: hidden;
    animation: fade-in 3s
     linear;
}

.notification__icon {
    height: 1.75rem;
    width: 1.75rem;
    padding: 0.35rem;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
}

.notification__icon svg {
    height: 1.5rem;
    width: 1.5rem;
    stroke-width: 2;
    stroke: var(--white);
}

.notification__body {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem;
    margin-bottom: 0.2rem;
}

.notification__progress {
    position: absolute;
    left: 0.25rem;
    bottom: 0.25rem;
    width: calc(100% - 1rem);
    height: 0.15rem;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(
        to right, 
       ...