JSFiddle - React, Tailwind, and code Playground

by Bilal Shakeel

HTML

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 20px;
    width:400px;
    background: linear-gradient(to left, rgb(0, 255, 0) 0%, rgb(0, 115, 0) 47%, rgb(0, 0, 0) 48%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 52%, rgb(115, 0, 0) 53%, rgb(255, 0, 0) 100%);
}
</style>
</head>
<body>
<h1>Linear Gradient - Left to Right</h1>
<p>This linear gradient starts at the left. It starts red, transitioning to yellow:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>