videocomp.js

<div class="relative max-w-sm rounded overflow-hidden shadow-lg mx-auto my-8">
  <div>
  <span class="left-0 top-0 text-red-700 absolute">Live</span>
  <span class=" right-0 bottom-0 flex w-2/3 absolute">
    <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
      
      <div class="relative">
        <select class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-state">
          <option value={0}>Auto</option>
              <option value={128}>128 kbit</option>
              <option value={256}>256 kbit</option>
              <option value={512}>512 kbit</option>
              <option value={1000}>1 mbit</option>
              <option value={1500}>1.5 mbit</option>
              <option value={2000}>2 mbit</option>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
        </div>
      </div>
    </div>
    <button class="bg-blue-500 w-full md:w-1/2 hover:bg-blue-700 text-white font-semibold hover:text-white py-2 px-4 border border-blue-500  hover:border-transparent rounded">
  Stop
</button></span>
    </div>
  
  <video class="w-full" src="http://media.w3.org/2010/05/sintel/trailer.mp4" alt="Sunset in the mountains" autoplay muted />
  
</div>