
import CssTable from '../../components/CssTable'
import Demo from '../../components/demo/kbd/index.mdx'

## Default Class Table
  
<CssTable name="kbd" />
  
## Demo
  
<Demo></Demo>
  
## Css Schema


### Base

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Base Schema</span>
</div>
<div class="collapse-content"> 

```css
.kbd {
  @apply inline-flex items-center justify-center;
}

```

</div>
</div>



### Styled

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Styled Schema</span>
</div>
<div class="collapse-content"> 

```css
.kbd {
  @apply border-base-content bg-base-200 rounded-btn border border-opacity-20 px-2;
  border-bottom-width: 2px;
  min-height: 2.2em;
  min-width: 2.2em;
}

```

</div>
</div>



### Utils

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Utils Schema</span>
</div>
<div class="collapse-content"> 

```css
.kbd-xs {
  @apply px-1 text-xs;
  min-height: 1.2em;
  min-width: 1.2em;
}
.kbd-sm {
  @apply px-1 text-sm;
  min-height: 1.6em;
  min-width: 1.6em;
}
.kbd-md {
  @apply px-2 text-base;
  min-height: 2.2em;
  min-width: 2.2em;
}
.kbd-lg {
  @apply px-4 text-lg;
  min-height: 2.5em;
  min-width: 2.5em;
}

```

</div>
</div>



