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 from 'toasted-notes';
import 'toasted-notes/src/styles.css';
const copyShadow = event => {
  const { dataset: { content } } = event.target
  navigator.clipboard.writeText(content).then(() => {
    toast.notify(`Copied ${content}`, {
      position: 'bottom-right',
      type: 'info',
    })
  })
};
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>
</div>
```
