JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<div class="app-container chat dark">
	<div class="sidebar-wrapper">
		<div class="sidebar">
			<div class="sidebar-content">
				<div class="sidebar-header">
					<div class="twitch-logo" onClick="toggleSidebar()">
          
						<svg class="tw-svg__asset tw-svg__asset--logotwitch tw-svg__asset--inherit" width="94px" height="32px" version="1.1" viewBox="0 0 94 32" x="0px" y="0px"><path clip-rule="evenodd" d="M88,5h-6V0h-9l-6,5h-5.5L59,7.5V5h-5V0H36v5H16l-5-5H0v22l5,5.25L14,32h6v-1.5l3,1.5h12l2-3l1,3h7v-3l3,3h8l0.5-3l2.5,3h10l3-3v3h4l3-3v3h7l7-6V10L88,5z M13,13H8v6h5v6H6l-4-4V2h6v5h5V13z M36,21.5L32.5,25H15V7h6v12h2V7h6v12h2V7h5V21.5z M44,25h-6V7h6V25z M44,5h-6V2h6V5z M57,13h-5v6h5v6h-7l-4-4V2h6v5h5V13z M72,13h-7v6h7v6h-9l-4-4V11l4-4h9V13z M91,25h-6V13h-5v12h-6V2h6v5h7l4,4V25z" fill-rule="evenodd"></path></svg>
					</div>
					<div class="search-bar">
						<input type="text" placeholder="Search to Add Friends" />
						<i class="material-icons">search</i>
					</div>
				</div>
				<div class="sidebar-group">
					<div class="sidebar-group-header">
						<div>Followed Channels</div>
						<a class="view-all">View All</a>
					</div>
					<a class="channel-link">
						<div class="channel-image">
							<img src="https://pics.paypal.com/00/s/MjAwWDIwMFhQTkc/p/Zjg4MWQxZWEtOWY4Ni00MWMzLTkwMWEtOWFlMDA5NmQyZWRj/image_58.jpg">
						</div>
						<div class="channel-info">
							<div class="channel-name">little_emo_kitten</div>
							<div class="channel-status">
								<div>Crusader Kings II</div>
								<div>107 watching</div>
							</div>
						</div>
					</a>
					<a class="channel-link">
						<div class="channel-image">
							<img src="https://pics.paypal.com/00/s/MjAwWDIwMFhQTkc/p/Zjg4MWQxZWEtOWY4Ni00MWMzLTkwMWEtOWFlMDA5NmQyZWRj/image_58.jpg">
						</div>
						<div class="channel-info">
							<div class="channel-name">StoneZoneGaming</div>
							<div class="channel-status">
								<div>Skyrim</div>
								<div>121...

SCSS

@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i");
@import url('https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900');

*,
*:before,
*:after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--theme-color: white;

	--primary-color: #6441a4;
	--primary-color-darker: #3e1b7e;
	--primary-color-brighter: #a481e4;
	--primary-color-low-opacity: #6441a466;

	--compliment-color: #eceff1;
	--compliment-color-darker: #d3d6d8;
	--compliment-color-brighter: #f9fcfe;

	--accent-color: #17141f;
	--accent-color-darker: #0a0712;
	--accent-color-brighter: #3d3a45;
}

$font-family: 'Work Sans', sans-serif;

::-moz-selection { background: var(--primary-color-low-opacity); }
::selection { background: var(--primary-color-low-opacity); }

body {
	&::-webkit-scrollbar {
		display: none;
	}
}

button {
	font-family: $font-family;
}

.header {
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
	height: 60px;
	display: flex;
	line-height: 1;
	padding: 0 15px;
	position: fixed;
	align-items: center;
	background-color: var(--theme-color);
	justify-content: space-between;
	border-bottom: solid 1px rgba(255, 255, 255, 0.1);
	transition: all 0.2s ease-in;

	@media (max-width: 600px) {
		.desktop-search {
			display: none;
		}

		.mobile-search {
			display: flex;

			.dropdown-content {
				width: 100vw;
				left: 0;
				right: 0;
				top: 50px;
				position: fixed;
				z-index: 1;

				input {
					border: none;
				}
			}
		}
	}

	@media (min-width: 601px) {
		.desktop-search {
			display: flex;
		}

		.mobile-search {
			display: none;
		}
	}

	.logo-wrapper {
		flex: 1;
		display: flex;
		align-items: center;

		.sidebar-toggle {
			padding: 5px;
			margin-left: -5px;
			margin-right: 10px;
			color: var(--accent-color);
			border: solid 1px transparent;
			transition: all 0.2s ease-in;

			&:hover {
				cursor:...

JavaScript

const users = [
  {
    "id": "bathsauce1",
    "color": "rgb(95, 158, 160)"
  },
  {
    "id": "DyingNewbee",
    "color": "rgb(255, 0, 0)"
  },
  {
    "id": "LexG0D",
    "color": "rgb(255, 0, 0)"
  },
  {
    "id": "125kilo",
    "color": "rgb(255, 0, 0)"
  },
  {
    "id": "kgb123",
    "color": "rgb(210, 105, 30)"
  },
  {
    "id": "jersys8",
    "color": "rgb(23, 186, 188)"
  },
  {
    "id": "EvilTVirus",
    "color": "rgb(95, 158, 160)"
  },
  {
    "id": "yoyo90",
    "color": "rgb(219, 74, 63)"
  },
  {
    "id": "Muntley",
    "color": "rgb(255, 105, 180)"
  },
  {
    "id": "huebsch",
    "color": "rgb(46, 139, 87)"
  },
  {
    "id": "nos003",
    "color": "rgb(180, 84, 255)"
  },
  {
    "id": "ChefDaddy",
    "color": "rgb(255, 127, 80)"
  },
  {
    "id": "daddybigmeat",
    "color": "rgb(139, 88, 255)"
  },
  {
    "id": "BadDragon777",
    "color": "rgb(72, 170, 233)"
  },
  {
    "id": "AngelAngle",
    "color": "rgb(30, 144, 255)"
  },
  {
    "id": "coffeeShop480",
    "color": "rgb(0, 255, 127)"
  },
  {
    "id": "donkeyst",
    "color": "rgb(255, 127, 80)"
  },
  {
    "id": "wolfe",
    "color": "rgb(219, 74, 63)"
  },
  {
    "id": "lambert",
    "color": "rgb(180, 84, 255)"
  },
  {
    "id": "prade19",
    "color": "rgb(255, 0, 0)"
  },
  {
    "id": "Limhmm",
    "color": "rgb(180, 84, 255)"
  },
  {
    "id": "ace_ventura16",
    "color": "rgb(255, 105, 180)"
  },
  {
    "id": "Lew332",
    "color": "rgb(30, 144, 255)"
  },
  {
    "id": "piglover334",
    "color": "rgb(219, 74, 63)"
  },
  {
    "id": "chrisbreezes95",
    "color": "rgb(219, 74, 63)"
  },
  {
    "id": "johnblaze32",
    "color": "rgb(219, 74, 63)"
  },
  {
    "id": "SpyroCrash",
    "color": "rgb(218, 139, 139)"
  },
  {
    "id": "eno_j",
    "color": "rgb(255, 0, 0)"
  },
  {
    "id": "ShaunOfTheDead",
    "color": "rgb(255, 105, 180)"
  },
  {
    "id": "redditor69",
    "color": "rgb(255, 127, 80)"
  },
  {
    "id": "LaraCroft44",
    "color": "rgb(255,...