JSFiddle - React, Tailwind, and code Playground

by ken3desu

HTML

<div class="col">
    <h4>少ないグラデーション指定（全体）</h4>
    <div class="box few-grad"></div>
    <h4>多いグラデーション指定（全体）</h4>
    <div class="box many-grad"></div>
    <h4>多いグラデーションを再現する要素群（全体）</h4>
    <div class="box grad-box">
        <div class="grad-item" style="background: rgba(0, 0, 0, 0); left:0%; width:calc(0.75% - 0%);"></div>
        <div class="grad-item" style="background: rgba(0, 0, 255, 1); left:0.75%; width:calc(1.51% - 0.75%);"></div>
        <div class="grad-item" style="background: rgba(0, 0, 128, 1); left:1.51%; width:calc(4.51% - 1.51%);"></div>
        <div class="grad-item" style="background: rgba(0, 255, 0, 1); left:4.51%; width:calc(65.51% - 4.51%);"></div>
        <div class="grad-item" style="background: rgba(128, 255, 255, 1); left:65.51%; width:calc(66.25% - 65.51%);"></div>
        <div class="grad-item" style="background: rgba(128, 255, 0, 1); left:66.25%; width:calc(72.25% - 66.25%);"></div>
        <div class="grad-item" style="background: rgba(255, 96, 0, 1); left:72.25%; width:calc(73% - 72.25%);"></div>
        <div class="grad-item" style="background: rgba(255, 0, 0, 1); left:73%; width:calc(96%  - 73%);"></div>
        <div class="grad-item" style="background: rgba(255, 0, 0, 1); left:73%; width:calc(100%  - 73%);"></div>
    </div>

    <h4>少ないグラデーション指定（左端を拡大）</h4>
    <div class="box few-grad zoom"></div>
    <h4>多いグラデーション指定（左端を拡大）</h4>
    <div class="box many-grad zoom"></div>
    <h4>多いグラデーションを再現する要素群（左端を拡大）</h4>
    <div class="box grad-box zoom">
        <div class="grad-item" style="background: rgba(0, 0, 0, 0); left:0%; width:calc(0.75% - 0%);"></div>
        <div class="grad-item" style="background: rgba(0, 0, 255, 1); left:0.75%; width:calc(1.51% - 0.75%);"></div>
        <div class="grad-item" style="background: rgba(0, 0, 128, 1); left:1.51%; width:calc(4.51% - 1.51%);"></div>
        <div class="grad-item" style="background: rgba(0, 255, 0, 1); left:4.51%; width:calc(65.51% - 4.51%);"></div>
        <div class="grad-item"...

SCSS

.col {
    display: flex;
    flex-direction: column;
}

.box {
    width: 100%;
    height: 100px;
    margin: 1px 0;
    &.zoom {
        width: 1400%;
    }
}

.few-grad {
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0) 0% 0.75%,
        rgba(0, 0, 255, 1) 0.75% 1.51%,
        rgba(0, 0, 128, 1) 1.51% 4.51%,
        rgba(0, 255, 0, 1) 4.51% 5.51%,
    );
}

.many-grad {
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0) 0% 0.75%,
        rgba(0, 0, 255, 1) 0.75% 1.51%,
        rgba(0, 0, 128, 1) 1.51% 4.51%,
        rgba(0, 255, 0, 1) 4.51% 65.51%,
        rgba(128, 255, 255, 1) 65.51% 66.25%,
        rgba(128, 255, 0, 1) 66.25% 72.25%,
        rgba(255, 96, 0, 1) 72.25% 73%,
        rgba(255, 0, 0, 1) 73% 96% 
    );
}
.grad-box {
  position: relative;
  .grad-item {
    height: 100%;
    position: absolute;
  }
}