Open in app

Sign In

Write

Sign In

Om
Om

14 Followers

Home

About

Feb 6

Make animated landing page in React

Boilerplate setup yarn create vite yarn create vite 2. Install tailwind yarn add -D tailwindcss postcss autoprefixer npx tailwindcss init -p > configure your template paths, Add the paths to all of your template files in your tailwind.config.cjs file. content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], > Add the Tailwind directives to your…

React

7 min read

Make animated landing page in React
Make animated landing page in React
React

7 min read


Jan 26

Advanced TODO App in react-native using expo,shopify-restyle, zustand, and typescript PART-1

We’ll use react-native to make a todo list app using typescript, zustand, shopify-restyle hop over to the video tutorials Setting up boilerplate using expo npx create-expo-app --template Folder structure

React Native

3 min read

Advanced TODO App in react-native using expo,shopify-restyle, zustand, and typescript PART-1
Advanced TODO App in react-native using expo,shopify-restyle, zustand, and typescript PART-1
React Native

3 min read


Jul 19, 2021

Tailwind CSS Card

Concepts to be covered Spacing in tailwind 1. Padding 2. Margin Font classes

Tailwind Css

2 min read

Tailwind CSS Card
Tailwind CSS Card
Tailwind Css

2 min read


Apr 25, 2021

Figma Login page with react-hook-form and tailwind

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)

2 min read

Figma Login page with react-hook-form and tailwind
Figma Login page with react-hook-form and tailwind

2 min read


Apr 25, 2021

Figma Sign In page using Tailwind and react-hook-form

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

React

2 min read

Figma Sign In page using Tailwind and react-hook-form
Figma Sign In page using Tailwind and react-hook-form
React

2 min read


Apr 21, 2021

Figma signin form using Material-UI

React

1 min read

Figma signin form using Material-UI
Figma signin form using Material-UI
React

1 min read


Apr 2, 2021

Material ui glassomorphism cards

To get the of material-ui let’s try to make 10 different types of cards 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 } });

Material Ui

2 min read

Material ui glassomorphism cards
Material ui glassomorphism cards
Material Ui

2 min read

Om

Om

14 Followers
Following
  • Bytefer

    Bytefer

  • Fresh Frontend Links

    Fresh Frontend Links

  • Tom Jay

    Tom Jay

  • Saba

    Saba

  • Tarik

    Tarik

Help

Status

Writers

Blog

Careers

Privacy

Terms

About

Text to speech