JSFiddle - React, Tailwind, and code Playground

by Tuan Truong

HTML

<div class="order-book">
  <div class="order-book__header">
    <div>CPO ORDER BOOK</div>
    <div>CRN ORDER BOOK</div>
  </div>

  <div class="order-book__panel"></div>
  <div class="order-book__panel">CPO OFFERS</div>
  <div class="order-book__panel"></div>
  <div class="order-book__panel">CRN OFFERS
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. A dolor dolorem culpa magni nostrum! Sapiente aspernatur nemo at laboriosam, officia minus modi excepturi recusandae labore! Esse magni aperiam minima asperiores earum, ex doloremque velit? Delectus, provident laboriosam minima, aliquam quas commodi recusandae ab, distinctio error facere animi. Maxime voluptas beatae eveniet, officia veritatis commodi. Ipsa dolorem, reiciendis ut non ducimus voluptates similique vero culpa quod quia itaque voluptatum sint fuga cupiditate a, dicta maxime velit neque voluptatibus consequuntur alias quibusdam deserunt vitae. Magni temporibus velit vel nesciunt dolor assumenda eos doloremque optio iure libero ad sunt earum perferendis, obcaecati exercitationem.</div>
  <div class="order-book__panel">CPO BIDS</div>
  <div class="order-book__panel"></div>
  <div class="order-book__panel">CRN BIDS</div>
  <div class="order-book__panel"></div>
</div>

SCSS

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.order-book {
  width: 800px;
  display: grid;
  grid-gap: 16px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 50px auto;
  grid-template-areas: 
  'header header header header'
  '. . cpo-orders cpo-orders'
  'cpo-bids cpo-bids . .';
  position: relative;
  
  &__header {
    grid-area: header;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 16px;
    
    > div {
      background: #eee;
    }
  }
  
  &__market-divider {
    postion: absolute;
    background: red;
    left: 0;
    right: 0;
    height: 1px;
  }
  
  &__divider {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: red;
  }
  
  &__panel {
    min-height: 200px;
    background: #eee;
  }
}

JavaScript

const cpoOrders = [
  {
  	premium: Math.floor(Math.random() * 100),
    face: Math.floor(Math.random() * 100)
  }, 
  {
  	premium: Math.floor(Math.random() * 100),
    face: Math.floor(Math.random() * 1000)
  }, 
  {
  	premium: Math.floor(Math.random() * 100),
    face: Math.floor(Math.random() * 1000)
  }, 
  {
  	premium: Math.floor(Math.random() * 100),
    face: Math.floor(Math.random() * 1000)
  },
]

const cpoBids = [
  {
  	premium: Math.floor(Math.random() * 100),
    face: Math.floor(Math.random() * 100)
  }, 
  {
  	premium: Math.floor(Math.random() * 100),
    face: Math.floor(Math.random() * 1000)
  },
]