JSFiddle - React, Tailwind, and code Playground

by Asif Sharif Shahid

HTML

<div id="body">
    <div id="background">
        <div class="company-container">
            <img class="company" src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=120%C3%97120&amp;w=120&amp;h=120" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
        </div>
        <div class="company-container">
            <img class="company" src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=120%C3%97120&amp;w=120&amp;h=120" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
            <img src="https://placeholdit.imgix.net/~text?txtsize=10&amp;txt=50%C3%9750&amp;w=50&amp;h=50" class="company-side-bubble" />
        </div>
    </div>
</div>

CSS

#body {
    height:500px;
    width:500px;
}
#background {
    background:#F9F9F9;
}
.company-container {
    display:inline-block;
    position: relative;
}
.company {
    border-radius: 80px;
    display: block;
    height: 130px;
    width: 130px;
    margin: 35px;
    background:#E5E5E5;
}
.company:hover {
    transform: scale(1.2);
    cursor:pointer;
}
.company-side-bubble {
    border-radius: 30px;
    width: 40px;
    height: 40px;
    position:absolute;
    border: solid 1px red;
}
.company-side-bubble:hover {
    transform: scale(1.2);
    cursor:pointer;
}
.company-side-bubble:nth-of-type(2) {
  top: 0%;
  left: 50%;
  transform: translateX(-50%) translateY(25%);
}
.company-side-bubble:nth-of-type(3) {
  top: 25%;
  right: 25%;
  transform: translateX(50%) translateY(-50%);
}
.company-side-bubble:nth-of-type(4) {
  right: 0%;
  top: 50%;
  transform: translateX(-25%) translateY(-50%);
}
.company-side-bubble:nth-of-type(5) {
  top: 75%;
  right: 25%;
  transform: translateX(50%) translateY(-50%);
}
.company-side-bubble:nth-of-type(6) {
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%) translateY(-25%);
}
.company-side-bubble:nth-of-type(7) {
  bottom: 25%;
  left: 25%;
  transform: translateX(-50%) translateY(50%);
}
.company-side-bubble:nth-of-type(8) {
  top: 50%;
  left: 0%;
  transform: translateX(25%) translateY(-50%);
}
.company-side-bubble:nth-of-type(9) {
  top: 25%;
  left: 25%;
  transform: translateX(-50%) translateY(-50%);
}