CaveOps | Snippets: Live Front-end Editor

:root {
    --gradient: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
 }
 *, *::before, *::after {
    outline: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html, body {
    height: 100vh;
    width: 100vw; 
    font-family: Arial, Verdana, Helvetica, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New, Brush Script MT, monospace, cursive, serif, sans-serif;
    font-size: 20px;
    color: white;
    line-height: 1.2;
}
.container {
	width: 100%;
	min-height: 100%;
	background: var(--gradient);
    color: white;
	font-size: 1rem;
    padding: 20px;
	display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    overflow-y: scroll;
}
@media screen and (max-width: 640px) {
	.container {
		font-size: .6rem;
	}
}

CSS Before Head

<!-- BootStrap 5.1.3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

HTML Head

html, body {
    color: white;
}
.alert-wrapper {
    position: fixed;
    right: 20px;
    top: 20px;
}

CSS After Head

// JavaScript before body

JS Before HTML Body

<div class="container" id="container">
    <h1 id="title">Hello, World!</h1>
    <a class="btn btn-success" id="toggler">Try me</a>
    <div class="alert-wrapper" id="alert-wrapper"></div>
</div>

HTML Body

<!-- BootStrap 5.1.3 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

HTML Foot

var alertWrapper = document.getElementById('alert-wrapper')
var alertTrigger = document.getElementById('toggler')

function alert(message, type) {
  var wrapper = document.createElement('div')
  wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

  alertWrapper.append(wrapper)
}

if (alertTrigger) {
  alertTrigger.addEventListener('click', function () {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

JS After HTML Body