Sign in

Concepts to be covered

  1. Font classes

The tailwind classes that play a major role in styling the form are.

1. For proper spacing ( margin ) between the child elements of a parent container we can use space-y-[value] for instance space-y-4

![carbon(8).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619146884004/tx9804tc_.png)

2. For animation on buttons

![carbon(7).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619146801366/rNM9Zmu_c.png)

3. To stack the elements we have used flex flex-col items-center justify-center.

— -

# Functionalities

Form handling in React has been made easy-peasy with libraries such as formik and react-hook-form. The later ones v7 is released with some updates in the apis so let’s try to employ those in our application.

## The significant changes are :

1. We no longer have to deal with ref={register} , we can simply…


Yay!

Let’s break the whole Application in two parts

1. Styling

2. Functionalities

The tailwind classes that play a major role in styling the form are.

1 .For proper spacing ( margin ) between the child elements of a parent container we can use space-y-[value] for instance space-y-4


To get the of material-ui let’s try to make 10 different types of cards

  1. Basic Card
import React from "react";
import { makeStyles } from "@material-ui/core/";
import { Card, CardContent, Typography } from "@material-ui/core/";
const useStyles = makeStyles({
root: {
minWidth: 275,
backgroundColor: "rgba(255,255,255,0.4)",
backgroundImage:
"linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)",
backdropFilter: "blur(40)px",
boxShadow: "10px 10px 10px rgba(30,30,30,.1)",
borderRadius: 10
}
});
export default function BasicCard() {
const classes = useStyles();
return (
<Card className={classes.root}>
<CardContent>
<Typography color="textSecondary" gutterBottom>
Word of the Day
</Typography>
<Typography variant="h2" component="h2" gutterBottom>
Hello
</Typography>
<Typography variant="subtitle1" component="p">
React components for faster and easier web development. Build your own
design system, or start with Material Design.
</Typography>
</CardContent>
</Card>
);
}

Om

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store