<div class="colors">
		<div class="rect color-1"></div>
       <i class="fa fa-plus" aria-hidden="true"></i>
     <div class="rect color-2"></div>
      <i class="fa fa-arrow-right" aria-hidden="true"></i>
    <div class="rect color-mix"></div>
</div>
<script src="https://use.fontawesome.com/749e954855.js"></script>
@color-1: rgba(0, 211, 235, 0.9);
@color-2: rgba(117, 235, 0, 0.5);
@color-mix: mix(@color-1, @color-2, 60%);

.colors {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  margin: 20px;

  i {
    color: #8c8c8c;
  }
  .rect {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    margin: 10px;
    
    &.color-1 {
      background: @color-1;
    }
    
    &.color-2 {
      background: @color-2;
    }
    
    &.color-mix {
      background: @color-mix;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.