Promo Bar - Copy this React, Tailwind Component to your project

Refactor for me this promo bar component with modern ux animations data: [ { "id": "gid://shopify/Metaobject/134455820357", "handle": "first promo bar", "type": "promo_bar", "fields": [ { "key": "background_color", "type": "color", "value": "#d3ea79" }, { "key": "content", "type": "rich_text_field", "value": "{\"type\":\"root\",\"children\":[{\"type\":\"paragraph\",\"children\":[{\"type\":\"text\",\"value\":\"This is a \"},{\"type\":\"text\",\"value\":\"promo\",\"bold\":true},{\"type\":\"text\",\"value\":\" bar with \"},{\"url\":\"https://google.com\",\"target\":\"_blank\",\"type\":\"link\",\"children\":[{\"type\":\"text\",\"value\":\"link\"}]},{\"type\":\"text\",\"value\":\"\"}]}]}" }, { "key": "title", "type": "single_line_text_field", "value": "First Promo bar" } ] }, { "id": "gid://shopify/Metaobject/134455853125", "handle": "second promo bar", "type": "promo_bar", "fields": [ { "key": "background_color", "type": "color", "value": "#a8c5f4" }, { "key": "content", "type": "rich_text_field", "value": "{\"type\":\"root\",\"children\":[{\"type\":\"paragraph\",\"children\":[{\"type\":\"text\",\"value\":\"Second promo bar\"}]}]}" }, { "key": "title", "type": "single_line_text_field", "value": "Second Promo Bar" } ] } ]