JSFiddle - React, Tailwind, and code Playground

by michananya

HTML

<div class= warpper>
  <div class="list">
      <div class="item">
          <div class="checkbox"><span></span></div>
          <div>
            <div class="row-1">L0012384</div>
            <div class="row-2">James Patrick</div>
            <div class="row-3">12 Angry Men Medical Center</div>          
          </div>
      </div>

      <div class="item">
          <div class="checkbox"><span></span></div>
          <div>
            <div class="row-1">L0012384</div>
            <div class="row-2">James Patrick</div>
            <div class="row-3">12 Angry Men Medical Center</div>          
          </div>
      </div>
      
      <div class="item">
          <div class="checkbox"><span></span></div>
          <div>
            <div class="row-1">L0012384</div>
            <div class="row-2">James Patrick</div>
            <div class="row-3">12 Angry Men Medical Center</div>          
          </div>
      </div>
      
      <div class="item">
          <div class="checkbox"><span></span></div>
          <div>
            <div class="row-1">L0012384</div>
            <div class="row-2">James Patrick</div>
            <div class="row-3">12 Angry Men Medical Center</div>          
          </div>
      </div>
      
      <div class="item">
          <div class="checkbox"><span></span></div>
          <div>
            <div class="row-1">L0012384</div>
            <div class="row-2">James Patrick</div>
            <div class="row-3">12 Angry Men Medical Center</div>          
          </div>
      </div>
      
      <div class="item">
          <div class="checkbox"><span></span></div>
          <div>
            <div class="row-1">L0012384</div>
            <div class="row-2">James Patrick</div>
            <div class="row-3">12 Angry Men Medical Center</div>          
          </div>
      </div>
      
      <div class="item">
          <div class="checkbox"><span></span></div>
          <div>
            <div class="row-1">L0012384</div>
          ...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 400;  
    margin: 0;
}
.warpper {
  display: flex;
}

.list {
  font-size: 14px;
  width: 25%;
  max-width: 400px;
  border-top: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  height: 100vh;
  overflow: auto;
}
@media only screen and (max-width: 1280px) {
  .list {
    font-size: 13px;
    }
}
@media only screen and (max-width: 960px) {
  .list {
    display: none;
    }
}
.single-item    {
  padding: 0.8em
}
.item {
  border-bottom: 1px solid #dddddd;
  padding: 0.8em;
  display: flex;
  
}

.checkbox > span {
  display: block;
  Width: 16px;
  height: 16px;
  border: 2px solid #666666;
  box-sizing: border-box;
  border-radius: 2px;
  margin-right: 0.8em;
  margin-top: 0.2em;
}
.row-1{
  font-size: 1.15em;
  font-weight: 600;
  padding-bottom: 0.2em

}
.row-2{
  padding-bottom: 0.4em

}