Brewwind — Component Showcase

Buttons

Preview

Code

<button class="chai-bg-white chai-text-gray-900
  chai-px-5 chai-py-2 chai-rounded-md
  chai-font-sm chai-font-medium
  hover:chai-bg-gray-100">
  Deploy
</button>

<button class="chai-bg-[#1a1a1a] chai-text-[#ededed]
  chai-border chai-border-[rgba(255,255,255,0.12)]
  chai-px-5 chai-py-2 chai-rounded-md
  chai-font-sm chai-font-medium
  hover:chai-bg-gray-700">
  Settings
</button>

<button class="chai-text-[#888888]
  chai-px-5 chai-py-2 chai-rounded-md
  chai-font-sm chai-font-medium
  hover:chai-bg-gray-800
  hover:chai-text-white">
  Cancel
</button>

<button class="chai-bg-red-600 chai-text-white
  chai-px-5 chai-py-2 chai-rounded-md
  chai-font-sm chai-font-medium
  hover:chai-bg-red-700">
  Delete
</button>

<button class="chai-border chai-border-red-600
  chai-text-red-400 chai-px-5 chai-py-2
  chai-rounded-md chai-font-sm chai-font-medium
  hover:chai-bg-red-700
  hover:chai-text-white">
  Remove
</button>

Cards

Preview

Profile Card

Ariana Mills

@ariana_builds

Design systems, front-end craft, and small UI experiments every week.

312 Following

12.4K Followers

Code

<div class="chai-border chai-border-gray-800
  chai-rounded-2xl chai-overflow-hidden
  chai-flex chai-flex-col">
  <div class="chai-h-20 chai-bg-blue-500 chai-rounded-t-2xl"></div>
  <div class="chai-p-4 chai-flex chai-flex-col chai-gap-3">
    <div class="chai-flex chai-items-end chai-justify-between">
      <div class="chai-w-16 chai-h-16 chai-rounded-full
        chai-bg-gray-700 chai-border-4 chai-border-gray-900"></div>
      <button class="chai-bg-white chai-text-gray-900
        chai-rounded-full chai-px-4 chai-py-1
        chai-font-sm chai-font-semibold
        hover:chai-bg-gray-200">Follow</button>
    </div>
    <p class="chai-text-white chai-font-semibold">Ariana Mills</p>
    <p class="chai-text-gray-500">@ariana_builds</p>
  </div>
</div>

Preview

Pricing Card

Starter Plan

Free

$12/mo

3 Projects

Basic Analytics

Email Support

Code

<div class="chai-border chai-border-gray-700
  chai-rounded-2xl chai-p-5
  chai-flex chai-flex-col chai-gap-4">
  <p class="chai-text-gray-400">Starter Plan</p>
  <p>$12<span class="chai-text-gray-600">/mo</span></p>
  <ul class="chai-flex chai-flex-col chai-gap-2">
    <li>3 Projects</li>
    <li>Basic Analytics</li>
    <li>Email Support</li>
  </ul>
  <button class="chai-bg-white chai-text-gray-900
    chai-rounded-lg chai-px-4 chai-py-2
    chai-font-medium hover:chai-bg-gray-100">
    Choose Plan
  </button>
</div>

Preview

Alert Card

Deployment complete

Your project is live at brewwind.dev

Code

<div class="chai-border chai-border-gray-800
  chai-rounded-xl chai-p-4
  chai-flex chai-gap-3 chai-items-center">
  <div class="chai-w-8 chai-h-8 chai-rounded-lg
    chai-flex chai-items-center chai-justify-center">
    <!-- icon -->
  </div>
  <div class="chai-flex chai-flex-col chai-gap-1">
    <p class="chai-text-white chai-font-medium">
      Deployment complete
    </p>
    <p class="chai-text-gray-500">
      Your project is live at brewwind.dev
    </p>
  </div>
</div>

Preview

Stat Card

TOTAL DEPLOYS

2,847

+12.4%

vs last month

Code

<div class="chai-border chai-border-gray-800
  chai-rounded-xl chai-p-5
  chai-flex chai-flex-col chai-gap-3">
  <div class="chai-flex chai-justify-between chai-items-center">
    <p class="chai-text-gray-500">Total Deploys</p>
    <!-- icon -->
  </div>
  <p>2,847</p>
  <div class="chai-flex chai-items-center chai-gap-2">
    <span class="chai-text-green-400">+12.4%</span>
    <p class="chai-text-gray-600">vs last month</p>
  </div>
</div>