Prompt Display Card - Copy this React, Tailwind Component to your project

<div-className="bg-neutral-900-rounded-xl-shadow-lg-overflow-hidden">-<div-className="grid-grid-cols-1-md:grid-cols-2-gap-6-p-6">-{/*-Left-Section:-Prompt-Description-*/}-<div-className="bg-neutral-800-rounded-lg-p-5">-<h3-className="text-lg-font-semibold-text-white-mb-3">Prompt</h3>-<Card-bordered={false}-className="bg-neutral-700-text-white"-bodyStyle={{-height:-'300px',-overflowY:-'auto',-padding:-'12px',-color:-'white'-}}->-<p-className="text-sm">-{highlightVariables(prompt.description)}-</p>-</Card>-{/*-Tags-Section-*/}-<div-className="mt-4-flex-flex-wrap-gap-2">-{prompt.tags.map((tag)-=>-(-<Tag-key={tag}-color="blue"-className="text-xs-px-2-py-1-rounded-full"->-{tag}-</Tag>-))}-</div>-</div>-{/*-Right-Section:-Variables-*/}-<div-className="bg-neutral-800-rounded-lg-p-5">-{Object.keys(variables).length->-0-&&-(-<div>-<h4-className="text-base-font-semibold-text-gray-300-mb-4">-Prompt-Variables-</h4>-<div-className="grid-grid-cols-1-sm:grid-cols-2-gap-4">-{Object.keys(variables).map((variable)-=>-(-<div-key={variable}-className="flex-flex-col">-<label-className="text-sm-font-medium-text-gray-400-mb-2-truncate"-title={variable}->-{variable}-</label>-<Input-value={variables[variable]}-onChange={(e)-=>-handleVariableChange(variable,-e.target.value)}-placeholder={`Enter-${variable}`}-className="bg-neutral-700-text-white-placeholder-gray-500"-styles={{-input:-{-backgroundColor:-'#404040',-color:-'white',-borderColor:-'#525252'-}-}}-/>-</div>-))}-</div>-</div>-)}-</div>-</div>-{/*-Copy-to-Clipboard-Button-*/}-<div-className="flex-justify-end-p-4">-<Tooltip-title="Copy-to-Clipboard">-<Button-icon={<CopyOutlined-/>}-onClick={handleCopyToClipboard}-className="bg-blue-600-text-white-hover:bg-blue-700-transition-colors-duration-300"->-Copy-</Button>-</Tooltip>-</div>-</div>