Llamada a la acción (Call-to-Action) con Tailwind
Colorido y moderno componente reutilizable hecho con Tailwind
Ver código
Copiar código
El siguiente componente de llamada a la acción (Call-to-Action) cuenta con un estilo moderno y colorido que se puede adaptar fácilmente a cualquier tipo de landing page.
La paleta de colores y los estilos se pueden cambiar directamente con las clases utilitarias de Tailwind o también se puede sobreescribir directamente con tus variable y estilos en línea.
Para quien no lo sepa, las llamadas a la acción o «Call-to-action» son parte fundamental de toda web, en especial si se buscar conversiones y/o acciones por parte del usuario. Así que lo ideal es que el diseño sea atractivo, limpio y fácil de entender.
¿Cómo instalarlo?
Solo se necesita copiar y pegar el código. Todos los estilos son compatibles con la versión default de Tailwind.
En el caso de que se quiera implementar en React, solo se necesita cambiar la palabra clave class por className.
Código
⚙️ HTML/CSS
COPIAR
<section>
<form action="" className='px-2 max-w-xl mx-auto my-4'>
<div className="flex justify-center">
<div className="my-4">
<img src='https://assets.website-files.com/60530b250558ec92cb160920/6140c7091b90b3278e725c20_webfly..svg' />
</div>
</div>
<h1 className='text-2xl md:4xl font-medium text-center my-4'>
Create account
</h1>
<p className='text-center max-w-[350px] mx-auto font-light text-lg text-slate-500'>
Lorem ipsum dolor sit eli. Do you already have an account? Login!
</p>
<div className="flex flex-col gap-2 my-4">
<button className='border w-full p-4 cursor-pointer flex items-center justify-center gap-2'>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="none"
className="css-1rzr0l5"
viewBox="0 0 16 16"
>
<g clipPath="url(#clip0)">
<path
fill="#4285F4"
d="M15.81 8.15c0-.655-.054-1.133-.169-1.63H8.156v2.96h4.393c-.088.735-.566 1.842-1.63 2.586l-.014.1 2.366 1.833.164.016c1.506-1.39 2.374-3.437 2.374-5.864z"
></path>
<path
fill="#34A853"
d="M8.156 15.945c2.152 0 3.96-.709 5.28-1.931l-2.516-1.949c-.674.47-1.577.797-2.764.797-2.108 0-3.898-1.39-4.536-3.313l-.093.008-2.461 1.905-.032.09a7.967 7.967 0 007.122 4.393z"
></path>
<path
fill="#FBBC05"
d="M3.62 9.55a4.908 4.908 0 01-.265-1.577c0-.549.097-1.08.256-1.576l-.004-.106-2.492-1.935-.081.038a7.98 7.98 0 00-.85 3.58c0 1.284.31 2.497.85 3.578L3.62 9.55z"
></path>
<path
fill="#EB4335"
d="M8.156 3.083c1.497 0 2.507.646 3.082 1.187l2.25-2.197C12.107.788 10.309 0 8.157 0a7.967 7.967 0 00-7.122 4.394L3.61 6.396c.647-1.923 2.437-3.313 4.545-3.313z"
></path>
</g>
<defs>
<clipPath id="clip0">
<path
fill="#fff"
d="M0 0H15.635V16H0z"
transform="translate(.182)"
></path>
</clipPath>
</defs>
</svg>
Sign up with Google
</button>
<button className='border w-full p-4 cursor-pointer flex items-center justify-center gap-2'>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
fill="currentColor"
stroke="currentColor"
strokeWidth="0"
viewBox="0 0 24 24"
>
<path
fillRule="evenodd"
d="M11.999 1C5.926 1 1 5.925 1 12c0 4.86 3.152 8.983 7.523 10.437.55.102.75-.238.75-.53 0-.26-.009-.952-.014-1.87-3.06.664-3.706-1.475-3.706-1.475-.5-1.27-1.221-1.61-1.221-1.61-.999-.681.075-.668.075-.668 1.105.078 1.685 1.134 1.685 1.134.981 1.68 2.575 1.195 3.202.914.1-.71.384-1.195.698-1.47-2.442-.278-5.01-1.222-5.01-5.437 0-1.2.428-2.183 1.132-2.952-.114-.278-.491-1.397.108-2.91 0 0 .923-.297 3.025 1.127A10.536 10.536 0 0112 6.32c.935.004 1.876.125 2.754.37 2.1-1.424 3.022-1.128 3.022-1.128.6 1.514.223 2.633.11 2.911.705.769 1.13 1.751 1.13 2.952 0 4.226-2.572 5.156-5.022 5.428.395.34.747 1.01.747 2.037 0 1.47-.014 2.657-.014 3.017 0 .295.199.637.756.53C19.851 20.979 23 16.859 23 12c0-6.075-4.926-11-11.001-11"
></path>
</svg>
Sign up with GitHub
</button>
<button className='border w-full p-4 cursor-pointer flex items-center justify-center gap-2'>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
fill="none"
viewBox="0 0 22 22"
>
<g clipPath="url(#clip0_2454_129)">
<path
fill="#1877F2"
d="M22 11c0-6.075-4.925-11-11-11S0 4.925 0 11c0 5.49 4.023 10.041 9.281 10.866V14.18H6.488V11h2.793V8.577c0-2.757 1.643-4.28 4.155-4.28 1.204 0 2.462.215 2.462.215v2.707h-1.387c-1.366 0-1.792.848-1.792 1.718V11h3.05l-.487 3.18h-2.563v7.686C17.977 21.041 22 16.491 22 11z"
></path>
<path
fill="#fff"
d="M15.282 14.18L15.77 11h-3.051V8.937c0-.87.426-1.718 1.792-1.718h1.387V4.512s-1.258-.215-2.462-.215c-2.512 0-4.155 1.523-4.155 4.28V11H6.488v3.18h2.793v7.686a11.077 11.077 0 003.438 0V14.18h2.563z"
></path>
</g>
<defs>
<clipPath id="clip0_2454_129">
<path fill="#fff" d="M0 0H22V22H0z"></path>
</clipPath>
</defs>
</svg>
Sign up with Facebook
</button>
<button className='border w-full p-4 cursor-pointer flex items-center justify-center gap-2'>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1.2em"
height="1.2em"
fill="none"
viewBox="0 0 33 33"
>
<path
fill="#96A9B2"
d="M32.989 27.393c.125-.338-14.24-11.184-14.24-11.184-1.797-1.327-2.743-1.348-4.521 0 0 0-14.343 10.837-14.223 11.17l-.002.003.005.008c.122.331.299.64.524.912.095.115.21.212.32.312l-.006.004c.009.008.02.011.029.02a3.094 3.094 0 001.708.761c.01.002.018.007.028.008h.04c.1.01.194.034.295.034h27.117c1.335 0 2.467-.84 2.916-2.017.005-.009.014-.015.019-.024l-.01-.007z"
></path>
<path
fill="#B9C5C6"
d="M16.509 14.964L.079 27.287V9.83a3.08 3.08 0 013.08-3.081h26.7a3.08 3.08 0 013.08 3.08v17.458l-16.43-12.323z"
></path>
<path
fill="#EDECE6"
d="M.27 8.759l14.028 11.018c1.77 1.306 2.702 1.327 4.452 0l14.006-11c-.243-.441-.606-.79-1.022-1.067l.192-.15a3.055 3.055 0 00-1.738-.778L2.83 6.783a3.05 3.05 0 00-1.736.776l.191.15c-.411.273-.772.615-1.015 1.05z"
></path>
<path
fill="#DCE2E2"
d="M.265 8.782c-.123.333 14.02 11.011 14.02 11.011 1.77 1.307 2.701 1.327 4.452 0 0 0 14.122-10.67 14.003-10.998l.003-.003-.006-.007a3.078 3.078 0 00-.515-.898c-.093-.114-.206-.209-.314-.307l.005-.004c-.009-.008-.02-.012-.029-.02a3.046 3.046 0 00-1.68-.75c-.011-.001-.02-.006-.03-.008h-.038c-.098-.009-.19-.032-.291-.032h-26.7A3.074 3.074 0 00.276 8.75c-.005.009-.013.015-.018.024l.008.007z"
></path>
</svg>
Sign up with email
</button>
</div>
<div className="text-sm text-center max-w-[350px] mx-auto text-slate-500">
By signing up, I agree to the Terms of Service and Privacy Policy Change website data collection preferences
</div>
</form>
</section>