JSFiddle - React, Tailwind, and code Playground

by malasngoding

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">

		<center>
			<h3>Tutorial Toasts Dengan Bootstrap 4</h3>
			<h4><a href="https://www.malasngoding.com/toasts-bootstrap-4/">www.malasngoding.com</a></h4>
		</center>
		

		<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-animation="true" data-delay="5000" data-autohide="false">
			<div class="toast-header">
				<span class="rounded mr-2 bg-primary" style="width: 15px;height: 15px"></span>

				<strong class="mr-auto">Notifikasi</strong>
				<small>1 menit yang lalu</small>
				<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="toast-body">
				Halo, ini pesan notifikasi toast.
				<br/>
				www.malasngoding.com
			</div>
		</div>

		<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-animation="true" data-delay="2000" data-autohide="true">
			<div class="toast-header">
				<span class="rounded mr-2 bg-primary" style="width: 15px;height: 15px"></span>

				<strong class="mr-auto">Notifikasi</strong>
				<small>1 menit yang lalu</small>
				<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="toast-body">
				Halo, ini pesan notifikasi toast.
				<br/>
				www.malasngoding.com
			</div>
		</div>


		<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-animation="true" data-delay="3000" data-autohide="true">
			<div class="toast-header">
				<span class="rounded mr-2 bg-primary" style="width: 15px;height:...

JavaScript

$('.toast').toast('show');