JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<h1 id="test">CSS Stacked Bar Graph</h1>
<ul class="yAxis">
    <li>100</li>
    <li>90</li>
    <li>80</li>
    <li>70</li>
    <li>60</li>
    <li>50</li>
    <li>40</li>
    <li>30</li>
    <li>20</li>
    <li>10</li>

</ul>
    <dl id="csschart">
        
        <dt>Mon</dt>
        <dd class="p36"><span><b>36</b></span></dd>
        <dd class="sub p30" ><span><b>30</b></span></dd>
        
        <dt>Tue</dt>
        <dd class="p45"><span><b>45</b></span></dd>
        <dd class="sub p35"><span><b>35</b></span></dd>    
        
        <dt>Wed</dt>
        <dd class="p41"><span><b>41</b></span></dd>
        <dd class="sub p21"><span><b>21</b></span></dd>    
        
        <dt>Thu</dt>
        <dd class="p48"><span><b>48</b></span></dd>
        <dd class="sub p30" ><span><b>30</b></span></dd>
        
        <dt>Fri</dt>
        <dd class="p55"><span><b>55</b></span></dd>
        <dd class="sub p15" ><span><b>15</b></span></dd>
        
        <dt>Sat</dt>
        <dd class="p80"><span><b>80</b></span></dd>
        <dd class="sub p71" ><span><b>71</b></span></dd>
        
        <dt>Sun</dt>
        <dd class="p72"><span><b>72</b></span></dd>
        <dd class="sub p53" ><span><b>53</b></span></dd>
        
        <dt>Mon</dt>
        <dd class="p71"><span><b>71</b></span></dd>
        <dd class="sub p37" ><span><b>37</b></span></dd>
        
        <dt>Tue</dt>
        <dd class="p64"><span><b>64</b></span></dd>
        <dd class="sub p28" ><span><b>28</b></span></dd>
        
        <dt>Wed</dt>
        <dd class="p55"><span><b>55</b></span></dd>
        <dd class="sub p30" ><span><b>30</b></span></dd>
        
        <dt>Thu</dt>
        <dd class="p62"><span><b>62</b></span></dd>
        <dd class="sub p50" ><span><b>50</b></span></dd>
        
        <dt>Fri</dt>
        <dd class="p44"><span><b>44</b></span></dd>
        <dd class="sub p40" ><span><b>40</b></span></dd>
                
</dl>
<ul class="xAxis">
    <li>Mon</li>
   ...

CSS

body {
    margin:0;
    padding:40px;
    background:#fff;
    font:70% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
}

/* 

Css Chart created by Alen Grakalic
Brought to you by Css Globe (cssglobe.com)

*/
ul.xAxis{margin:0 0 0 27px;padding:0;float:left;clear:left;display:inline;width:454px;}
ul.yAxis{margin:14px 0 0 0;padding:0;display:inline;float:left;}
ul.xAxis li{float:left; list-style:none;width:33px;text-align:center;}
ul.yAxis li{
    list-style:none;
    height:33px;
    text-align:right;
    float:left;
    clear:left;
}
dl#csschart, dl#csschart dt, dl#csschart dd{
    margin:0;
    padding:0;
    }     
dl#csschart{
    width:454px;
    height:360px;
    padding-left:11px;
    display:inline-block;
    float: left;
    } 
dl#csschart dt{
    display:none;
    }
dl#csschart dd{
    position:relative;
    float:left;
    display:inline;
    width:33px;
    height:330px;
    margin-top:22px;        
    } 
dl#csschart span{
    position:absolute;
    display:block;
    width:33px;    
    bottom:0;
    left:0;    
    z-index:1;
    color:#555;
    text-decoration:none;
    }         
dl#csschart span b{
    display:block;
    font-weight:bold;
    font-style:normal;
    float:left;
    line-height:200%;
    color:#fff;
    position:absolute;
    top:5px;
    left:3px;
    text-align:center;
    width:23px;
    }         

/* default column styling */        

    dl#csschart span{
        height:50%;
        background:#39c;
        border: 1px solid #37c;
        } 


dl#csschart .sub{
    margin-left:-33px;
    
}
dl#csschart .sub span{
    background:#faa;
    border: 1px solid #fcc;
}

/* // column types */    

/* percentages */

    dl#csschart .p1 span{height:1%}
    dl#csschart .p2 span{height:2%}
    dl#csschart .p3 span{height:3%}
    dl#csschart .p4 span{height:4%}
    dl#csschart .p5 span{height:5%}
    dl#csschart .p6 span{height:6%}
    dl#csschart .p7 span{height:7%}
    dl#csschart .p8 span{height:8%}
   ...