JSFiddle - React, Tailwind, and code Playground

by sbaydakov

HTML

<div id="player-container">
  <div class="video-player-controls">
    <button class="control-button">Play</button>
    <button class="control-button">Pause</button>
    <div class="progress-bar-container">
      <div class="progress-bar"></div>
    </div>
    <button class="control-button">More Info</button>
    <button class="control-button">Watch From Start</button>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

html, body {
	background-color: #888888;
}

#player-container {
  width: 100%;
  padding-left: 5rem; /* Placement for outside elements such as Global Nav callout */
}

.video-player-controls {
  display: flex;
  align-items: center;
}

.control-button {
  margin-right: 1rem;
  min-width: 3rem;
}

.progress-bar-container {
  flex: 1 0 5rem;
  height: 1rem;
  background-color: #ccc; /* Progress bar container background color */
  margin-right: 1rem;
}

.progress-bar {
  height: 100%;
  background-color: #007bff; /* Progress bar color */
  width: 50%; /* Initial width of progress bar */
  /* Additional styling for progress bar */
}