JSFiddle - React, Tailwind, and code Playground

by SwampFall

HTML

<div id="wrapper">
  <div class="bubble_wrapper">
    <div class="bubble_wrap">

    </div>
    <div class="bubble_wrap">

    </div>
    <div class="bubble_wrap">

    </div>
    <div class="bubble_wrap">

    </div>
  </div>
</div>

CSS

html, body {
  font-family: sailec light,sans-serif;
}

div {
  box-sizing: border-box;
}

#wrapper {
  min-height: 10px;
  display: flex;
  background: green;
}

.bubble_wrapper {
  margin: auto;
  display: flex;
  flex-wrap: nowrap;
}
.bubble_wrap {
  background:white;
  border-radius: 15px;
  height: 10px;
  width: 10px;
  margin: 0 3px;
  -webkit-transition: width .5s, height .5s;
  transition: width .5s, height .5s;
}

#wrapper:hover .bubble_wrap {
  width: 30px;
  height: 30px;
}

JavaScript

class BubbleView {
  constructor(id, options, action) {


    this.options = {
      action: options.action || action,
      orientation: options.orientation || 'horizontal',
      linked: options.linked || false
    };

  }
}

class BubbleViewItem {

}