create this design in the REACT, without lucid react, Make the CSS seperate and not to use Tailwind CSS..
Make the Design Same write the code in REACT
the design is still not the same
here is teh HTML CODE AND CSS
<div class="CartHeader_CartHeader__children___efhV"><div class="CartProgressBar_CartProgressBar__55R6a"><p class="CartProgressBar_CartProgressBar__title__Poe51"><span>You’ve got <bold>FREE SHIPPING</bold> and <bold>10% OFF!</bold> 🎉</span></p><div class="CartProgressBar_CartProgressBar__container__8Ke9p"><div class="CartProgressBar_CartProgressBar__milestones__mnKcR"><div class="CartProgressBar_CartProgressBar__progress__wJ0GF" style="grid-column-end: 25;"></div><div class="CartProgressBar_CartProgressBar__milestone__6GNxE CartProgressBar_CartProgressBar__milestone--active__ASzBR" data-testid="cart-progress-bar-milestone-0" style="grid-column-start: 12;"><div class="CartProgressBar_CartProgressBar__milestone-wrapper__UHppH"><div class="CartProgressBar_CartProgressBar__milestone-pill__ISZym"><span class="Icon_Icon__dsocX" style="width: 24px; height: 24px;"><svg ariaHidden="false" focusable="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.05546 4.05546C2.57118 3.53973 3.27065 3.25 4 3.25H12C12.7293 3.25 13.4288 3.53973 13.9445 4.05546C14.4603 4.57118 14.75 5.27065 14.75 6V7.25H17.5211C17.7834 7.25037 18.0422 7.3097 18.2785 7.4236C18.5148 7.53749 18.7224 7.70304 18.8861 7.908L22.365 12.2567C22.6135 12.5664 22.7493 12.9515 22.75 13.3487L22.75 13.35L22.75 17C22.75 17.4641 22.5656 17.9092 22.2374 18.2374C21.9092 18.5656 21.4641 18.75 21 18.75H19.6465C19.32 19.9043 18.2588 20.75 17 20.75C15.7412 20.75 14.68 19.9043 14.3535 18.75H9.64648C9.32002 19.9043 8.25878 20.75 7 20.75C5.74122 20.75 4.67998 19.9043 4.35352 18.75H3C2.53587 18.75 2.09075 18.5656 1.76256 18.2374C1.43437 17.9092 1.25 17.4641 1.25 17V6C1.25 5.27065 1.53973 4.57118 2.05546 4.05546ZM4.35352 17.25C4.67998 16.0957 5.74122 15.25 7 15.25C8.25878 15.25 9.32002 16.0957 9.64648 17.25H13.25V6C13.25 5.66848 13.1183 5.35054 12.8839 5.11612C12.6495 4.8817 12.3315 4.75 12 4.75H4C3.66848 4.75 3.35054 4.8817 3.11612 5.11612C2.8817 5.35054 2.75 5.66848 2.75 6V17C2.75 17.0663 2.77634 17.1299 2.82322 17.1768C2.87011 17.2237 2.93369 17.25 3 17.25H4.35352ZM14.75 8.75V16.4185C15.2477 15.7117 16.0699 15.25 17 15.25C18.2588 15.25 19.32 16.0957 19.6465 17.25H21C21.0663 17.25 21.1299 17.2237 21.1768 17.1768C21.2237 17.1299 21.25 17.0663 21.25 17L21.25 13.3513C21.25 13.3511 21.25 13.3515 21.25 13.3513C21.2498 13.2948 21.2304 13.2394 21.195 13.1953L17.7143 8.84452C17.691 8.81524 17.6609 8.79107 17.6271 8.7748C17.5935 8.75859 17.5567 8.75012 17.5194 8.75H14.75ZM7 16.75C6.30964 16.75 5.75 17.3096 5.75 18C5.75 18.6904 6.30964 19.25 7 19.25C7.69036 19.25 8.25 18.6904 8.25 18C8.25 17.3096 7.69036 16.75 7 16.75ZM17 16.75C16.3096 16.75 15.75 17.3096 15.75 18C15.75 18.6904 16.3096 19.25 17 19.25C17.6904 19.25 18.25 18.6904 18.25 18C18.25 17.3096 17.6904 16.75 17 16.75Z" fill="#0C0C0D"></path></svg></span><p>FREE</p></div><div class="CartProgressBar_CartProgressBar__milestone-value____Zgq">$65</div></div></div><div class="CartProgressBar_CartProgressBar__milestone__6GNxE CartProgressBar_CartProgressBar__milestone--active__ASzBR" data-testid="cart-progress-bar-milestone-1" style="grid-column-start: 22;"><div class="CartProgressBar_CartProgressBar__milestone-wrapper__UHppH"><div class="CartProgressBar_CartProgressBar__milestone-pill__ISZym"><span class="Icon_Icon__dsocX" style="width: 24px; height: 24px;"><svg ariaHidden="false" focusable="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75ZM1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM9 9.75C8.58579 9.75 8.25 9.41421 8.25 9C8.25 8.58579 8.58579 8.25 9 8.25H9.01C9.42421 8.25 9.76 8.58579 9.76 9C9.76 9.41421 9.42421 9.75 9.01 9.75H9ZM14.4697 8.46967C14.7626 8.17678 15.2374 8.17678 15.5303 8.46967C15.8232 8.76256 15.8232 9.23744 15.5303 9.53033L9.53033 15.5303C9.23744 15.8232 8.76256 15.8232 8.46967 15.5303C8.17678 15.2374 8.17678 14.7626 8.46967 14.4697L14.4697 8.46967ZM15.01 15.75H15C14.5858 15.75 14.25 15.4142 14.25 15C14.25 14.5858 14.5858 14.25 15 14.25H15.01C15.4242 14.25 15.76 14.5858 15.76 15C15.76 15.4142 15.4242 15.75 15.01 15.75Z" fill="black"></path></svg></span><p>-10%</p></div><div class="CartProgressBar_CartProgressBar__milestone-value____Zgq">$120</div></div></div></div></div></div></div>/*! CSS Used from: https://huel.com/_next/static/css/e0dc8edcfb050fbc.css /
.Icon_Icon__dsocX{display:flex;align-items:center;justify-content:center;}
.Icon_Icon__dsocX svg{width:100%;height:100%;}
.Icon_Icon__dsocX svg path{fill:currentColor;}
.CartHeader_CartHeader__children___efhV{max-height:14rem;width:100%;overflow:hidden;transition:max-height .8s ease-in-out;}
/! CSS Used from: https://huel.com/_next/static/css/904f1e4bba484f32.css /
.CartProgressBar_CartProgressBar__55R6a{margin-left:auto;margin-right:auto;margin-top:.5rem;width:100%;}
.CartProgressBar_CartProgressBar__title__Poe51{margin-bottom:.75rem;border-radius:8px;--tw-bg-opacity:1;background-color:rgb(187 243 193/var(--tw-bg-opacity,1));padding:.75rem 1rem;font-size:.875rem;line-height:1.225rem;font-weight:500;}
.CartProgressBar_CartProgressBar__title__Poe51 bold{font-weight:600;}
.CartProgressBar_CartProgressBar__container__8Ke9p{position:relative;}
.CartProgressBar_CartProgressBar__milestones__mnKcR{position:relative;display:grid;width:100%;}
.CartProgressBar_CartProgressBar__milestones__mnKcR:before{position:absolute;left:0;top:34px;z-index:0;height:.375rem;width:100%;border-radius:30px;--tw-bg-opacity:1;background-color:rgb(222 222 223/var(--tw-bg-opacity,1));--tw-content:"";content:var(--tw-content);}
.CartProgressBar_CartProgressBar__progress__wJ0GF{position:absolute;left:0;top:34px;grid-column-start:1;height:.375rem;width:100%;border-radius:30px;background:linear-gradient(90deg,#bbf3c1,#00b67a 70%,#005036);}
.CartProgressBar_CartProgressBar__milestone__6GNxE{display:flex;flex-direction:column;align-items:flex-end;}
.CartProgressBar_CartProgressBar__milestone-wrapper__UHppH{text-align:center;}
.CartProgressBar_CartProgressBar__milestone--active__ASzBR .CartProgressBar_CartProgressBar__milestone-pill__ISZym{--tw-bg-opacity:1;background-color:rgb(187 243 193/var(--tw-bg-opacity,1));}
.CartProgressBar_CartProgressBar__milestone--active__ASzBR .CartProgressBar_CartProgressBar__milestone-pill__ISZym:after{--tw-border-opacity:1;border-bottom-color:rgb(187 243 193/var(--tw-border-opacity,1));}
.CartProgressBar_CartProgressBar__milestone-value____Zgq{font-size:.625rem;line-height:.875rem;font-weight:500;--tw-text-opacity:1;color:rgb(45 45 46/var(--tw-text-opacity,1));}
.CartProgressBar_CartProgressBar__milestone-pill__ISZym{position:relative;margin-bottom:1.25rem;display:flex;width:-moz-max-content;width:max-content;align-items:center;justify-content:center;gap:.25rem;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(236 236 237/var(--tw-bg-opacity,1));padding:.25rem .5rem;font-size:.625rem;line-height:.875rem;font-weight:500;--tw-text-opacity:1;color:rgb(12 12 13/var(--tw-text-opacity,1));}
.CartProgressBar_CartProgressBar__milestone-pill__ISZym:after{position:absolute;bottom:-.25rem;z-index:-1;height:0;width:0;--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-left:4px solid transparent;border-right:4px solid transparent;border-top:0 solid transparent;--tw-border-opacity:1;border-bottom:4px solid transparent;border-bottom-color:rgb(236 236 237/var(--tw-border-opacity,1));--tw-content:"";content:var(--tw-content);}
.CartProgressBar_CartProgressBar__milestone-pill__ISZym>:first-child{height:1rem!important;width:1rem!important;}
/! CSS Used from: https://huel.com/_next/static/css/831a61706c9599df.css */
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}
*,:after,:before{box-sizing:border-box;border:0 solid;}
:after,:before{--tw-content:"";}
p{margin:0;}
:disabled{cursor:default;}
svg{display:block;vertical-align:middle;}
The code returns the following error:
The tag <bold> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
Revise the code to address the error.