JSFiddle - React, Tailwind, and code Playground

by ksoncan34

HTML

<html>

<head>
<link
  rel="stylesheet"
  href="https://unpkg.com/@shopify/[email protected]/build/esm/styles.css"
/>

</head>
<body>

<div><button class="Polaris-Button Polaris-Button--destructive" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Delete theme</span></span></button>
  <div id="PolarisPortalsContainer"></div>
</div>
</body>
</html>

CSS

:root {
  --p-background-hovered: rgba(241, 242, 243, 1);
  --p-background-pressed: rgba(237, 238, 239, 1);
  --p-background-selected: rgba(237, 238, 239, 1);
  --p-surface: rgba(255, 255, 255, 1);
  --p-surface-neutral: rgba(228, 229, 231, 1);
  --p-surface-neutral-hovered: rgba(219, 221, 223, 1);
  --p-surface-neutral-pressed: rgba(201, 204, 208, 1);
  --p-surface-neutral-disabled: rgba(241, 242, 243, 1);
  --p-surface-neutral-subdued: rgba(246, 246, 247, 1);
  --p-surface-subdued: rgba(250, 251, 251, 1);
  --p-surface-disabled: rgba(250, 251, 251, 1);
  --p-surface-hovered: rgba(246, 246, 247, 1);
  --p-surface-pressed: rgba(241, 242, 243, 1);
  --p-surface-depressed: rgba(237, 238, 239, 1);
  --p-backdrop: rgba(0, 0, 0, 0.5);
  --p-overlay: rgba(255, 255, 255, 0.5);
  --p-shadow-from-dim-light: rgba(0, 0, 0, 0.2);
  --p-shadow-from-ambient-light: rgba(23, 24, 24, 0.05);
  --p-shadow-from-direct-light: rgba(0, 0, 0, 0.15);
  --p-hint-from-direct-light: rgba(0, 0, 0, 0.15);
  --p-surface-search-field: rgba(241, 242, 243, 1);
  --p-border: rgba(140, 145, 150, 1);
  --p-border-neutral-subdued: rgba(186, 191, 195, 1);
  --p-border-hovered: rgba(153, 158, 164, 1);
  --p-border-disabled: rgba(210, 213, 216, 1);
  --p-border-subdued: rgba(201, 204, 207, 1);
  --p-border-depressed: rgba(87, 89, 89, 1);
  --p-border-shadow: rgba(174, 180, 185, 1);
  --p-border-shadow-subdued: rgba(186, 191, 196, 1);
  --p-divider: rgba(225, 227, 229, 1);
  --p-icon: rgba(92, 95, 98, 1);
  --p-icon-hovered: rgba(26, 28, 29, 1);
  --p-icon-pressed: rgba(68, 71, 74, 1);
  --p-icon-disabled: rgba(186, 190, 195, 1);
  --p-icon-subdued: rgba(140, 145, 150, 1);
  --p-text: rgba(32, 34, 35, 1);
  --p-text-disabled: rgba(140, 145, 150, 1);
  --p-text-subdued: rgba(109, 113, 117, 1);
  --p-interactive: rgba(44, 110, 203, 1);
  --p-interactive-disabled: rgba(189, 193, 204, 1);
  --p-interactive-hovered: rgba(31, 81, 153, 1);
  --p-interactive-pressed: rgba(16, 50, 98, 1);
  --p-focused: rgba(69,...