Fancy Tailwind

Responsive Tailwind CSS registration form component with name, email and password input, plus external sign in. Classic form based on React, adaptable in Javascript Vanilla. Made by Fancy Tailwind.

Fancy Tailwind presents

Fancy Simple Form 1

Free

Your Component

Sign Up and join us

By signing up, you agree to our Terms and Conditions

OR

Sign In with

Instructions

In order to get this component working with all its effects/animations, please follow the instructions which can involve adding layer utilities or modifying your tailwind.config.js file.

Make sure to get that right before copying the code so you can enjoy this beautiful Fancy Tailwind component.

-> In Tailwind.config.js file :

This component use color class “sky” that you can find in taildwind default configuration (colors file). Please make sure that you add it to your theme like this :

const colors = require('../colors')  
  
theme: {
  colors: {
    sky: colors.sky,
  },
}

Add this “variant” to your theme :

  • […, ‘hover’] to “scale” array.



(Take a look at “variantOrder” in Tailwind.config.js default configuration file if you are confused)

If you use JIT mode, you don’t have to add these variants. They are by default enabled !! Great !

This component use a plugin that provides a basic reset for form styles that makes form elements easy to override with utilities. Please install Tailwind plugin (“@tailwindcss/forms”) then add the plugin to your tailwind.config.js file.

Code Snippet

Main Component