JSFiddle - React, Tailwind, and code Playground

by Posandu Mapa

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"> 
  <div class="sidebar">
		<button class="new-btn">
			<span class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path fill="#34A853" d="M16 16v14h4V20z"/><path fill="#4285F4" d="M30 16H20l-4 4h14z"/><path fill="#FBBC05" d="M6 16v4h10l4-4z"/><path fill="#EA4335" d="M20 16V6h-4v14z"/><path fill="none" d="M0 0h36v36H0z"/></svg></span>
			<span class="name">New</span>
		</button>

		<div class="items">
			<a class="item active">
				<span class="icon"><svg width="24px" height="24px" viewBox="0 0 24 24" fill="#000000" focusable="false"><path d="M19 2H5C3.9 2 3 2.9 3 4V20C3 21.1 3.9 22 5 22H19C20.1 22 21 21.1 21 20V4C21 2.9 20.1 2 19 2ZM19 20H5V19H19V20ZM19 17H5V4H19V17Z"></path><path d="M13.1215 6H10.8785C10.5514 6 10.271 6.18692 10.0841 6.46729L7.14019 11.6075C7 11.8878 7 12.215 7.14019 12.4953L8.26168 14.4579C8.40187 14.7383 8.72897 14.9252 9.05608 14.9252H15.0374C15.3645 14.9252 15.6449 14.7383 15.8318 14.4579L16.9533 12.4953C17.0935 12.215 17.0935 11.8878 16.9533 11.6075L13.9159 6.46729C13.7757 6.18692 13.4486 6 13.1215 6ZM10.1776 12.0748L12.0467 8.8972L13.8692 12.0748H10.1776Z"></path></svg></span>
				<span class="name">My Drive</span>
			</a>
			<a class="item">
				<span class="icon"><svg width="24px" height="24px" viewBox="0 0 24 24" fill="#000000" focusable="false"><path d="M0 0h24v24H0z" fill="none"></path><path d="M4 6h18V4H4c-1.1 0-2 .9-2 2v11H0v3h14v-3H4V6zm19 2h-6c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-1 9h-4v-7h4v7z"></path></svg></span>
				<span class="name">Computers</span>
			</a>
			<a class="item">
				<span class="icon"><svg width="24px" height="24px" viewBox="0 0 24 24" fill="#000000" focusable="false"><path d="M0...

CSS

*,
:before,
:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: inherit;
}
body {
    font-family: "Roboto", sans-serif;
}
.sidebar {
    user-select: none;
    max-width: 20rem;
    border-right: 1px solid #eaeaea;
    height: 100vh;
    overflow: hidden;
}

.new-btn {
    display: flex;
    align-items: center;
    margin-left: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302), 0 1px 3px 1px rgba(60, 64, 67, 0.149);
    border: none;
    background: white;
    padding: 5px 16px;
    border-radius: 100px;
    transition: all 0.2s ease;
    cursor: pointer;
}
.new-btn * {
    pointer-events: none;
}
.new-btn:hover {
    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.302), 0 4px 8px 3px rgba(60, 64, 67, 0.149);
    background: #f8f9fa;
}
.new-btn:focus {
    background-color: #f8f9fa;
}
.new-btn:active {
    background-color: #e8f0fe;
}
.new-btn .icon {
    margin-right: 10px;
}
.new-btn .name {
    font-size: 14px;
    font-weight: 500;
    margin-right: 9px;
    color: #3c4043;
}
.items {
    display: block;
    max-height: 54vh;
    overflow: auto;
    margin-top: 10px;
}

.item {
    display: flex;
    align-items: center;
    padding: 6px 26px;
    background: white;
    border-radius: 0px 100px 100px 0px;
    cursor: pointer;
    transition: all 0.041s ease;
    justify-content: flex-start;
}
.item.active {
    background: #e8f0fe;
}
.item.active .name {
    color: #226ed4;
}
.item.active .icon svg {
    fill: #226ed4;
}
.item .name {
    font-weight: 600;
    font-size: 13px;
    margin-left: 20px;
    color: #5f6368;
}
.item * {
    pointer-events: none;
}
.item .icon svg {
    fill: #5f6368;
}
.item:not(.active):hover {
    background: rgba(0, 0, 0, 0.04);
}
.divider {
    background: #dadce0;
    width: 100%;
    height: 1px;
    margin-top: 6px;
    margin-bottom: 2px;
}

.bottom {
    padding-left: 24px;
    padding-right: 40px;
    overflow: hidden;
    margin-top:...