JSFiddle - React, Tailwind, and code Playground

by mrcl

HTML

<pre>
                               2015
    
      Dezember
Mo Di Mi Do Fr Sa So
   <span class=s> 1</span> <span class=s> 2</span> <span class=s> 3</span> <span class=s> 4</span> <span class=s> 5</span>  6
<span class=s> 7</span> <span class=s> 8</span> <span class=s> 9</span> <span class=s>10</span> <span class=s>11</span> <span class=s>12</span> 13
<span class=s>14</span> <span class=s>15</span> <span class=s>16</span> <span class=s>17</span> <span class=s>18</span> <span class=s>19</span> 20
<span class=s>21</span> <span class=s>22</span> <span class=s>23</span> <u><span class=s>24</span></u> <i><span class=s>25</span></i> <span class=s>26</span> 27
<span class=s>28</span> <span class=s>29</span> <span class=s>30</span> <u><span class=s>31</span></u>

    
    
                               2016    
    
       Januar                Februar                  März
Mo Di Mi Do Fr Sa So   Mo Di Mi Do Fr Sa So   Mo Di Mi Do Fr Sa So
            <i><span class=s> 1</span></i> <span class=s> 2</span> <span class=s> 3</span>   <span class=s> 1</span> <span class=s> 2</span> <span class=s> 3</span> <span class=s> 4</span> <span class=s> 5</span> <span class=s> 6</span> <span class=s> 7</span>      <span class=s> 1</span> <span class=s> 2</span> <span class=s> 3</span> <span class=s> 4</span> <span class=s> 5</span> <span class=s> 6</span> 
<span class=s> 4</span> <span class=s> 5</span> <span class=s> 6</span> <span class=s> 7</span> <span class=s> 8</span> <span class=s> 9</span> <span class=s>10</span>   <u><span class=s> 8</span></u> <span class=s> 9</span> <span class=s>10</span> <span class=s>11</span> <span class=s>12</span> <span class=s>13</span> <span class=s>14</span>   <span class=s> 7</span> <span class=s> 8</span> <span class=s> 9</span> <span class=s>10</span> <span class=s>11</span> <span class=s>12</span> <span class=s>13</span> 
<span class=s>11</span> <span class=s>12</span> <span class=s>13</span> <span class=s>14</span> <span class=s>15</span>...

CSS

pre .ui-selecting { background: gold; }
pre .ui-selected { background: tomato; color: white; }
i {color:red;font-style:normal;}
u {text-decoration:none;color:magenta;}

JavaScript

$("pre").selectable({
      stop: function() {
        var result = $( "#select-result" ).empty();
        $("mark").text($("pre .s.ui-selected").length);
      }
    });