Streamlabs Chatbox

index.html

<script src="https://cdn.tailwindcss.com"></script>

		<!-- item will be appened to this layout -->
		<div>
			<div id="log" class="sl__chat__layout"></div>
		</div>

		<!-- chat item -->
		<script type="text/template" id="chatlist_item">
     <div class="messagebox" data-from="{from}" data-id="{messageId}">
			  <div id="meta" class="flex flex-row items-center gap-3">
			      <span id="name" class="max-w-max rounded-full px-3 py-2 border-[2px] border-[#161616] bg-[rgb(43,43,43)] text-[#fff] overflow-x-hidden truncate">{from}</span>
			      <span id="badge" class="flex flex-row gap-2">
            </span>
			  </div>
			  <div class="max-w-max flex flex-row">
			    <div id="line" class="shrink-0"></div>
			    <div class="flex-grow overflow-hidden ml-2 mb-2 mt-[calc(0.5rem_-_1.5rem)] rounded-xl border-[2px] border-[#141414] bg-[rgba(255,255,255,1)] px-2 pb-2 pt-7 text-[#222724]">
			      <div class="flex flex-row items-start rounded-md border-2 border-dashed border-t-gray-600 border-r-gray-400 border-b-gray-400">
			        <span class="w-7 shrink-0 border-t-2 mt-5 border-dashed border-gray-400"></span>
			        <p id="message" class="flex-grow overflow-hidden break-words rounded-md m-2 text-[#000000] antialiased break-normal">{message}</p>
			      </div>
			    </div>
			  </div>
			</div>
		</script>
		<script type="text/template" id="badge_item">
			<span>{type}</span>
		</script>

style.css

@import url("https://fonts.googleapis.com/css2?family=Dongle:wght@family=Dongle:wght@300;400;700&family=JetBrains+Mono:wght@100;300;400;500;600;800&family=Nunito:wght@400;500&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
	--dongle-family: "Dongle", sans-serif;
	--jetbrain-family: "JetBrains Mono", monospace;
	--nunito-family: "Nunito", sans-serif;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
* {
	margin: 0;
}
html,
body {
	height: 100%;
  width: 100%;
	overflow: hidden !important;
  color: #fff;
  padding: 0.3rem 1rem;
	font-family: var(--roboto-family);
	font-size: 12px;
}
body {
	line-height: 1.5;
}
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}
input,
button,
textarea,
select {
	font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

.colon {
	display: none;
}

#log {
	margin: 0 auto;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
#log > div {
	animation-duration: 500ms;
	animation: scrollIn 2s ease-out;
}
#log > div {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

#log > div.deleted {
	visibility: hidden;
}
#log > div:last-child #line {
	border-left: none;
	margin-left: 0;
}
#meta {
	z-index: 1;
	position: relative;
	top: 1px;
}
#name {
	font-family: var(--nunito-family);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
}

#badge > span {
  color: #fff;
  border-radius: 9999px;
  background-color: #161616;
  padding: 0.3rem 1rem;
	font-family: var(--roboto-family);
	font-size: 12px;
	font-weight: 600;
	text-transform: lowercase;
}

#line {
  display: block;
	position: relative;
	content: " ";
	width: 0.5rem;
	border-left: 2px solid #161616;
	margin-left: 1.5rem;
}

#message {
	font-family: var(--jetbrain-family);
	font-size: 16px;
}

@keyframes scrollIn {
	from {
		max-height: 0vh;
	}
	to {
		max-height: 100vh;
	}
}