JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <div class="row pt-3">
  
    <div class="col-8">

      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal text-left text-uppercase">Video Player</h4>
        </div>
        <div class="card-body">
          <div class="embed-responsive embed-responsive-16by9">
            <iframe src="https://player.vimeo.com/video/12345567895?autoplay=1&loop=1&autopause=0" class="embed-responsive-item" allow="autoplay; fullscreen" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen autoplay></iframe>
          </div>
        </div>
      </div>

      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal text-left text-uppercase">Video Player</h4>
        </div>
        <div class="card-body">
          <div class="embed-responsive embed-responsive-16by9">
            <iframe src="https://player.vimeo.com/video/12345567896?autoplay=1&loop=1&autopause=0" width="100%" class="embed-responsive-item" allow="autoplay; fullscreen" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen autoplay></iframe>
          </div>
        </div>
      </div>
     
    </div>

    <div class="col-4">
    
      <div id="chat" class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal text-left text-uppercase">Chat Items</h4>
        </div>
        <div class="card-body p-0" id="chatItems">
          <ul class="list-group">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi...

CSS

#chat {
  min-height: 300px;
  height: calc(100% - 1.5rem);
}

#chat .card-body {
  overflow: hidden;
  position: relative;
}

#chat .card-body .list-group {
  top: -1px;
  right: -1px;
  left: -1px;
  bottom: -1px;
  font-size: 80%;
  position: absolute;
  overflow-x: scroll;
}

#chat .card-body .list-group-item:first-child,
#chat .card-body .list-group-item:last-child {
  border-radius: 0 !important;
}