tailwind-productivity

hosted link:-https://thakaresakshi.github.io/tailwind-productivity/ Flexbox Layout:

flex: This class is applied to the main container (div) to make it a flex container. It allows for easy horizontal and vertical alignment of its child elements. items-center: This class aligns the children of the flex container vertically in the center. justify-center: This class horizontally centers the children of the flex container. Width and Height:

w-1/5, w-1/2: These classes set the width of elements to specific fractions of their parent container. For example, w-1/5 sets the width to 20% of the parent container's width, and w-1/2 sets it to 50%. h-screen, h-auto, h-24: These classes control the height of elements. h-screen sets the height to 100% of the viewport height, h-auto allows the element's height to adjust to its content, and h-24 sets a fixed height of 6rem (24 pixels). Background and Text Colors:

bg-gray-500, bg-stone-900, bg-sky-500, bg-neutral-800, bg-lime-500, bg-pink-700, bg-yellow-600, bg-purple-700: These classes set background colors using a predefined color palette in Tailwind CSS. text-white, text-gray-500, text-gray-700: These classes set text color. Spacing and Margins:

p-4, p-1: These classes set padding to elements. p-4 adds padding of 1rem (4 units), and p-1 adds padding of 0.25rem (1 unit). m-3: This class sets margin to elements. m-3 adds margin of 0.75rem (3 units). gap-4: This class sets the gap between flex container children. Borders:

rounded-lg, rounded-md, rounded-full: These classes apply rounded corners to elements. rounded-lg adds large border-radius, rounded-md adds medium border-radius, and rounded-full creates a circular shape for elements. border-2, border-solid, border-green-600, border-gray-400, border-yellow-600: These classes set border properties, including border width, style, and color. Typography:

text-3xl, text-xs: These classes set font sizes. text-3xl sets a font size of 1.875rem (3xl size), and text-xs sets a font size of 0.75rem (extra-small size). font-bold, font-medium: These classes control font weights. Buttons:

bg-sky-500, bg-slate-500: These classes define button backgrounds using the color palette. text-white: Sets text color to white for button text. rounded-2xl: Applies rounded corners to buttons. w-1/2, w-1/3: Sets the width of buttons to specific fractions of their parent container. Icons:

material-icons: This class is used to apply Material Icons to elements. text-xs: Sets a small text size for icons. rounded-full: Makes icons circular. Input Elements:

bg-neutral-800: Sets the background color for input elements. border-none: Removes the default border from input elements.