1657037160
Crear Formulario De inicio De Sesión En ReactJS Usando Tailwind CSS
En este tutorial, crearemos un formulario de inicio de sesión receptivo en react js usando tailwind css. Veremos una página de formulario de inicio de sesión simple, ejemplos de formularios de inicio de sesión social con Tailwind CSS & React.
Uso de herramientas
reaccionar JS
Viento de cola CSS 3.v
Primero debe configurar el proyecto de reacción con Tailwind CSS. Puede instalarlo manualmente o puede leer el blog a continuación.
Cómo instalar Tailwind CSS en React
Instalar y configurar Vite + React + Typescript + Tailwind CSS 3
Ejemplo 1
Reaccione el formulario de inicio de sesión simple ui con tailwind css.
Iniciar sesión.jsx
import React from 'react';
export default function Login() {
return (
<div className="relative flex flex-col justify-center min-h-screen overflow-hidden">
<div className="w-full p-6 m-auto bg-white rounded-md shadow-md lg:max-w-xl">
<h1 className="text-3xl font-semibold text-center text-purple-700 underline">
Sign in
</h1>
<form className="mt-6">
<div className="mb-2">
<label
for="email"
className="block text-sm font-semibold text-gray-800"
>
Email
</label>
<input
type="email"
className="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
/>
</div>
<div className="mb-2">
<label
for="password"
className="block text-sm font-semibold text-gray-800"
>
Password
</label>
<input
type="password"
className="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
/>
</div>
<a
href="#"
className="text-xs text-purple-600 hover:underline"
>
Forget Password?
</a>
<div className="mt-6">
<button className="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600">
Login
</button>
</div>
</form>
<p className="mt-8 text-xs font-light text-center text-gray-700">
{" "}
Don't have an account?{" "}
<a
href="#"
className="font-medium text-purple-600 hover:underline"
>
Sign up
</a>
</p>
</div>
</div>
);
}
Ejemplo 2
Diseña la página del formulario de inicio de sesión usando reaccionar tailwind v3.
Iniciar sesión.jsx
import React from 'react';
export default function Login() {
return (
<div className="relative flex flex-col justify-center min-h-screen overflow-hidden">
<div className="w-full p-6 m-auto bg-white rounded-md shadow-xl shadow-rose-600/40 ring ring-2 ring-purple-600 lg:max-w-xl">
<h1 className="text-3xl font-semibold text-center text-purple-700 underline uppercase decoration-wavy">
Sign in
</h1>
<form className="mt-6">
<div className="mb-2">
<label
for="email"
className="block text-sm font-semibold text-gray-800"
>
Email
</label>
<input
type="email"
className="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
/>
</div>
<div className="mb-2">
<label
for="password"
className="block text-sm font-semibold text-gray-800"
>
Password
</label>
<input
type="password"
className="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
/>
</div>
<a
href="#"
className="text-xs text-purple-600 hover:underline"
>
Forget Password?
</a>
<div className="mt-6">
<button className="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600">
Login
</button>
</div>
</form>
<p className="mt-8 text-xs font-light text-center text-gray-700">
{" "}
Don't have an account?{" "}
<a
href="#"
className="font-medium text-purple-600 hover:underline"
>
Sign up
</a>
</p>
</div>
</div>
);
}
Ejemplo 3
Formulario de inicio de sesión en redes sociales con reacción y viento de cola.
Iniciar sesión.jsx
import React from 'react';
export default function Login() {
return (
<div className="relative flex flex-col justify-center min-h-screen overflow-hidden">
<div className="w-full p-6 m-auto bg-white rounded-md shadow-xl lg:max-w-xl">
<h1 className="text-3xl font-semibold text-center text-purple-700 uppercase">
Sign in
</h1>
<form className="mt-6">
<div className="mb-2">
<label
for="email"
className="block text-sm font-semibold text-gray-800"
>
Email
</label>
<input
type="email"
className="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
/>
</div>
<div className="mb-2">
<label
for="password"
className="block text-sm font-semibold text-gray-800"
>
Password
</label>
<input
type="password"
className="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
/>
</div>
<a
href="#"
className="text-xs text-purple-600 hover:underline"
>
Forget Password?
</a>
<div className="mt-6">
<button className="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600">
Login
</button>
</div>
</form>
<div className="relative flex items-center justify-center w-full mt-6 border border-t">
<div className="absolute px-5 bg-white">Or</div>
</div>
<div className="flex mt-4 gap-x-2">
<button
type="button"
className="flex items-center justify-center w-full p-2 border border-gray-600 rounded-md focus:ring-2 focus:ring-offset-1 focus:ring-violet-600"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
className="w-5 h-5 fill-current"
>
<path d="M16.318 13.714v5.484h9.078c-0.37 2.354-2.745 6.901-9.078 6.901-5.458 0-9.917-4.521-9.917-10.099s4.458-10.099 9.917-10.099c3.109 0 5.193 1.318 6.38 2.464l4.339-4.182c-2.786-2.599-6.396-4.182-10.719-4.182-8.844 0-16 7.151-16 16s7.156 16 16 16c9.234 0 15.365-6.49 15.365-15.635 0-1.052-0.115-1.854-0.255-2.651z"></path>
</svg>
</button>
<button className="flex items-center justify-center w-full p-2 border border-gray-600 rounded-md focus:ring-2 focus:ring-offset-1 focus:ring-violet-600">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
className="w-5 h-5 fill-current"
>
<path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"></path>
</svg>
</button>
<button className="flex items-center justify-center w-full p-2 border border-gray-600 rounded-md focus:ring-2 focus:ring-offset-1 focus:ring-violet-600">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
className="w-5 h-5 fill-current"
>
<path d="M31.937 6.093c-1.177 0.516-2.437 0.871-3.765 1.032 1.355-0.813 2.391-2.099 2.885-3.631-1.271 0.74-2.677 1.276-4.172 1.579-1.192-1.276-2.896-2.079-4.787-2.079-3.625 0-6.563 2.937-6.563 6.557 0 0.521 0.063 1.021 0.172 1.495-5.453-0.255-10.287-2.875-13.52-6.833-0.568 0.964-0.891 2.084-0.891 3.303 0 2.281 1.161 4.281 2.916 5.457-1.073-0.031-2.083-0.328-2.968-0.817v0.079c0 3.181 2.26 5.833 5.26 6.437-0.547 0.145-1.131 0.229-1.724 0.229-0.421 0-0.823-0.041-1.224-0.115 0.844 2.604 3.26 4.5 6.14 4.557-2.239 1.755-5.077 2.801-8.135 2.801-0.521 0-1.041-0.025-1.563-0.088 2.917 1.86 6.36 2.948 10.079 2.948 12.067 0 18.661-9.995 18.661-18.651 0-0.276 0-0.557-0.021-0.839 1.287-0.917 2.401-2.079 3.281-3.396z"></path>
</svg>
</button>
</div>
<p className="mt-8 text-xs font-light text-center text-gray-700">
{" "}
Don't have an account?{" "}
<a
href="#"
className="font-medium text-purple-600 hover:underline"
>
Sign up
</a>
</p>
</div>
</div>
);
}
Fuente: https://larainfo.com
What is GEEK
Buddha Community
1657037160
Crear Formulario De inicio De Sesión En ReactJS Usando Tailwind CSS
En este tutorial, crearemos un formulario de inicio de sesión receptivo en react js usando tailwind css. Veremos una página de formulario de inicio de sesión simple, ejemplos de formularios de inicio de sesión social con Tailwind CSS & React.
Uso de herramientas
reaccionar JS
Viento de cola CSS 3.v
Primero debe configurar el proyecto de reacción con Tailwind CSS. Puede instalarlo manualmente o puede leer el blog a continuación.
Cómo instalar Tailwind CSS en React
Instalar y configurar Vite + React + Typescript + Tailwind CSS 3
Ejemplo 1
Reaccione el formulario de inicio de sesión simple ui con tailwind css.
Iniciar sesión.jsx
import React from 'react';
export default function Login() {
return (
<div className="relative flex flex-col justify-center min-h-screen overflow-hidden">
<div className="w-full p-6 m-auto bg-white rounded-md shadow-md lg:max-w-xl">
<h1 className="text-3xl font-semibold text-center text-purple-700 underline">
Sign in
</h1>
<form className="mt-6">
<div className="mb-2">
<label
for="email"
className="block text-sm font-semibold text-gray-800"
>
Email
</label>
<input
type="email"
className="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
/>
</div>
<div className="mb-2">
<label
for="password"
className="block text-sm font-semibold text-gray-800"
>
Password
</label>
<input
type="password"
className="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
/>
</div>
<a
href="#"
className="text-xs text-purple-600 hover:underline"
>
Forget Password?
</a>
<div className="mt-6">
<button className="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600">
Login
</button>
</div>
</form>
<p className="mt-8 text-xs font-light text-center text-gray-700">
{" "}
Don't have an account?{" "}
<a
href="#"
className="font-medium text-purple-600 hover:underline"
>
Sign up
</a>
</p>
</div>
</div>
);
}
Ejemplo 2
Diseña la página del formulario de inicio de sesión usando reaccionar tailwind v3.
Iniciar sesión.jsx
import React from 'react';
export default function Login() {
return (
<div className="relative flex flex-col justify-center min-h-screen overflow-hidden">
<div className="w-full p-6 m-auto bg-white rounded-md shadow-xl shadow-rose-600/40 ring ring-2 ring-purple-600 lg:max-w-xl">
<h1 className="text-3xl font-semibold text-center text-purple-700 underline uppercase decoration-wavy">
Sign in
</h1>
<form className="mt-6">
<div className="mb-2">
<label
for="email"
className="block text-sm font-semibold text-gray-800"
>
Email
</label>
<input
type="email"
className="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
/>
</div>
<div className="mb-2">
<label
for="password"
className="block text-sm font-semibold text-gray-800"
>
Password
</label>
<input
type="password"
className="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
/>
</div>
<a
href="#"
className="text-xs text-purple-600 hover:underline"
>
Forget Password?
</a>
<div className="mt-6">
<button className="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600">
Login
</button>
</div>
</form>
<p className="mt-8 text-xs font-light text-center text-gray-700">
{" "}
Don't have an account?{" "}
<a
href="#"
className="font-medium text-purple-600 hover:underline"
>
Sign up
</a>
</p>
</div>
</div>
);
}
Ejemplo 3
Formulario de inicio de sesión en redes sociales con reacción y viento de cola.
Iniciar sesión.jsx
import React from 'react';
export default function Login() {
return (
<div className="relative flex flex-col justify-center min-h-screen overflow-hidden">
<div className="w-full p-6 m-auto bg-white rounded-md shadow-xl lg:max-w-xl">
<h1 className="text-3xl font-semibold text-center text-purple-700 uppercase">
Sign in
</h1>
<form className="mt-6">
<div className="mb-2">
<label
for="email"
className="block text-sm font-semibold text-gray-800"
>
Email
</label>
<input
type="email"
className="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
/>
</div>
<div className="mb-2">
<label
for="password"
className="block text-sm font-semibold text-gray-800"
>
Password
</label>
<input
type="password"
className="block w-full px-4 py-2 mt-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40"
/>
</div>
<a
href="#"
className="text-xs text-purple-600 hover:underline"
>
Forget Password?
</a>
<div className="mt-6">
<button className="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-purple-700 rounded-md hover:bg-purple-600 focus:outline-none focus:bg-purple-600">
Login
</button>
</div>
</form>
<div className="relative flex items-center justify-center w-full mt-6 border border-t">
<div className="absolute px-5 bg-white">Or</div>
</div>
<div className="flex mt-4 gap-x-2">
<button
type="button"
className="flex items-center justify-center w-full p-2 border border-gray-600 rounded-md focus:ring-2 focus:ring-offset-1 focus:ring-violet-600"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
className="w-5 h-5 fill-current"
>
<path d="M16.318 13.714v5.484h9.078c-0.37 2.354-2.745 6.901-9.078 6.901-5.458 0-9.917-4.521-9.917-10.099s4.458-10.099 9.917-10.099c3.109 0 5.193 1.318 6.38 2.464l4.339-4.182c-2.786-2.599-6.396-4.182-10.719-4.182-8.844 0-16 7.151-16 16s7.156 16 16 16c9.234 0 15.365-6.49 15.365-15.635 0-1.052-0.115-1.854-0.255-2.651z"></path>
</svg>
</button>
<button className="flex items-center justify-center w-full p-2 border border-gray-600 rounded-md focus:ring-2 focus:ring-offset-1 focus:ring-violet-600">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
className="w-5 h-5 fill-current"
>
<path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"></path>
</svg>
</button>
<button className="flex items-center justify-center w-full p-2 border border-gray-600 rounded-md focus:ring-2 focus:ring-offset-1 focus:ring-violet-600">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
className="w-5 h-5 fill-current"
>
<path d="M31.937 6.093c-1.177 0.516-2.437 0.871-3.765 1.032 1.355-0.813 2.391-2.099 2.885-3.631-1.271 0.74-2.677 1.276-4.172 1.579-1.192-1.276-2.896-2.079-4.787-2.079-3.625 0-6.563 2.937-6.563 6.557 0 0.521 0.063 1.021 0.172 1.495-5.453-0.255-10.287-2.875-13.52-6.833-0.568 0.964-0.891 2.084-0.891 3.303 0 2.281 1.161 4.281 2.916 5.457-1.073-0.031-2.083-0.328-2.968-0.817v0.079c0 3.181 2.26 5.833 5.26 6.437-0.547 0.145-1.131 0.229-1.724 0.229-0.421 0-0.823-0.041-1.224-0.115 0.844 2.604 3.26 4.5 6.14 4.557-2.239 1.755-5.077 2.801-8.135 2.801-0.521 0-1.041-0.025-1.563-0.088 2.917 1.86 6.36 2.948 10.079 2.948 12.067 0 18.661-9.995 18.661-18.651 0-0.276 0-0.557-0.021-0.839 1.287-0.917 2.401-2.079 3.281-3.396z"></path>
</svg>
</button>
</div>
<p className="mt-8 text-xs font-light text-center text-gray-700">
{" "}
Don't have an account?{" "}
<a
href="#"
className="font-medium text-purple-600 hover:underline"
>
Sign up
</a>
</p>
</div>
</div>
);
}
Fuente: https://larainfo.com
1598727000
Tailwind CSS + ReactJS + Tailblocks = Quick Start Combo
Hello everyone, in this article I want to tell you how to create a quick project using TailwindCSS, ReactJS and Tailblocks.
Let’s start by getting acquainted with technologies.
Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs
**Tailwind CSS **is a CSS library developed by Adam Wathan. It allows you to export CSS to your elements using ready classes. It offers you a great flexibility when writing code because it doesn’t have ready components like Bootstrap, and it’s more customizable for your imagination and design capability.
Of course, these differences bring a lot of criticism. Since there are no ready components of the program, there are those who think that it is not much different from writing inline CSS by naming too many classes.
It also gets criticism as it becomes difficult to understand because of the lack of semantic (semantic) of class nomenclature, which is very close to atomic level. I advise you to read the article below on this topic.
There’s a lot to say about ReactJS , but I think there’s a lot of awareness in people now, I guess there’s no one who’s heard it. For detailed information, I recommend reading the following article and ReactJS’s own document.
#tailblocks #tailwind-css #reactjs #react #tailwind
1596530868
Hire CSS Developer
Want to develop a website or re-design using CSS Development?
We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.
For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS
#hire css developer #css development company #css development services #css development #css developer #css
1602955151
Tailwind CSS tutorial
In this tutorial I would like to introduce you to one of the fastest growing and promising CSS Frameworks at the moment, Tailwind CSS. It is different from other frameworks, such as Bootstrap, because it is built on a new way of building user interfaces using a utility-first CSS classes structure, as opposed to the OOCSS structure from other frameworks.
By the end of this guide you will be able to install, configure and build a responsive hero section (live demo) using the utility-first classes from Tailwind CSS and configure the project using the recommended PostCSS powered Tailwind configuration file for better maintainability and versatility.
Here’s the table of contents for this tutorial for Tailwind CSS:
- Introducing Tailwind CSS
- Adding Tailwind CSS to your project via a package manager
- Creating the configuration file and process your CSS with Tailwind
- Building a responsive hero section using the utility-first classes from Tailwind
- Customize fonts, colors and add extra classes using the configuration file
- Reduce loading time and file size by purging the unused classes from your CSS
- Conclusion and summary
Read the full tutorial from Themesberg.
#tailwind #tailwind-css #tailwind-css-tutorial #tutorial #open-source
1604404836
Popular Tailwind CSS Plugins and Extensions - Themesberg Blog
By reading this article you will browse a list of the most popular plugins and extensions for the utility-first CSS framework, Tailwind CSS. Although the default code base of the framework already covers a lot of the needs when building user interfaces, you can never get enough plugins and extensions powered by the open-source community.
One of the requirements for a plugin to appear on this list is to be open-source with no other strings attached so that the developers browsing this list can stay assured that they can use the plugin for their Tailwind CSS powered project.
Check out the list of Tailwind CSS Plugins and Extensions on Themesberg.
#tailwindcss #tailwind #tailwind-css #tailwind-css-plugins #themesberg