Design System
With Tailwind

The components will be styled with Tailwind using classes, so you simply have to copy and paste.

Get Start
1

Create/Configuration Project:

Start by creating a new Astro project 
npm create astro@latest
2

install Dependencies:

Install Tailwind CSS 
npx astro add tailwind
3

Create a Component:

Then copy and paste into your file to have the component styled using classes with Tailwind
Code: 
<button class="bg-orange-300 mr-2 mb-2 px-2.5 py-1.5 
		text-black font-medium text-center 
		justify-center inline-flex items-center flex-row 
		rounded-lg border gap-x-2 opacity-90
		cursor-pointer hover:bg-orange-500 hover:text-white 
		hover:opacity-100 hover:bg-black-600 
		hover:scale-110 hover:shadow-lg 
		dark:focus:ring-black-300 
		focus:ring-2 focus:outline-none focus:ring-black-30 
		transition-all duration-200 ease-in-out scale-90">
Button
</button>