JSFiddle - React, Tailwind, and code Playground

by oeffe

HTML

<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">

<table class="selector_1" width="340" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr class="titel">
      <td>

      </td>
    </tr>
    <tr class="tarif">
      <td>

      </td>
    </tr>
    <tr class="optionen">
      <td>

      </td>
    </tr>
    <tr class="rechenweg">
      <td>

      </td>
    </tr>
  </tbody>
</table>

CSS

body {
  font-family: Courgette;
  font-size: 13px;
}

.line {
  position: relative;
  display: inline-block;
}

.line div {
  display: inline-block;
  content: "";
  width: 110%;
  height: 2px;
  background-color: #e2027a;
  position: absolute;
  top: 8px;
  left: -2px;
  transform: rotate(340deg) translate(0px, -1px) skew(8deg, 11deg);
}

JavaScript

//Titel
var str = '<table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="color:#e2027a;" width="105">Aktueller Tarif 1:</td><td width="235">(Chef)</td></tr></tbody></table>';

type_2("table.selector_1 tr.titel>td:nth-child(1)", str);

//Tarif
setTimeout(function() {
  var str = '<table width="100%" border="0" cellpadding="0" cellspacing="0" data-preis="50.63"><tbody><tr><td colspan="2" style="padding:0px 0px 5px 0px;">Business Mobil L mit Handy statt <div class="line"><div></div>56,26 €</div> für <span style="color:#e2027a;">50,63 €</span> mtl.</td></tr><tr><td style="color:#e2027a;" width="10"><div style="position:relative;top:3px">°</div></td><td width="330">Telefonie und SMS Flat in alle dt. Netze</td></tr><tr><td style="color:#e2027a;" width="10"><div style="position:relative;top:3px">°</div></td><td width="330">Telefonie und SMS Flat in alle dt. Netze</td></tr><tr><td style="color:#e2027a;" width="10"><div style="position:relative;top:3px">°</div></td><td width="330">Telefonie und SMS Flat in alle dt. Netze</td></tr><tr><td style="color:#e2027a;" width="10"><div style="position:relative;top:3px">°</div></td><td width="330">Telefonie und SMS Flat in alle dt. Netze</td></tr><tr><td style="color:#e2027a;" width="10"><div style="position:relative;top:3px">°</div></td><td width="330">Telefonie und SMS Flat in alle dt. Netze</td></tr></tbody></table>';

  type_2("table.selector_1 tr.tarif>td:nth-child(1)", str);
}, 5000);

//Optionen
setTimeout(function() {
  var str = '<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin:10px 0px 0px 0px;" data-preis="38.27"><tbody><tr><td colspan="3" style="padding:0px 0px 5px 0px;"><span style="color:#e2027a;">Option/en</span></td></tr><tr><td style="color:#e2027a;" width="10"><div style="position:relative;top:3px">°</div></td><td width="250">Festnetzrufnummer</td><td style="position:relative;" width="80"><div style="position:absolute;top:0;right:0">4,16 €...