JSFiddle - React, Tailwind, and code Playground
by FGRibreau
HTML
<svg style="width:100%;height:400px;">
<g id="Bots-UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<defs>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
<feColorMatrix values="0 0 0 0 0.149019608 0 0 0 0 0.156862745 0 0 0 0 0.176470588 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<mask id="mask-3" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="300" height="187" fill="white">
<rect id="path-1" x="0" y="0" width="300" height="187" rx="5"></rect>
</mask>
<rect id="path-4" x="0" y="0" width="300" height="40" rx="5"></rect>
<mask id="mask-5" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="300" height="40" fill="white">
<use xlink:href="#path-4"></use>
</mask>
</defs>
<g id="Create-a-bot---Bot-Interface-4-messages" transform="translate(-817.000000, -404.000000)">
<g id="Card-ask-a-question-with-choices" transform="translate(821.000000, 406.000000)">
<g id="Card">
<rect fill="black" fill-opacity="1" filter="url(#filter-2)" x="0" y="0" width="300" height="187" rx="5"></rect>
<rect stroke="#DCDDE0" mask="url(#mask-3)" stroke-width="2" stroke-linecap="square" fill="#FFFFFF" fill-rule="evenodd" x="0" y="0" width="300" height="187" rx="5"></rect>
</g>
<use id="Top-card" stroke="#DCDDE0" mask="url(#mask-5)" stroke-width="2" stroke-linecap="square" fill="#F4F4F5" xlink:href="#path-4"></use>
<text id="Ask-a-question"...