aesir inventory

walkers

HTML

<div id="inventory">
		<div class="wd-bar">Inventory<div class="fr" style="margin-top:-3px">x</div></div>
		<div class="content">
			<div class="tabs">
				<div>Usable</div><div>Equip</div><div>Etc</div>
			</div>
			<center>
				<div class="items" ondragstart="return false;">
					<img src="https://file5s.ratemyserver.net/items/small/602.gif"/>
					<img src="https://file5s.ratemyserver.net/items/small/6279.gif"/>
					<img src="https://file5s.ratemyserver.net/items/small/512.gif"/>
					<img src="https://file5s.ratemyserver.net/items/small/512.gif"/>
					<img src="https://file5s.ratemyserver.net/items/small/512.gif"/>
					<img src="https://file5s.ratemyserver.net/items/small/512.gif"/>
					<img src="https://file5s.ratemyserver.net/items/small/512.gif"/>
					<img src="https://file5s.ratemyserver.net/items/small/512.gif"/>
					<img src="https://file5s.ratemyserver.net/items/small/512.gif"/>
					<img src="https://file5s.ratemyserver.net/items/small/512.gif"/>
					<img src="https://file5s.ratemyserver.net/items/small/512.gif"/>
					<img src="https://file5s.ratemyserver.net/items/small/512.gif"/>
					<img src="https://file5s.ratemyserver.net/items/small/512.gif"/>
					<img src="https://file5s.ratemyserver.net/items/small/512.gif"/>
					<img src="https://file5s.ratemyserver.net/items/small/512.gif"/>
					<img src="https://file5s.ratemyserver.net/items/small/512.gif"/>
				</div>
			</center>
			<div class="wd-status">
				<div class="status-text">Capacity: 16/300</div>
				<div class="fr" style="margin:-10px -5px 0 0;transform:rotateZ(45deg)">░</div></div>
		</div>
	</div>

CSS

* {
		  box-sizing: border-box;
		}

		#inventory {
		  cursor: default;
		  user-select: none;
		  width: 300px;
		  background: #2d2d2d;
		  color: white;
		  font-family: Tahoma;
		  border: 2px solid #414141;
		}

		.wd-bar {
		  background: #282828;
		  padding: 10px 10px;
		  font-size: 12px;
		}

		.tabs {
		  margin: 5px;
		}

		.tabs div {
		  cursor: pointer;
		  font-size: 12px;
		  display: inline-block;
		  border: 1px solid #373737;
		  background: #323232;
		  padding: 2px 6px;
		}

		.tabs div:hover {
		  background: #373737;
		}

		.items img {
		  width: 32px;
		  height: 32px;
		  padding: 2px;
		}

		.items img:hover {
		  background: #282828;
		  border: 2px solid #282828;
		}

		.wd-status .status-text {
		  font-size: 11px;
		  padding: 3px 6px;
		}

		.fr {
		  float: right;
		}