JSFiddle - React, Tailwind, and code Playground

by djmartini

HTML

<div id="ext__wrapper">
		<div id="ext__timer">
      <div id="ext__label">Кнопка нажата:</div>
      <span id="ext__hours">00</span>
      <span>час</span>
      <span id="ext__minutes">00</span>
      <span>мин</span>
    </div>
    <div id="ext__settings">
      <div id="ext__settings-title">Настройки</div>
      <label id="ext__settings-timer">Таймер: <input type="time"/>
        <span>через сколько отжать кнопку</span>
      </label>
      <label>Всего на портале за сегодня:  <span id="ext__all_hours">00</span>
      <span>час</span>
      <span id="ext__all_minutes">00</span>
      <span>мин</span>
      </label>
      
      <div class="chart-wrap">
        <div class="grid horizontal">
        <div class="bar" style="--bar-value:100%;" title="Your Blog 100%"></div>
        <div class="bar2" style="--bar-value:45%;" title="Your Blog 45%"></div>
        </div>
      </div>
    </div>
</div>

CSS

#ext__wrapper * {
  box-sizing: border-box; 
  font-family: Trebuchet MC, sans-serif;
}
#ext__wrapper {
		background: #EBECED;
		display: block;
		width: 300px;
		min-height: 30px;
		font-size: 12px;
		box-sizing: border-box; 
		font-weight: 600;
		border: 1px solid #b9b28f; 
		border-top: none;
    float: left;
	} 
  #ext__timer {
     background: #E6DFBC;
     margin-bottom: 0;
     border-bottom: 1px solid #b9b28f;
  }
  #ext__timer,
  #ext__settings,
  #ext__settings-title {
    width: 100%;
    float: left;
    padding: 8px;
 
  }
  #ext__settings-title {
    padding: 0;
    text-transform: uppercase;
    font-size: 10px;
    margin-bottom: 8px;
  }
  #ext__settings #ext__settings-timer span {
    font-size: 10px;
    margin-left: 10px; 
  }
  #ext__settings label {
    margin-bottom: 8px;
    display: block;
    font-family: Trebuchet MC, sans-serif;
  }
	#ext__wrapper div {
		float: left;
	} 
	#ext__label {
		padding-right: 10px;
	}
  
#ext__wrapper .chart-wrap,
#ext__wrapper .chart-wrap * {
    float: initial !important;
}  
#ext__wrapper .grid .bar,
#ext__wrapper .grid .bar2 {
  background-color: #e8a700;
  width: 10px;
  height: var(--bar-value);
  align-self: flex-end;
  margin: 0 auto;
  border-radius: 3px 3px 0 0;
  position: relative;
}

#ext__wrapper .grid.horizontal {
  flex-direction: column;
  border-bottom: none;
  position: relative;
}
#ext__wrapper .grid.horizontal .bar,
#ext__wrapper .grid.horizontal .bar2 {
  height: 10px;
  width: var(--bar-value);
  align-self: flex-start;
  margin: auto 0 auto 0;
  border-radius: 0 3px 3px 0;
}


#ext__wrapper .grid .bar2 {
  background-color: #28a745;
}
#ext__wrapper .grid .bar2.bar2:hover {
  opacity: 0.7;
}

#ext__wrapper .grid.horizontal .bar2 {
  position: absolute;
  top: 0;
  left: 0;
}