JSFiddle - React, Tailwind, and code Playground

by jayesh1511

HTML

<div class='patientImage greenBody'></div>
<div class='patientImage violetBody'></div>
<div class="plusSign">
    <div class="upperSection firstPart"></div>
    <div class="upperSection middlePart"></div>
    <div class="upperSection lastPart"></div>
    <div class="PlusSignHorizontalBar"></div>
    <div class="horizontalGreenFiller"></div>
</div>
<div class='duetText'>Duet</div>
<div class='healthText'>Health</div>

CSS

div {
    display:inline-block;
    font-size:250%;
}
.duetText {
    margin-left:40px;
    /* purple/Violet */
    color:#28275b;
}
.healthText {
    /* Green Color again */
    color:#00b971;
}
.patientImage {
    border-radius:50%;
    margin-bottom:15px;
    position:absolute;
    height:17px;
    width:17px;
}
.greenBody {
    /*Green color*/
    background-color:#00b971;
    border:2px solid white;
    z-index:200;
}
.violetBody {
    margin-top:2px;
    margin-left:13px;
    z-index:-200;
    /*Violet blue like color*/
    background-color:#28275b;
    
}
.upperSection {
    border-radius:50%;
    height:18px;
    width:18px;
    margin-top:-18px;
    position:absolute;
}
.firstPart {
    margin-left:-5px;
    background-color:#00b971;
    /* height:13px;
     width:18px;
     border-radius: 0 18px 18px 18px;*/
}
.middlePart {
    /*visibility:hidden;*/
    margin-left:10px;
    background-color:#00b971;
    height:18px;
    width:11px;
    border-radius: 12px 6px 0 12px;
}
.lastPart {
    height:18px;
    width:11px;
    border-radius: 0 11px 11px 6px;
    margin-left:24px;
    background-color:#28275b;
}
.PlusSignHorizontalBar {
    position:absolute;
    width:16px;
    height:3px;
    margin-top:-10px;
    margin-left:14px;
    background-color:white;
}
.plusSign {
    margin-top:40px;
}
.horizontalGreenFiller {
    position:absolute;
    height:5px;
    width:10px;
    margin-top:-5px;
    margin-left:5px;
    z-index:200;
    /* Green color again */
    /* Bar which connects two circle and eliminates weird gap between   two */
    background-color:#00b971;
}