JSFiddle - React, Tailwind, and code Playground

by ttquang1063750

HTML

<svg class="view-box" width="100%" height="200" preserveAspectRatio="xMaxYMin" viewBox="0 0 557.4375 200">

<defs>
  <linearGradient id="gradient" x1="0" x2="1" y1="0" y2="0">
    <stop stop-color="#5e81f4" offset="0%"></stop>
    <stop stop-color="#FFFFFF" offset="86.22222222222223%"></stop>
    <stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>

<linearGradient id="no-gradient" x1="0" x2="1" y1="0" y2="0">
    <stop stop-color="#5e81f4" offset="0%"></stop>
    <stop stop-color="#5e81f4" offset="86.22222222222223%"></stop>

    <stop stop-color="#FFFFFF" offset="86.22222222222223%"></stop>
    <stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>

<rect rx="4" ry="4" x="5" y="30" width="30" height="30" fill="url(#gradient)"></rect>
<rect rx="4" ry="4" x="45" y="30" width="30" height="30" fill="url(#no-gradient)"></rect>

</svg>

CSS

body {
  background: rgba(0,0,0,0.7);
}

rect {
    stroke: #e6e6e6;
    stroke-width: 2px;
}