Create a React component with tailwind for me.
It is a progress bar to track the user's progress level.
The text and the vertical line must be at the end of the current progress bar.
The background is transparent.
The component has this ASCII representation:
│
│
┌───────────────────────────┼──────────────────────────────────────────┐
│########%%%%%||||||||| │ │
└───────────────────────────┼──────────────────────────────────────────┘
│
│
Progress Level - 26%
These are some of the CSS rules that a Figma file would generate for this component. You can use it to understand how the component is made. You don't need to use the exact same CSS.
/* pending */
position: absolute;
width: 1780px;
height: 8px;
left: 0px;
top: 167px;
/* Group 1674 */
position: absolute;
width: 1780px;
height: 8px;
left: 0px;
top: 167px;
// Lots of CSS here, removed for brievity.You must always try to use the existing Tailwind rules that are extended on the tailwind.config.js
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
colors: {
'blue': '#1fb6ff',
'purple': '#7e5bef',
// More colors here
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'8xl': '96rem',
'9xl': '128rem',
},
borderRadius: {
'4xl': '2rem',
}
}
},
}Use the following template for the code:
import { twMerge } from 'tailwind-merge'
export function ComponentName({ className = '' }) {
return (
<div className={twMerge('', className)}>
// ...
</div>
)
}Note: the twMerge must only be used in the most outer element.
Use as much tailwind as possible, avoiding the use of style props as much as possible.
Send me the code block only, don't explain the code.
Name it ProgressBar.
It will receive progress and classname props.