JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<opportunity-matrix class="opportunity-matrix">
  <div class="container">
    <div class="left-panel">
      <div class="group">
        <div class="group-header-row"></div>
        <div class="header-row">
          <div class="priority-header-cell">Priority</div>
          <div class="drag-handle-header-cell"></div>
          <div class="story-header-cell"></div>
        </div>
        <div class="rows">
          <div class="priority-column"></div>
          <div class="story-list"></div>
        </div>
      </div>
    </div>
    <div class="right-panel">
      <div class="group brand-initiated-group">
        <div class="group-header-row">Brand Initiated</div>
        <div class="header-row">
          <div class="matrix-header-cell">Converted Opportunity</div>
          <div class="matrix-header-cell">Missed Opportunity</div>
        </div>
        <div class="rows">
          <div class="matrix-cell"></div>
          <div class="matrix-cell"></div>
        </div>
      </div>
      <div class="group customer-initiated-group">
        <div class="group-header-row">Customer Initiated</div>
        <div class="header-row">
          <div class="matrix-header-cell">Visits Homepage</div>
          <div class="matrix-header-cell">Visit Web Welcome</div>
          <div class="matrix-header-cell">Visit App Welcome</div>
        </div>
        <div class="rows">
          <div class="matrix-cell"></div>
          <div class="matrix-cell"></div>
          <div class="matrix-cell"></div>
        </div>
      </div>
    </div>
  </div>  
  <div class="add-new-story">Click here to add a new story</div>
</opportunity-matrix>

CSS

html, body {
  padding: 0;
  margin :0;
  height: 100%;
}

.opportunity-matrix {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-top: 1px solid #ddd;
  box-sizing: border-box;
}

.group-header-row {
  height: 27px;
  background-color: #fafafa;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  box-sizing: border-box;
}

.container {
  display: flex;  
}

.left-panel {
  flex: 0 0 auto;
  overflow: hidden;
}

.right-panel {
  flex: 1 1 100%;
  overflow: auto;
  
  display: flex;
}

.matrix-header-cell {
  height: 47px;
  width: 200px;
  background-color: #ddd;
}

.matrix-cell {
  height: 47px;
  width: 200px;
}