JSFiddle - React, Tailwind, and code Playground

by Aniruddha Galgali

HTML

<ul id="noty_bottom_layout_container" class="layoutContainer"><li class="lightTheme noty_container_type_error" style=""><div class="noty_bar noty_type_error" id="noty_675188014909158000"><div class="noty_message message_with_buttons"><span class="noty_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet sem eget diam facilisis lobortis. Suspendisse eros sapien, facilisis in ante ultrices, tempus malesuada lectus. Sed euismod facilisis sagittis. Nam ut mi ac quam volutpat volutpat quis non nibh. Nulla malesuada mauris nec semper lacinia. Sed ante justo, egestas ut lacus id, suscipit rhoncus augue. Nunc ut sagittis eros. Quisque a fringilla sapien.Vestibulum at orci at mi varius vestibulum sit amet pellentesque massa. Ut iaculis adipiscing cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nulla metus, hendrerit eu vulputate ac, ullamcorper eget felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ultricies velit eget volutpat rutrum. In vitae interdum sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices ipsum sed volutpat posuere. Aliquam facilisis vestibulum magna, vitae feugiat sem elementum a. Etiam pharetra pharetra mi, nec sollicitudin nisi. Aliquam erat volutpat. Suspendisse nec imperdiet erat. Nunc tempor vehicula enim, pretium molestie odio fermentum in. Aliquam nec augue nisi.Nam ultrices ipsum dolor, a tincidunt enim dictum sed. Donec convallis, nibh vel elementum placerat, tellus leo pharetra sem, nec congue sapien.</span></div><div class="noty_buttons"><button class="btn btn-notify" id="button-0">Close</button></div></div></li></ul>

CSS

#noty_bottom_layout_container {
    bottom: 0;
    height: auto;
    left: 20%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: fixed;
    width: 60%;
    z-index: 9999999;
}

.lightTheme.noty_container_type_error {
    background-color: #55A0B9;
    color: #FFFFFF;
}


.noty_bar {
    border-radius: 0;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    max-height: 100px;
    overflow: auto;
    text-align: center;
}


.message_with_buttons {
    float: left;
    width: 60%;
}
.noty_message {
    font-size: 13px;
    line-height: 16px;
    padding: 1.5% 2.5%;
    position: relative;
    text-align: center;
    width: auto;
    word-wrap: break-word;
}

.noty_buttons {
    float: right;
    padding: 1.5% 2.5%;
    text-align: center;
}