JSFiddle - React, Tailwind, and code Playground

by demee

HTML

<script src="http://github.com/DmitryBaranovskiy/g.raphael/blob/master/g.raphael-min.js?raw=true"></script>
<div id="canvas"></div>
<script type="text/javascript" src="http://github.com/DmitryBaranovskiy/g.raphael/blob/master/g.raphael-min.js?raw=true"></script>

CSS

#canvas {
    border: 1px solid black;
    width: 450px;
    height: 400px;
    background: #1b1b1b;
}

JavaScript

Raphael.fn.g.labeledDrop  = function(x, y, text, color, w, h){
    var w = w || 95; 
    var h = h || 20 ; 
    
    var set = this.set();
    
    var rect = this.rect(x - w, y - h/2, w, h, 3);
    var triangle = this.path(['M', x, y + h/2, 'L', x, y - h/2, 'L', x + 1.5*h, y, 'Z']);
    var circle = this.circle(x, y, h/2); 
    var text = this.text(x - w/2 - h/4, y, text); 


    set.push(rect)
    set.push(circle);
    set.push(triangle);
    set.push(text); 
    
    text.attr({fill: '#fff', 'font-size': '12px', 'font-weight': 'bold'}); 
    rect.attr({'stroke-width': 0, fill: color}); 
    circle.attr({'stroke-width': 0, fill: '#fff'}); 
    triangle.attr({'stroke-width': 0, fill: '#fff', opacity: 0.5});
    
    
    
    return set; 
}

var paper = Raphael('canvas'); 

var label = paper.g.labeledDrop(100, 100, "COMPLETED", 'green');