React Native + Tailwind CSS Signup Form Template

A selection of React Native signup screen components built with Tailwind CSS

These examples require the Tailwind React Native Classnames package.

Signup Screen (dark)

Signup Screen (dark)
import { View, Text, TextInput, Pressable } from 'react-native';
import tailwind from 'twrnc';
export default function LoginScreen() {
return (
<View style={tailwind`flex-1 items-center justify-center bg-black`}>
<View style={tailwind`p-8 w-full max-w-sm`}>
<Text style={tailwind`text-5xl font-bold mb-6 text-white`}>Login</Text>
<TextInput
style={tailwind`w-full bg-white rounded-md h-12 px-4 mb-4`}
placeholderTextColor="#000"
placeholder="Enter email address"
/>
<TextInput
style={tailwind`w-full bg-white rounded-md h-12 px-4`}
placeholderTextColor="#000"
placeholder="Enter password"
/>
<View style={tailwind`flex flex-row justify-between items-center my-8`}>
<View style={tailwind`flex-row items-center`}>
<Pressable style={tailwind`bg-white h-6 w-6 rounded-sm mr-2`}></Pressable>
<Text style={tailwind`text-white`}>Remember me</Text>
</View>
<Pressable>
<Text style={tailwind`text-white font-bold`}>Reset password</Text>
</Pressable>
</View>
<Pressable
style={tailwind`h-12 border-2 border-white rounded-md flex flex-row justify-center items-center px-6`}
>
<View style={tailwind`flex-1 flex items-center`}>
<Text style={tailwind`text-white text-base font-medium`}>Login</Text>
</View>
</Pressable>
</View>
</View>
);
}

Signup Screen (light)

Signup Screen (light)
import { View, Text, TextInput, Pressable } from 'react-native';
import tailwind from 'twrnc';
export default function LoginScreen() {
return (
<View style={tailwind`flex-1 items-center justify-center bg-slate-50`}>
<View style={tailwind`p-8 w-full max-w-sm`}>
<Text style={tailwind`text-5xl font-bold mb-6 text-slate-900`}>Login</Text>
<TextInput
style={tailwind`w-full bg-white border border-slate-200 rounded-md h-12 px-4 mb-4`}
placeholderTextColor="#000"
placeholder="Enter email address"
/>
<TextInput
style={tailwind`w-full bg-white border border-slate-200 rounded-md h-12 px-4`}
placeholderTextColor="#000"
placeholder="Enter password"
/>
<View style={tailwind`flex flex-row justify-between items-center my-8`}>
<View style={tailwind`flex-row items-center`}>
<Pressable
style={tailwind`bg-white border border-slate-200 h-6 w-6 rounded-sm mr-2 flex items-center justify-center`}
>
{/* selected state */}
<View style={tailwind`bg-green-400 w-4 h-4 rounded-sm`} />
</Pressable>
<Text style={tailwind`text-slate-900`}>Remember me</Text>
</View>
<Pressable>
<Text style={tailwind`text-blue-400 font-bold`}>Reset password</Text>
</Pressable>
</View>
<Pressable
style={tailwind`h-12 bg-purple-500 rounded-md flex flex-row justify-center items-center px-6`}
>
<View style={tailwind`flex-1 flex items-center`}>
<Text style={tailwind`text-white text-base font-medium`}>Login</Text>
</View>
</Pressable>
</View>
</View>
);
}

Copyright 2022 - Atom Lab | Privacy Policy | Terms and Conditions