Use a React destination
JSX uses React attribute names, closed tags and style objects where needed. Keep supporting CSS with the generated component, and compile it in your project.
export default function CopiedComponent() {
return (<>
<style>{"@font-face{font-family:SourceManrope;src:url(\"https://getcopylook.com/assets/fonts/Manrope_variable.ttf\");}\n.cl-e85335193a93[data-cl=\"n0\"]{align-content:normal;align-items:normal;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:none;aspect-ratio:auto;backdrop-filter:none;background-attachment:scroll;background-clip:border-box;background-color:rgb(255, 255, 255);background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(221, 226, 238);border-bottom-left-radius:20px;border-bottom-right-radius:20px;border-bottom-style:solid;border-bottom-width:1px;border-collapse:separate;border-left-color:rgb(221, 226, 238);border-left-style:solid;border-left-width:1px;border-right-color:rgb(221, 226, 238);border-right-style:solid;border-right-width:1px;border-spacing:0px;border-top-color:rgb(221, 226, 238);border-top-left-radius:20px;border-top-right-radius:20px;border-top-style:solid;border-top-width:1px;bottom:auto;box-shadow:rgba(20, 35, 66, 0.063) 0px 10px 30px 0px;box-sizing:border-box;clear:none;clip-path:none;color:rgb(20, 35, 66);column-gap:normal;cursor:auto;display:block;fill:rgb(0, 0, 0);fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:SourceManrope, system-ui;font-size:16px;font-stretch:100%;font-style:normal;font-variant:normal;font-weight:400;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:auto;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:normal;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:0px;min-width:0px;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:visible;overflow-y:visible;padding-bottom:24px;padding-left:24px;padding-right:24px;padding-top:24px;paint-order:normal;perspective:none;perspective-origin:260px 129.445px;position:static;resize:none;right:auto;row-gap:normal;stroke:none;stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:start;text-decoration-color:rgb(20, 35, 66);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:260px 129.445px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:520px;word-break:normal;word-spacing:0px;z-index:auto;}\n.cl-e85335193a93 [data-cl=\"n1\"]{align-content:normal;align-items:normal;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:none;aspect-ratio:auto;backdrop-filter:none;background-attachment:scroll;background-clip:border-box;background-color:rgba(0, 0, 0, 0);background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(20, 35, 66);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-bottom-style:none;border-bottom-width:0px;border-collapse:separate;border-left-color:rgb(20, 35, 66);border-left-style:none;border-left-width:0px;border-right-color:rgb(20, 35, 66);border-right-style:none;border-right-width:0px;border-spacing:0px;border-top-color:rgb(20, 35, 66);border-top-left-radius:0px;border-top-right-radius:0px;border-top-style:none;border-top-width:0px;bottom:auto;box-shadow:none;box-sizing:border-box;clear:none;clip-path:none;color:rgb(20, 35, 66);column-gap:normal;cursor:auto;display:block;fill:rgb(0, 0, 0);fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:SourceManrope, system-ui;font-size:28px;font-stretch:100%;font-style:normal;font-variant:normal;font-weight:700;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:auto;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:normal;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:10px;margin-left:0px;margin-right:0px;margin-top:18px;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:0px;min-width:0px;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:visible;overflow-y:visible;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;paint-order:normal;perspective:none;perspective-origin:235px 19.25px;position:static;resize:none;right:auto;row-gap:normal;stroke:none;stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:start;text-decoration-color:rgb(20, 35, 66);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:235px 19.25px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:auto;word-break:normal;word-spacing:0px;z-index:auto;}\n.cl-e85335193a93 [data-cl=\"n2\"]{align-content:normal;align-items:normal;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:none;aspect-ratio:auto;backdrop-filter:none;background-attachment:scroll;background-clip:border-box;background-color:rgba(0, 0, 0, 0);background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(89, 100, 123);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-bottom-style:none;border-bottom-width:0px;border-collapse:separate;border-left-color:rgb(89, 100, 123);border-left-style:none;border-left-width:0px;border-right-color:rgb(89, 100, 123);border-right-style:none;border-right-width:0px;border-spacing:0px;border-top-color:rgb(89, 100, 123);border-top-left-radius:0px;border-top-right-radius:0px;border-top-style:none;border-top-width:0px;bottom:auto;box-shadow:none;box-sizing:border-box;clear:none;clip-path:none;color:rgb(89, 100, 123);column-gap:normal;cursor:auto;display:block;fill:rgb(0, 0, 0);fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:SourceManrope, system-ui;font-size:16px;font-stretch:100%;font-style:normal;font-variant:normal;font-weight:400;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:auto;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:normal;line-height:27.2px;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:16px;margin-left:0px;margin-right:0px;margin-top:16px;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:0px;min-width:0px;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:visible;overflow-y:visible;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;paint-order:normal;perspective:none;perspective-origin:235px 27.1953px;position:static;resize:none;right:auto;row-gap:normal;stroke:none;stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:start;text-decoration-color:rgb(89, 100, 123);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:235px 27.1953px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:auto;word-break:normal;word-spacing:0px;z-index:auto;}\n.cl-e85335193a93 [data-cl=\"n3\"]{align-content:normal;align-items:center;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:auto;aspect-ratio:auto;backdrop-filter:none;background-attachment:scroll;background-clip:border-box;background-color:rgb(39, 93, 242);background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(255, 255, 255);border-bottom-left-radius:12px;border-bottom-right-radius:12px;border-bottom-style:none;border-bottom-width:0px;border-collapse:separate;border-left-color:rgb(255, 255, 255);border-left-style:none;border-left-width:0px;border-right-color:rgb(255, 255, 255);border-right-style:none;border-right-width:0px;border-spacing:0px;border-top-color:rgb(255, 255, 255);border-top-left-radius:12px;border-top-right-radius:12px;border-top-style:none;border-top-width:0px;bottom:auto;box-shadow:none;box-sizing:border-box;clear:none;clip-path:none;color:rgb(255, 255, 255);column-gap:10px;cursor:default;display:inline-flex;fill:rgb(0, 0, 0);fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:Arial;font-size:13.3333px;font-stretch:100%;font-style:normal;font-variant:normal;font-weight:700;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:44px;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:normal;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:0px;min-width:0px;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:visible;overflow-y:visible;padding-bottom:12px;padding-left:18px;padding-right:18px;padding-top:12px;paint-order:normal;perspective:none;perspective-origin:81.1484px 22px;position:static;resize:none;right:auto;row-gap:10px;stroke:none;stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:center;text-decoration-color:rgb(255, 255, 255);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:81.1484px 22px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:162.297px;word-break:normal;word-spacing:0px;z-index:auto;}\n.cl-e85335193a93 [data-cl=\"n4\"]{align-content:normal;align-items:normal;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:none;aspect-ratio:auto;backdrop-filter:none;background-attachment:scroll;background-clip:border-box;background-color:rgba(0, 0, 0, 0);background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(255, 255, 255);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-bottom-style:none;border-bottom-width:0px;border-collapse:separate;border-left-color:rgb(255, 255, 255);border-left-style:none;border-left-width:0px;border-right-color:rgb(255, 255, 255);border-right-style:none;border-right-width:0px;border-spacing:0px;border-top-color:rgb(255, 255, 255);border-top-left-radius:0px;border-top-right-radius:0px;border-top-style:none;border-top-width:0px;bottom:auto;box-shadow:none;box-sizing:border-box;clear:none;clip-path:none;color:rgb(255, 255, 255);column-gap:normal;cursor:default;display:block;fill:rgb(0, 0, 0);fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:Arial;font-size:13.3333px;font-stretch:100%;font-style:normal;font-variant:normal;font-weight:700;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:20px;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:normal;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:auto;min-width:auto;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:hidden;overflow-y:hidden;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;paint-order:normal;perspective:none;perspective-origin:10px 10px;position:static;resize:none;right:auto;row-gap:normal;stroke:none;stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:center;text-decoration-color:rgb(255, 255, 255);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:10px 10px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:20px;word-break:normal;word-spacing:0px;z-index:auto;}\n.cl-e85335193a93 [data-cl=\"n5\"]{align-content:normal;align-items:normal;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:none;aspect-ratio:auto;backdrop-filter:none;background-attachment:scroll;background-clip:border-box;background-color:rgba(0, 0, 0, 0);background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(255, 255, 255);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-bottom-style:none;border-bottom-width:0px;border-collapse:separate;border-left-color:rgb(255, 255, 255);border-left-style:none;border-left-width:0px;border-right-color:rgb(255, 255, 255);border-right-style:none;border-right-width:0px;border-spacing:0px;border-top-color:rgb(255, 255, 255);border-top-left-radius:0px;border-top-right-radius:0px;border-top-style:none;border-top-width:0px;bottom:auto;box-shadow:none;box-sizing:border-box;clear:none;clip-path:none;color:rgb(255, 255, 255);column-gap:normal;cursor:default;display:inline;fill:none;fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:Arial;font-size:13.3333px;font-stretch:100%;font-style:normal;font-variant:normal;font-weight:700;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:auto;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:normal;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:0px;min-width:0px;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:visible;overflow-y:visible;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;paint-order:normal;perspective:none;perspective-origin:0px 0px;position:static;resize:none;right:auto;row-gap:normal;stroke:rgb(255, 255, 255);stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:center;text-decoration-color:rgb(255, 255, 255);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:0px 0px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:auto;word-break:normal;word-spacing:0px;z-index:auto;}\n.cl-e85335193a93[data-cl=\"n0\"]::before{align-content:normal;align-items:normal;align-self:auto;animation-delay:0s;animation-direction:normal;animation-duration:0s;animation-fill-mode:none;animation-iteration-count:1;animation-name:none;animation-timing-function:ease;appearance:none;aspect-ratio:auto;backdrop-filter:none;background-attachment:scroll;background-clip:border-box;background-color:rgba(0, 0, 0, 0);background-image:none;background-origin:padding-box;background-position:0% 0%;background-repeat:repeat;background-size:auto;border-bottom-color:rgb(39, 93, 242);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-bottom-style:none;border-bottom-width:0px;border-collapse:separate;border-left-color:rgb(39, 93, 242);border-left-style:none;border-left-width:0px;border-right-color:rgb(39, 93, 242);border-right-style:none;border-right-width:0px;border-spacing:0px;border-top-color:rgb(39, 93, 242);border-top-left-radius:0px;border-top-right-radius:0px;border-top-style:none;border-top-width:0px;bottom:auto;box-shadow:none;box-sizing:content-box;clear:none;clip-path:none;color:rgb(39, 93, 242);column-gap:normal;content:\"FIELD NOTES\";cursor:auto;display:inline;fill:rgb(0, 0, 0);fill-opacity:1;fill-rule:nonzero;filter:none;flex-basis:auto;flex-direction:row;flex-grow:0;flex-shrink:1;flex-wrap:nowrap;float:none;font-family:SourceManrope, system-ui;font-size:11px;font-stretch:100%;font-style:normal;font-variant:normal;font-weight:400;grid-auto-columns:auto;grid-auto-flow:row;grid-auto-rows:auto;grid-column-end:auto;grid-column-start:auto;grid-row-end:auto;grid-row-start:auto;grid-template-columns:none;grid-template-rows:none;height:auto;justify-content:normal;justify-items:normal;justify-self:auto;left:auto;letter-spacing:2px;line-height:normal;list-style-image:none;list-style-position:outside;list-style-type:disc;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;mask-image:none;mask-position:0% 0%;mask-repeat:repeat;mask-size:auto;max-height:none;max-width:none;min-height:0px;min-width:0px;object-fit:fill;object-position:50% 50%;opacity:1;order:0;overflow-wrap:normal;overflow-x:visible;overflow-y:visible;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;paint-order:normal;perspective:none;perspective-origin:0px 0px;position:static;resize:none;right:auto;row-gap:normal;stroke:none;stroke-dasharray:none;stroke-dashoffset:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-width:1px;text-align:start;text-decoration-color:rgb(39, 93, 242);text-decoration-line:none;text-decoration-style:solid;text-decoration-thickness:auto;text-indent:0px;text-overflow:clip;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:0px 0px;transition-delay:0s;transition-duration:0s;transition-property:all;transition-timing-function:ease;user-select:auto;vector-effect:none;vertical-align:baseline;visibility:visible;white-space:normal;width:auto;word-break:normal;word-spacing:0px;z-index:auto;}\n.cl-e85335193a93[data-cl=\"n0\"],.cl-e85335193a93 [data-cl=\"n1\"],.cl-e85335193a93 [data-cl=\"n2\"],.cl-e85335193a93 [data-cl=\"n3\"],.cl-e85335193a93 [data-cl=\"n4\"],.cl-e85335193a93 [data-cl=\"n5\"]{box-sizing:border-box;}\n.cl-e85335193a93[data-cl=\"n0\"]{background-attachment:initial;background-clip:initial;background-color:white;background-image:initial;background-origin:initial;background-position-x:initial;background-position-y:initial;background-repeat:initial;background-size:initial;border-bottom-color:rgb(221, 226, 238);border-bottom-left-radius:20px;border-bottom-right-radius:20px;border-bottom-style:solid;border-bottom-width:1px;border-image-outset:0;border-image-repeat:stretch;border-image-slice:100%;border-image-source:none;border-image-width:1;border-left-color:rgb(221, 226, 238);border-left-style:solid;border-left-width:1px;border-right-color:rgb(221, 226, 238);border-right-style:solid;border-right-width:1px;border-top-color:rgb(221, 226, 238);border-top-left-radius:20px;border-top-right-radius:20px;border-top-style:solid;border-top-width:1px;box-shadow:rgba(20, 35, 66, 0.063) 0px 10px 30px;padding-bottom:24px;padding-left:24px;padding-right:24px;padding-top:24px;width:min(100%, 520px);}\n.cl-e85335193a93 [data-cl=\"n3\"]{align-items:center;background-attachment:initial;background-clip:initial;background-color:rgb(39, 93, 242);background-image:initial;background-origin:initial;background-position-x:initial;background-position-y:initial;background-repeat:initial;background-size:initial;border-bottom-color:currentcolor;border-bottom-left-radius:12px;border-bottom-right-radius:12px;border-bottom-style:none;border-bottom-width:0px;border-image-outset:0;border-image-repeat:stretch;border-image-slice:100%;border-image-source:none;border-image-width:1;border-left-color:currentcolor;border-left-style:none;border-left-width:0px;border-right-color:currentcolor;border-right-style:none;border-right-width:0px;border-top-color:currentcolor;border-top-left-radius:12px;border-top-right-radius:12px;border-top-style:none;border-top-width:0px;color:white;column-gap:10px;display:inline-flex;font-weight:700;padding-bottom:12px;padding-left:18px;padding-right:18px;padding-top:12px;row-gap:10px;text-decoration-color:initial;text-decoration-line:none;text-decoration-style:initial;text-decoration-thickness:initial;}\n.cl-e85335193a93 [data-cl=\"n1\"]{font-size:28px;margin-bottom:10px;margin-left:0px;margin-right:0px;margin-top:18px;}\n.cl-e85335193a93 [data-cl=\"n2\"]{color:rgb(89, 100, 123);line-height:1.7;}\n.cl-e85335193a93 [data-cl=\"n3\"]:hover{background-attachment:initial;background-clip:initial;background-color:rgb(22, 67, 191);background-image:initial;background-origin:initial;background-position-x:initial;background-position-y:initial;background-repeat:initial;background-size:initial;}\n.cl-e85335193a93[data-cl=\"n0\"]::before{color:rgb(39, 93, 242);content:\"FIELD NOTES\";font-size:11px;letter-spacing:2px;}"}</style>
<article id={"cl-e85335193a93-n0"} className={"cl-e85335193a93"} data-cl={"n0"}>{"\n "}<h2 data-cl={"n1"}>{"Good ideas start small."}</h2>{"\n "}<p data-cl={"n2"}>{"\n Select this card, preview its design, then copy it into a clean project.\n "}</p>{"\n "}<button id={"cl-e85335193a93-n3"} data-cl={"n3"}>{"\n Keep exploring\n "}<svg aria-hidden={"true"} height={"20"} viewBox={"0 0 20 20"} width={"20"} data-cl={"n4"}>{"\n "}<path d={"M3 10h13m-5-5 5 5-5 5"} fill={"none"} stroke={"currentColor"} data-cl={"n5"}></path>{"\n "}</svg>{"\n "}</button>{"\n "}</article>
</>);
}
Supply your own behavior
CopyLook does not recover component state, event handlers, data requests or the original application source. Add the interactions and data your project needs after checking the captured appearance.
Ask your coding assistant for a specific next step
For example: “Use this captured JSX and its supporting CSS as a starting point. Replace the sample content with mine, preserve the spacing, and add my project’s button behavior.” Review the resulting code and test it in your project.
Compare the rendered result
Check the compiled component at the captured width and at useful smaller and larger widths. External image and font links must remain available to the destination.