JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jslib-dotcloud-labs.dotcloud.com/dotcloud-require.js"></script>
<div class="dotcloud">
  <div class="O o1"></div>
  <div class="O o2"></div>
  <div class="O o3"></div>
  <div class="O o4"></div>
  <div class="O o5"></div>
  <div class="O o6"></div>
  <div class="O o7"></div>

  <div class="o o1"></div>
  <div class="o o2"></div>
  <div class="o o3"></div>
  <div class="o o4"></div>
  <div class="o o5"></div>
  <div class="o o6"></div>
  <div class="o o7"></div>

  <div class="d d1"></div>
  <div class="d d2"></div>
  <div class="d d3"></div>
  <div class="d d4"></div>
</div>

<img src="http://www.testapp.dotcloud.com/static/dotcloud.png" />

CSS

.dotcloud {
  position: absolute;
  top: 0;
  left: 0;
}

.dotcloud .O {
  position: absolute;
  z-index: 1;
  border-radius: 10000px;
  background-color: #566aff;
  width: 120px;
  height: 120px;
}

.dotcloud .o {
  position: absolute;
  z-index: 2;
  border-radius: 10000px;
  border: 15px solid white;
  width: 50px;
  height: 50px;
  margin: 21px;
  background-color: #566aff;
  display: inline-block;
}

.dotcloud .o1 { top: 0; left: 66px; }
.dotcloud .o2 { top: 0; left: 196px; }

.dotcloud .o3 { top: 64px; left: 0; }
.dotcloud .o4 { top: 64px; left: 130px; }
.dotcloud .o5 { top: 64px; left: 260px; }

.dotcloud .o6 { top: 128px; left: 66px; }
.dotcloud .o7 { top: 128px; left: 196px; }

.dotcloud .d {
  position: absolute;
  z-index: 3;
  width: 52px;
  height: 15px;
  background-color: white;
}

.dotcloud .d1 {
  top: 32px;
  left: 166px;
  border-top: 21px solid #566AFF;
  border-bottom: 5px solid #566AFF;
}

.dotcloud .d2 { top: 117px; left: 100px; }
.dotcloud .d3 { top: 117px; left: 230px; }

.dotcloud .d4 {
  top: 176px;
  left: 166px;
  border-bottom: 21px solid #566AFF;
  border-top: 5px solid #566AFF;
}

/* DEMO */

.dotcloud:hover {
  opacity: 0.5;
}

JavaScript

/*
  Dotcloud logo only in CSS by Vjeux :)
       http://blog.vjeux.com/
*/