JSFiddle - React, Tailwind, and code Playground
by Tsuneo Yoshioka
HTML
<div class="glicko_rating_area mt40" style="border: 2px solid #ccc; padding: 15px;">
<div class="glicko_rating_area__detail_link">
<a class="target-blank" id="anchor-rating-chart-186945" style="text-decoration: none;">
グラフを詳しく見る
</a>
</div>
<div style="display: flex; flex-direction: row;">
<div style="flex: 1 1 auto;">
<div class="glicko_rating_chart" id="rating-chart-186945" style="width: 100%; height: 223px;"><div style="position: relative;"><div dir="ltr" style="position: relative; width: 513px; height: 223px;"><div aria-label="グラフ。" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><svg width="513" height="223" aria-label="グラフ。" style="overflow: hidden;"><defs id="_ABSTRACT_RENDERER_ID_92"><clipPath id="_ABSTRACT_RENDERER_ID_93"><rect x="80" y="5" width="423" height="198"></rect></clipPath></defs><rect x="0" y="0" width="513" height="223" stroke="none" stroke-width="0" fill="#ffffff"></rect><g><rect x="80" y="5" width="423" height="198" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g clip-path="url(http://localhost:3000/challenges#_ABSTRACT_RENDERER_ID_93)"><g><rect x="88" y="5" width="1" height="198" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="88" y="5" width="1" height="198" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="112" y="5" width="1" height="198" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="138" y="5" width="1" height="198" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="163" y="5" width="1" height="198" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="163" y="5" width="1" height="198" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="188" y="5" width="1" height="198" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="213" y="5" width="1" height="198" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="238" y="5" width="1" height="198" stroke="none" stroke-width="0"...