Equipment Drag Rectangles

by peterjc

HTML

<div class="container">
  <div class="title">
    Drill 001
  </div>
   <div class="section">
     <div class="section-header">Plan</div>
       <div>locationA.ln3</div>
       <div>locationB.ln3</div>
       <div>locationC.ln3</div>     
     </div>
   <div class="section" >
     <div class="section-header">Design</div>
       
    </div>   
    <div class="section" >
     <div class="section-header">Surface</div>
       
    </div>   
      
   <div class='footer'></div>
</div>

CSS

body{
  font-family: "Arial";
  font-size: 10pt;  
}

.container{
  background-color:#0D47A1;
  width: 200px;
  border-radius: 15px;
}

.section{
  padding: 5px;
  border-radius: 15px;
  margin: 10px;
  margin-bottom: 10px;
  min-height: 50px;
  background-color:#E3F2FD

}

.footer{
  height: 10px;
}

.title{
  padding: 10px;
  height: 5px;  
  font-size: 10pt;
  font-weight: bold;
  color: white;
}


.section-header{
  padding-bottom: 5px;
  font-weight: bold;
  
}