JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<div style="font-family:arial,sans-serif;">
  <a
    href="#"
    style="display:block;white-space:nowrap;text-decoration:none;color:#D3D3D3;clear:both;"
  >
    <strong
      style="float:left;display:inline-block;font-size:20px;line-height:48px;color:#666;padding:5px 20px 5px 0;width:150px;text-align:right;"
    >
      Sehr gut
    </strong>
    <span style="float:left;clear:right;font-size:48px;white-space:nowrap;">
      <span style="float:left;color:#DAA520;">★</span>
      <span style="float:left;color:#DAA520;">★</span>
      <span style="float:left;color:#DAA520;">★</span>
      <span style="float:left;color:#DAA520;">★</span>
      <span style="float:left;color:#DAA520;clear:right;">★</span>
    </span>
  </a>
  <a
    href="#"
    style="display:block;white-space:nowrap;text-decoration:none;color:#D3D3D3;clear:both;"
  >
    <strong
      style="float:left;display:block;font-size:20px;line-height:48px;color:#666;padding:5px 20px 5px 0;width:150px;text-align:right;"
    >
      Gut
    </strong>
    <span style="float:left;clear:right;font-size:48px;">
      <span style="float:left;color:#DAA520;">★</span>
      <span style="float:left;color:#DAA520;">★</span>
      <span style="float:left;color:#DAA520;">★</span>
      <span style="float:left;color:#DAA520;">★</span>
      <span style="float:left;clear:right;">★</span>
    </span>
  </a>
  <a
    href="#"
    style="display:block;white-space:nowrap;text-decoration:none;color:#D3D3D3;clear:both;"
  >
    <strong
      style="float:left;display:block;font-size:20px;line-height:48px;color:#666;padding:5px 20px 5px 0;width:150px;text-align:right;"
    >
      Befriedigend
    </strong>
    <span style="float:left;clear:right;font-size:48px;">
      <span style="float:left;color:#DAA520;">★</span>
      <span style="float:left;color:#DAA520;">★</span>
      <span style="float:left;color:#DAA520;">★</span>
      <span style="float:left;">★</span>
      <span...