Box shadows we use in our application. Shadows are an essential piece of UI design as they help us evince depth and protrusion of content. Click a shadow to get its CSS custom property or inspect to extract the code.

Here is a [good resource](https://brumm.af/shadows) to generate more shadows for use.
```jsx noeditor
import { toast, Toaster } from "../../src/components/toast"
const copyShadow = event => {
  const { dataset: { content } } = event.target
  navigator.clipboard.writeText(content).then(() => {
      toast({
        text: `Copied ${content}`,
        type: "info",
        duration: 1000,
      })
  })
};
const circle = {
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  background: '#fff',
  width: '160px',
  height: '160px',
  border: 0,
  borderRadius: '10px',
};
<div
  className="bg-gray-200"
  style={{
    display: 'flex',
    gap: '20px',
    height: '200px',
    padding: '20px 40px',
    borderRadius: '4px',
    color: '#365',
  }}
>
  <button style={{...circle, boxShadow: '0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06)'}} onClick={copyShadow} data-content="shadow" title="copy shadow">
    <strong style={{ pointerEvents: 'none', display: 'block' }} className="block">shadow</strong>
    <span style={{ pointerEvents: 'none' }}>var(--shadow)</span>
  </button>
  <button style={{...circle, boxShadow: '0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05)'}} onClick={copyShadow} data-content="shadow-lg" title="copy shadow-lg">
    <strong style={{ pointerEvents: 'none', display: 'block' }}>shadow-lg</strong>
    <span style={{ pointerEvents: 'none' }}>var(--shadow-lg)</span>
  </button>
  <Toaster />
</div>
```