JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<div class="balloons">
    <div class="balloon balloon-1">
       <p>
           Lorem ipsum dolor sit amet, consectetur 
           adipisci quam distin.
       </p>
    </div>
    <div class="balloon balloon-2">
        <p>
           Lorem ipsum dolor sit amet, consectetur 
           adipisci quam distincti.
       </p>
    </div>
    <div class="balloon balloon-3">
        <p>
           Lorem ipsum dolor sit amet, consectetur 
           adipisci quam distinctio.
       </p>
    </div>
    <div class="balloon balloon-4">
        <p>
           Lorem ipsum dolor sit amet, consectetur 
           adipisci quam distinct.
       </p>
    </div>
    <div class="balloon balloon-5">
        <p>
           Lorem ipsum dolor sit amet, consectetur 
           adipisci quam distinct.
       </p>
    </div>
    <div class="balloon balloon-6">
        <p>
           Lorem ipsum dolor sit amet, consectetur 
           adipisci quam distincti.
       </p>
    </div>
    <div class="balloon balloon-7">
        <p>
           Lorem ipsum dolor sit amet, consectetur 
           adipisci quam distinctio.
       </p>
    </div>
    <div class="balloon balloon-8">
        <p>
           Lorem ipsum dolor sit amet, consectetur 
           adipisci quam distinctio.
       </p>
    </div>
</div>

CSS

body{
    background-color:#aaa;
}
.balloons{
    width:500px;
    height:500px;
    margin:0 auto;
    position:relative;
}
.balloon{
    background-color:#000;
    border-radius:100%;
    border:1px solid #fff;
    width:60px;
    height:60px;
    box-sizing: border-box;
    position:absolute;
    color:#fff;
}
/*Text*/
.balloons .balloon-1 p,
.balloons .balloon-6 p,
.balloons .balloon-7 p,
.balloons .balloon-8 p{
    width:300px;
    margin:0 0 0 -320px;
}
.balloons .balloon-2 p,
.balloons .balloon-3 p,
.balloons .balloon-4 p{
    width:300px;
    margin:0 0 0 70px;
}
.balloons .balloon-5 p{
    width:400px;
    margin:60px 0 0 -170px;
    text-align:center;
}
/*Lines*/
.balloons .balloon:after{
    width:150px;
    height:1px;
    background-color:#fff;
    content:"";
    display:block;
    position:absolute;
    z-index:-1;
}

.balloons .balloon-1:after,
.balloons .balloon-5:after,
.balloons .balloon-6:after,
.balloons .balloon-7:after,
.balloons .balloon-8:after{
    left:30px;
    top:30px;
    -webkit-transform-origin: 0 0; /* Chrome, Safari, Opera */;
    transform-origin:0 0;
    -ms-transform-origin:0 0;
}

.balloons .balloon-2:after,
.balloons .balloon-3:after,
.balloons .balloon-4:after{
    right:30px;
    top:30px;
    -webkit-transform-origin: 100% 0; /* Chrome, Safari, Opera */;
    transform-origin:: 100% 0;
    -ms-transform-origin:: 100% 0;
}
.balloons .balloon-1:after{
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
}
.balloons .balloon-2:after,
.balloons .balloon-6:after{
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
}
.balloons .balloon-4:after,
.balloons .balloon-8:after{
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}
.balloons .balloon-5:after{
   ...