JSFiddle - React, Tailwind, and code Playground

HTML

<!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">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <title>Toast</title>
</head>

<body>
<div class="jumbotron bg-primary text-white jumbotron-fluid">
    <div class="container">
        <h1 class="text-center display-4">Toast</h1>
        <h3 class="text-center">A jQuery plugin for Bootstrap 4.2+</h3>
    </div>
</div>

<div class="container-fluid text-center">
    <button class="snack btn btn-primary">Snack</button>
    <button class="toast-btn btn btn-primary">Toast</button>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac malesuada ipsum. Vestibulum in nunc sed erat
    facilisis lacinia in vitae lacus. Curabitur ornare nulla non urna posuere cursus. Aliquam in molestie augue, ac
    vehicula est. Pellentesque eget massa nibh. Nulla maximus quam laoreet finibus dictum. Aliquam pretium porta
    malesuada. Cras pretium odio massa, non blandit ligula maximus at. Proin sollicitudin felis sollicitudin turpis
    mattis ultricies.</p>

<p>Donec rutrum, magna ut lacinia aliquam, dui justo consequat eros, non feugiat lectus ligula non lacus. Donec
    consequat pharetra posuere. Pellentesque malesuada sodales erat bibendum condimentum. Ut porttitor dignissim semper.
    Quisque sed urna venenatis, sollicitudin tellus vitae, ultricies justo. Suspendisse potenti. Donec in sapien
    molestie, pharetra nisl sit amet, pulvinar erat. Donec ultricies mauris enim, non vehicula sapien malesuada eget.
    Aliquam tristique accumsan magna, eget facilisis nulla convallis sed. Fusce malesuada ipsum sem, eget finibus arcu
    euismod id. Mauris fringilla libero felis, vitae iaculis ante vehicula vitae. Pellentesque ullamcorper semper
    vestibulum. In rutrum at sapien et...

CSS

.toast-container{position:fixed;z-index:1055;margin:5px}.top-right{top:0;right:0}.top-left{top:0;left:0}.bottom-right{right:0;bottom:0}.bottom-left{left:0;bottom:0}.toast-container>.toast{min-width:150px;background:0 0;border:none}.toast-container>.toast>.toast-header{border:none}.toast-container>.toast>.toast-header strong{padding-right:20px}.toast-container>.toast>.toast-body{background:#fff}