JSFiddle - React, Tailwind, and code Playground

by rwachtler

HTML

<div class="toolbar">
    <div class="button">
        <img src="/img/logo-white.png" />
    </div>
    <div class="button">
        <img src="/img/logo-white.png" />
    </div>
    <div class="button">
        <img src="/img/logo-white.png" />
    </div>
    <div class="button">
        <img src="/img/logo-white.png" />
    </div>
</div>

CSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html {
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  font-size: 14px;
}

body {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.toolbar {
    position: relative;
    width: 100%;
    height: 25px;
    padding: 2px;
    
    background-color: #e2e2e2;
    border-bottom: 1px solid #b6b6b6;
    
}

.button {
  display: inline-block;
  position: relative;
  padding: 5px;
  height: 100%;
  
  text-align: left;
  border: 1px outset black;
  border-radius: 3px;
}

.button>img {
    height: 100%;
}